передача дизайна разработчику

Серия уроков Sketch (часть 1 из 5): Настройка Sketch

Серия уроков Sketch (часть 2 из 5): Символы и стили

Серия уроков Sketch (часть 3 из 5): Дизайн десктоп версии

Серия уроков Sketch (часть 4 из 5): Дизайн мобильной версии

Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

 

Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки идеально подойдут для быстрого ознакомления с работой Sketch, получения навыков по созданию роскошных дизайнов для десктопа, планшетов и мобильных устройств. А сегодня мы поймем, как происходит передача дизайна разработчикам.

 

Передача дизайна: подготовка к передаче разработчикам

Часть 5 (завершающая для этой серии) будет довольно короткой, но это только потому, что Zeplin очень прост и удобен в использовании.

У нас есть 3 дизайна (артборд), все выглядит pixel perfect, и теперь нужно передать их разработчикам для воплощения в жизнь.

Есть несколько плагинов Sketch, которые могут генерировать для вас руководства по стилю. В прошлом я уже пользовался некоторыми из них, и они неплохо справлялись со своей задачей.

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

Так что пойдем на zeplin.io и зарегистрируемся (у них есть бесплатный начальный аккаунт, так что для пробы платить не придется).

 

1 G6 Iggo5DIpNmsKPx WNcg 80x43 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Серия уроков Sketch (часть 5 из 5): передача дизайна разработчику

Регистрация бесплатного аккаунта Zeplin и передача дизайна.

Если вы дизайнер, вы можете скачать приложение под Mac (что мы и сделаем).

Если вы разработчик, который работает под Windows или Linux, вы тоже можете работать над проектом через веб-приложение, так что аргумент “Ага, вы используете Sketch, но мои разработчики сидят на Windows” не помешает вам.

1 tplsyhkT1YQBhXoelDhdTg 80x62 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Выберите либо Mac-приложение, либо веб-приложение

Установите приложение и запустите его, создайте свой первый проект.

Создайте свой первый проект.

1 THBc5dlRc3EirWUQbX87Eg 80x53 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

Так как мы работали над дизайном под веб-приложение, выберите опцию Веб.

В нашем случае это более релевантно. Измерения в px, экспорт цветов в CSS и т.д.

1 8zAOuZGN2zMNom6cxNByhg 80x36 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Выберите релевантное назначение приложения

На следующем скрине, после того, как вы создали ваш новый проект, введите название проекта и измените плотность пикселей под ваши требования, кликнув на панели инспектора справа.

1 vYyAU dWwpZUmDvvQ7jNVA 80x37 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Дайте вашему проекту крутое название

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

1 2MqaA2zppjGDKL0iC6Tz8w 80x63 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Пригласите народ для совместной работы над проектом Zeplin

А теперь самая простая часть – экспорт артбордов из Sketch в Zeplin.

Примечание: Когда вы установили приложение Zeplin, также установится (надеюсь на это) и плагин для Sketch.

Вернемся в Sketch, выделите три артборда, которые мы ранее создали (Desktop, Tablet, Mobile).

Нажмите Cmd + E или выберите Plugins > Zeplin > Export Selected Artboards

Выберите только что созданный проект Zeplin и кликните Import.

И пусть магия творит!

1 DFe1j7rFWs7eMe2A5 LeJQ 80x62 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Выделите проект для импорта артбордов

Вот и все, артборды импортированы в Zeplin.

1 jFDx405J0x0ivHQCmvKi0A 80x43 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Артборды импортированы в Zeplin

Двойной клик перенесет вас на каждый отдельный артборд, где вы можете получить больше информации о конкретном артборде.

Тут вы также можете выбрать (кликнув на иконку в виде капли справа от цвета) цвета для переноса в ваше руководство стиля.

1 poH1o8UN6crUY5xV17ouXA 80x55 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

Проверьте исходники (изображения и т.д.), которые вы сделали экспортируемыми со Sketch.

Остановимся немного на исходниках.

Например, вы можете подготовить к экспорту иконку мегафона (среди других исходников) – просто выделите его на своем артборде, и кликните Make Exportable.

1 1IYg YuIWPu4LiYSTbBcUQ 80x52 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

Вам не нужно ничего делать в Sketch, так как Zeplin автоматически со всем разберется, в зависимости от типа проекта, плотности проекта и т.д. Круто, да?

1 CbuXluONRwMwZLTr4sueAg 80x44 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Все релевантные размеры изображения экспортированы для вас

Вы также можете оставлять комментарии для вашего разработчика с помощью клавиш Cmd + Click в любом месте дизайна.

1 tjYuXnWemMG6xGoEORJ4uA 80x61 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Оставляйте комментарии для других членов проекта

Точно, как в Sketch, вы можете легко посмотреть расстояние между объектами на артборде.

Это так облегчает жизнь разработчику (особенно, если у них под рукой нет Sketch) в плане просмотра всех размеров вплоть до пикселя в вашем дизайне.

1 mFlUO7qZBW7O7ihcrBMMcQ 80x37 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Вспомогательные линии для измерений во всей красе

Выделение слоя в Zeplin также дает вам детальный обзор слоя в панели инспектора.

Ваш разработчик станет, эм… счастливым разработчиком!

1 wtVxTqXsKzqmkQSzPiKhfw 80x36 - Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
Доступен детальный обзор каждого элемента

Во вкладке Guideline вы можете увидеть, какие шрифты используются в проекте, цвета (вы можете легко кликнуть на названии цвета, чтобы переименовать его на более подходящие названия).

Font Book (книга шрифтов) также делается без особого труда, а из разговоров с командой Zeplin я слышал, что они собираются включить ее импорт в будущее обновление.

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

Передача дизайна прошла успешно, это конец!

Большое спасибо за то, что прошли этот марафон из 5 уроков для работы в Sketch.

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

 

Серия уроков Sketch (часть 1 из 5): Настройка Sketch

Серия уроков Sketch (часть 2 из 5): Символы и стили

Серия уроков Sketch (часть 3 из 5): Дизайн десктоп версии

Серия уроков Sketch (часть 4 из 5): Дизайн мобильной версии

Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

Оригинал: Marc Andrew

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

Похожие записи
1 80x42 - Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch

Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch

Независимо от того, являетесь ли вы экспертом по Sketch или новичком, многие…
1 80x42 - Прощай Sketch…

Прощай Sketch…

Часто возникает вопрос: «Какой инструмент дизайна лучший?» И долгое время ответом был Sketch, но теперь это не так.
IMG 9479 80x42 - Лучшие практики наименования Artboard’ов в Sketch

Лучшие практики наименования Artboard’ов в Sketch

Привет, сообщество дизайнеров! Я думаю, что все сталкивались с проблемой правильного именования…