Плагин Zeplin Sketch — мост рабочего процесса между проектированием и проектированием

Zeplin — это мощный инструмент для совместной работы, который устраняет разрыв между дизайнерами и разработчиками, создавая связанное пространство для групп разработчиков.

Почему Зеплин?

Важным элементом любой головоломки по разработке продукта является место, где дизайн встречается с разработкой. Когда проект готов перейти к этапу разработки («передача»), инженерам нужен способ понять его и воплотить в коде.

Zeplin облегчает передачу, беря проекты из Sketch, Adobe XD, Figma и Photoshop и экспортируя их в формат, который может легко создавать фрагменты кода, руководства по стилю, спецификации и ресурсы.

Попрощайтесь со днями «красной черты». Zeplin ориентирован исключительно на улучшение сотрудничества между дизайнерами продуктов и командами разработчиков и используется ведущими командами разработчиков в Airbnb, Dropbox, Pinterest, Microsoft и многих других.

С Zeplin нет необходимости вручную прописывать размеры или поля, печатать копию, экспортировать значки. Это просто потрясающе и экономит много времени, чтобы сосредоточиться на исследованиях дизайна. – Алексей Потриваев, дизайнер продуктов @Intercom

В одной из наших прошлых статей дизайнер Toptal Мика Бауэрс говорил о важности наличия стандартизированной системы языка дизайна для эффективного общения между различными функциями продуктовых команд, работающих над цифровыми продуктами.

Путем управления версиями дизайнерских ресурсов, создания библиотек компонентов и создания руководств по стилю проект, перенесенный в Zeplin, может служить «единым источником истины» для групп разработчиков.

В основном мы считаем Zeplin нашим источником правды для сотрудничества с Engineering. Если этого нет в Zeplin, то это не официально. – Джейсон Стофф, старший дизайнер, цифровые продукты @Starbucks

Ограничения Зеплина

Хотя у Zeplin есть много полезных функций, он не идеален. Zeplin предлагает бесплатный план, но в рамках этого плана он ограничен одним проектом. При разработке как для iOS, так и для Android потребуются два отдельных проекта. В этот момент потребуется платный план.

Как только процесс работы с Zeplin и Sketch (или другими упомянутыми выше приложениями) будет понятен, рабочий процесс станет простым. Тем не менее, у Zeplin есть своего рода кривая обучения, которая требует некоторого времени и внимания. Чтобы увидеть общий обзор и узнать больше о том, как его использовать, посмотрите демонстрационное видео Zeplin ниже:

Работа со Sketch и Zeplin: шаги и советы

1. Начните работу с Zeplin.

• Создайте учетную запись Zeplin, если у вас ее еще нет. Вы можете зарегистрироваться бесплатно: https://app.zeplin.io/register
• Загрузите настольное приложение Zeplin для Mac или Windows.
• Загрузите плагин Zeplin для Sketch.

2. Подготовьте файл Sketch.

• Теперь, когда у нас есть Sketch и Zeplin, готовые к работе, мы настроим наш файл Sketch для плавного экспорта в Zeplin.
• В Sketch организуйте свои активы и слои, используя согласованные соглашения об именах. Если вы сотрудничаете с другими дизайнерами, определите соглашения, которые работают для всех в вашей команде. В зависимости от типа проекта (например, iOS, Android или Интернет) Zeplin автоматически настраивает соглашение об именах ресурсов, делая их экспорт одношаговым процессом.
• Создавайте символы для общих элементов и активов в Sketch. Это позволит вам настроить компоненты в Zeplin.
• Сохраните цвета в палитре «Цвета документа», а шрифты — как «Стили текста» в файле Sketch. Они появятся в вашем руководстве по стилю, созданном Zeplin.

3. Сделайте ресурсы экспортируемыми в Sketch.

• Это очень важный шаг. После того, как ваши активы сгруппированы в символы, откройте страницу «Символы» в файле Sketch.
• Нажмите на группу внутри символа, такого как «ic-menu» (значок папки)
• Выделив группу, найдите действие «Сделать экспортируемым» в нижней правой части «Инспектора» в Sketch и нажмите на эту опцию. Теперь рядом с названием вашей группы должен появиться значок фрагмента.
• Этот шаг позволит инженерам экспортировать ресурсы напрямую из Zeplin.

4. Создайте новый проект в Zeplin.

• Выберите тип проекта, который вы строите. Обратите внимание, что у вас должны быть отдельные проекты для iOS и Android, даже если дизайны идентичны. Это связано с тем, что Zeplin будет генерировать различный код в зависимости от типа проекта.
• Выберите разрешение проекта, соответствующее вашим монтажным областям Sketch (например, 1x, 320 пикселей).

