Sketch-Zeplin

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.

Промо ролик говорит сам за себя:

От разработчиков:

Недавно мы запустили продукт Zeplin 1.0 с самой ожидаемой функцией экспорт исходников Sketch! И вот небольшое руководство по максимально эффективному использованию этой возможности.

Вот небольшое введение в экспорт исходников Sketch в Zeplin

Zeplin.io – это десктопное приложение, которое помогает дизайнерам интерфейсов и фронт-енд разработчикам эффективно работать в команде, экономя свое время. Программа берет файл с дизайном, а затем генерирует руководство по стилю, исходники и спецификации, которые нужны разработчикам. Для детального знакомства перейдите на официальный сайт.
Благодаря новой опции экспорта исходников вам не нужно готовить графические исходники вручную, и даже не надо думать о том, в какие конкретно размеры нужно их экспортировать. Разработчики получают доступ ко всем нужным исходникам прямо онлайн всего в один клик.

“Make Exportable”

После выделения слоя в вашем файле Sketch, выберите опцию “Make Exportable” (сделать экспортируемым) в правом нижнем углу экрана:

0 yy8HfTazw 5QwoIe 80x57 - Zeplin.io - способ подружить дизайнера и верстальщика
Сделать слои “экспортируемыми”. zeplin

…и собственно, это все! Вам даже не нужно выделять отдельные размеры и выбирать суффиксы. Zeplin сам выберет необходимые настройки в зависимости от типа и плотности вашего проекта. Теперь вы можете просто экспортировать артборд в Зеплин, как вы обычно и делаете. Используйте Cmd + E или воспользуйтесь меню “Plugins > Zeplin > Export Selected Artboards…”.

Когда экспорт закончен, программа отобразит готовые исходники. Вот как это выглядит:

0 xwUvhg9ftp2vs I0 80x42 - Zeplin.io - способ подружить дизайнера и верстальщика
Исходники в Zeplin!

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

Исходники с прозрачным фоном

Во многих случаях может понадобиться добавить отступы вокруг иконок. Скажем, у вас есть иконка 36×36 px, но вам нужно экспортировать ее в изображение размером 48x48px с прозрачным фоном.

И тут на помощь приходит опция “Slice” в Sketch:

  1. Нарисуйте слайс вокруг иконки.
  2. Сгруппируйте иконку и слайс.
  3. И вот самая крутая часть: Выделите слайс и выберите опцию “Export Group Contents Only” (экспортировать только содержимое группы):
0 HTpPG5yTQORgV2F 80x45 - Zeplin.io - способ подружить дизайнера и верстальщика
Выбор “Export Group Contents Only”.

Теперь слайс экспортирован как изображение 48×48 px (с прозрачным фоном). Вот как это выглядит в Zeplin:

0 qd M0WHR3h Gn77 80x43 - Zeplin.io - способ подружить дизайнера и верстальщика
Исходники с отступами!

Помните: по умолчанию слайсы тоже имеют цвет фона артборда. Убедитесь, что опция “Include in Export” (включить в экспорт) отключена для цвета фона артборда:

0 TJq cD6y3vQRTkGs 80x57 - Zeplin.io - способ подружить дизайнера и верстальщика
Настройка параметров цвета фона артборда.

Сохраняем единство групп стилей

Zeplin.io нормально отображает все слои файла Sketch, даже если они сгруппированы. Возможно, вы захотите управлять некоторыми группами слоев, как одним слоем. В версии 1.0 это возможно! Просто допишите “-g-” в начале имени слоя. Также есть небольшой плагин, который помогает сделать то же самое:

“Plugins > Zeplin > Utilities > Exclude Sublayers” или используйте горячие клавиши “Cmd + Shift + X”.

0 wf6cSRZD7n46LtcS 80x45 - Zeplin.io - способ подружить дизайнера и верстальщика
Плагин “Exclude Sublayers” (исключить подслои).

Давайте протестируем его на иконке, в которой 8 разных слоев.

0 tKRoLRzKvGpM3Z3n 80x46 - Zeplin.io - способ подружить дизайнера и верстальщика
Иконка Zeplin.io в Sketch.

Применим опцию “Exclude Sublayers”. Она автоматически добавляет “-g-” в начале имени слоя:

0 bqpYWmPgtM0LzTKv 80x45 - Zeplin.io - способ подружить дизайнера и верстальщика

И вот как экспорт выглядит в Zeplin, как один слой:

0 C2XzJvdr5V22tNrl 80x44 - Zeplin.io - способ подружить дизайнера и верстальщика

Надеюсь, экспорт исходников Sketch помогут вам в работе .

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи
1 9 80x42 - Новый подход к подбору цвета интерфейса

Новый подход к подбору цвета интерфейса

Совместное использование нового способа построения цветовых систем для доступных пользовательских интерфейсов. Создайте…
social facebook 52 80x42 - Базовая сетка 4px для достижения визуальной точности

Базовая сетка 4px для достижения визуальной точности

Я пользуюсь базовой сеткой 4px уже более 2-х лет и пытаюсь заставить мою команду начать использовать ее.
1 1 80x42 - 7 фундаментальных приемов психологии в дизайне, которые должен знать каждый дизайнер

7 фундаментальных приемов психологии в дизайне, которые должен знать каждый дизайнер

Для продуктового дизайнера недостаточно быть экспертом в области интерактивного дизайна. И вот почему…