UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Zeplin.io - способ подружить дизайнера и верстальщика
Редакція
Редакція

Опубліковано • Оновлено

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

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

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

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

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

“Make Exportable”

После выделения слоя в вашем файле Sketch, выберите опцию “Make Exportable” (сделать экспортируемым) в правом нижнем углу экрана: Image description
Сделать слои “экспортируемыми”. zeplin …и собственно, это все! Вам даже не нужно выделять отдельные размеры и выбирать суффиксы. Zeplin сам выберет необходимые настройки в зависимости от типа и плотности вашего проекта. Теперь вы можете просто экспортировать артборд в Зеплин, как вы обычно и делаете. Используйте Cmd + E или воспользуйтесь меню “Plugins > Zeplin > Export Selected Artboards…”. Когда экспорт закончен, программа отобразит готовые исходники. Вот как это выглядит: Image description
Используйте опцию “Make Exportable”, если хотите, чтобы исходники были того же размера, что и соответствующие слои, это простая и очень удобная функция.

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

Во многих случаях может понадобиться добавить отступы вокруг иконок. Скажем, у вас есть иконка 36x36 px, но вам нужно экспортировать ее в изображение размером 48x48px с прозрачным фоном. И тут на помощь приходит опция “Slice” в Sketch:

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

Image description
Выбор “Export Group Contents Only”. Теперь слайс экспортирован как изображение 48x48 px (с прозрачным фоном). Вот как это выглядит в Zeplin: Image description
Помните: по умолчанию слайсы тоже имеют цвет фона артборда. Убедитесь, что опция “Include in Export” (включить в экспорт) отключена для цвета фона артборда: Image description

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

Zeplin.io нормально отображает все слои файла Sketch, даже если они сгруппированы. Возможно, вы захотите управлять некоторыми группами слоев, как одним слоем. В версии 1.0 это возможно! Просто допишите “-g-” в начале имени слоя. Также есть небольшой плагин, который помогает сделать то же самое: “Plugins > Zeplin > Utilities > Exclude Sublayers” или используйте горячие клавиши “Cmd + Shift + X”. Image description
. Давайте протестируем его на иконке, в которой 8 разных слоев. Image description
Применим опцию “Exclude Sublayers”. Она автоматически добавляет “-g-” в начале имени слоя:Image description
И вот как экспорт выглядит в Zeplin, как один слой: Image description
Надеюсь, экспорт исходников Sketch помогут вам в работе .

Найновіші коментарі (0)