5. Экспортируйте артборды Sketch в Zeplin.

• В Sketch выделите все монтажные области, которые вы хотите экспортировать в Zeplin.
• Перейдите в « Плагины» > «Zeplin» > «Экспортировать выбранное… » или нажмите ⌃⌘E на клавиатуре.
• Далее мы экспортируем символы из Sketch. Откройте страницу символов в Sketch и выделите все монтажные области. Экспорт в Зеплин.

6. Организовать проект в Zeplin.

• Теперь, когда ваши артборды Sketch находятся в Zeplin, давайте организуем иллюстрацию по разделам.
• В представлении Dashboard вашего проекта выберите похожие экраны, чтобы сгруппировать их по категориям. После выделения щелкните правой кнопкой мыши и выберите «Новый раздел из выделенного». Повторяйте это до тех пор, пока ваш файл Zeplin не будет правильно организован.

7. Используйте компоненты в Zeplin.

Возможно, одна из самых полезных функций Zeplin — это возможность организовывать активы в библиотеки компонентов. Это важно, когда дизайн проекта разрабатывается для нескольких платформ разными членами команды. Унификация дизайна очень важна, как подчеркивает дизайнер Airbnb Карри Сааринен в книге «Создание визуального языка»:

Единая система проектирования необходима для лучшего и быстрого строительства; лучше, потому что целостный интерфейс легче воспринимается нашими пользователями, и быстрее, потому что он дает нам общий язык для работы.

• Выберите вкладку «Styleguide» вверху по центру Zeplin (рядом с «Dashboard»).
• На вкладке «Styleguide» выберите дополнительную вкладку «Компоненты». Здесь вы увидите все ваши символы, экспортированные из Sketch.
• Организуйте их в разделы, такие как «Значки», «Изображения», «Общие элементы» и т. д. Вы можете узнать больше о вкладке «Компоненты» руководства по стилю вашего проекта в Zeplin здесь.

8. Экспортировать руководства по стилю из Zeplin.

• В представлении Dashboard вашего проекта Zeplin найдите кнопку «Поделиться» в правом верхнем углу приложения.
• Выберите «Поделиться», затем найдите «Сцена» в нижней части меню. Выберите «Включить», а затем «Открыть». Это создаст динамическое руководство по стилю для вашего проекта. Поделитесь URL-адресом со своей командой.

9. Аннотируйте свои проекты в Zeplin.

• Добавлять примечания к проектам с Zeplin очень просто. В подробном представлении экрана выберите значок добавления примечания и прикрепите примечание к компоненту.
• Вы можете добавить примечание, удерживая нажатой клавишу Cmd ( Ctrl для пользователей Windows и Linux) и щелкнув в любом месте экрана.
• Вы даже можете упомянуть других товарищей по команде с помощью «@», и они получат уведомление.

10. Сотрудничайте, делитесь и используйте контроль версий.

• Теперь, когда ваш файл Zeplin готов поделиться с вашей командой, пригласите пользователей по их адресу электронной почты или отправьте им URL-адрес проекта.
• Продолжайте обновлять файл Zeplin, экспортируя монтажные области из Sketch.
• Zeplin автоматически контролирует версии ваших файлов, и вы можете продолжить сотрудничество с членами команды, используя этот динамический «источник правды».

Заключение

Создание динамичного, организованного и совместного рабочего процесса между командами дизайнеров и разработчиков имеет важное значение для создания отличных цифровых продуктов. Наличие моста рабочего процесса, такого как Zeplin, позволяет дизайнерам аннотировать экраны и облегчает часто пугающую фазу передачи с полными и точными спецификациями.

Гибкость динамического обновления ресурсов из одного центрального источника, например символа в Sketch, экспортируемого в компонент в Zeplin, обеспечивает невероятную гибкость. Затем инженеры могут легко экспортировать активы в собственный код, экономя время и утомляемость.

В то время как продуманный UX и эстетически красивый дизайн являются основой успешного продукта, процесс передачи этого дизайна в руки пользователей имеет решающее значение.

Дизайнеры, которые хотят быть эффективными и полагаться на единственный «источник правды», должны рассмотреть рабочий процесс Sketch to Zeplin, описанный выше. Сила надежной программной связи между этими двумя инструментами проектирования поможет дизайнерам и командам разработчиков добраться до финиша с большей легкостью и удовлетворением.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Adobe XD против Sketch — какой UX-инструмент вам подходит?
• Как создать эффективную структуру дизайна (включает бесплатную структуру пользовательского интерфейса Sketch)
• Вещи, которые вы могли не знать о типографике в Sketch
• Знакомство с разработкой плагинов для Sketch
• Создание умопомрачительных иллюстраций с помощью Sketch и Looper в кратчайшие сроки