Zeplin

Zeplin объединяет в себе несколько взаимодополняющих инструментов, которые позволяют дизайнерам и разработчикам работать с макетами в одном пространстве^[3].

• Передача дизайн-макетов и спецификаций — импортирует экраны из Sketch, Figma, Adobe XD и Photoshop, автоматически извлекая размеры, цвета, шрифты и отступы^[2].
• Автоматическая генерация кода — формирует CSS, Less, Sass, SCSS, Stylus и XML-фрагменты, а также HTML-элементы; расширяемая система плагинов даёт возможность генерировать код для React Native, Swift, Flutter и других платформ^[1][2].
• Экспорт ассетов — создаёт растровые и векторные активы (PNG, SVG, WebP) в нужных разрешениях и плотностях экранов^[2].
• Styleguides — помогает формализовать дизайн-систему: цвета, текстовые стили, компоненты, сетки и правила отступов хранятся в одном месте и синхронизируются между проектами^[4].
• Управление версиями — фиксирует изменения каждого экрана, позволяя отслеживать эволюцию макета и при необходимости откатываться на предыдущие ревизии.
• Flows (пользовательские потоки) — связывает экраны в интерактивные сценарии для визуализации навигации продукта до начала разработки^[5].
• Комментарии и аннотации — участники команды обсуждают элементы интерфейса прямо в макете, что сокращает количество уточняющих вопросов^[3].
• Централизованное хранилище проектов — экраны организуются по папкам, разделам и тегам, формируя единый каталог дизайна^[2].
• Интеграции — платформа подключается к Slack, Jira, Storybook, GitHub, Android Studio, Xcode, Visual Studio Code, Microsoft Teams и другим инструментам, автоматически отправляя уведомления о важных изменениях^[5].

Zeplin применяется на разных этапах продуктовой разработки и полезен как дизайнерам, так и программистам^[6].

• Для дизайнеров
  • публикация макетов из Figma или Sketch в общий проект без отправки файлов по почте^[7];
  • автоматическое построение стайлгайдов на основе опубликованных экранов;
  • документирование пользовательских сценариев при помощи аннотаций и Flows^[8];
  • запрос подтверждений у заинтересованных сторон перед передачей макета в разработку^[9].
• Для разработчиков
  • просмотр размеров, отступов и цветов по клику на любой слой без обращения к дизайнеру^[2]
  • мгновенная генерация CSS/SCSS или XML-файлов, а также скачивание оптимизированных иконок и изображений^[6];
  • сопоставление компонентов кодовой базы с элементами дизайн-системы, чтобы открывать их репозитории из интерфейса Zeplin^[10];
  • визуальная проверка (Live Comparison) — наложение макета поверх реализованного интерфейса для достижения пиксель-перфект результата.
• Для всей команды
  • единое пространство для обсуждения и отслеживания статуса экранов с помощью тегов и разделов;
  • автоматические уведомления в Slack или Microsoft Teams при изменениях дизайн-системы, что держит всю команду в курсе последних обновлений^[10].