КАК ПЕРЕДАТЬ ДИЗАЙН ИЗ ФИГМЫ ВЕРСТАЛЬЩИКУ
Когда вы закончили работу в Figma, вы должны передать свой дизайн верстальщику. В Figma есть несколько способов это сделать.
Первый способ — вы можете экспортировать свои иллюстрации в PNG или JPEG и отправить их верстальщику. Однако этот метод не является лучшим, так как верстальщикам нужно будет заново создавать все элементы в HTML и CSS, что займет время и может привести к ошибкам.
Второй способ — вы можете создать прототип в Figma и отправить его верстальщику. Прототип содержит все действия, которые пользователь может выполнить на сайте, и дает верстальщику более полное представление о дизайне. Однако создание прототипа может занять некоторое время, особенно если ваш дизайн сложный.
Третий способ — вы можете использовать плагины, которые помогают экспортировать ваш дизайн из Figma в HTML и CSS. Некоторые из этих плагинов включают HTML to Figma или CSS Scan. Эти плагины создают HTML-код и CSS-стили на основе вашего дизайна в Figma, что позволяет верстальщику сразу же начать работу над вашим дизайном без необходимости пересоздания всех элементов.
Независимо от того, каким способом вы выберете, важно общаться с вашим верстальщиком, чтобы убедиться, что они понимают ваш дизайн и могут создать веб-сайт, который соответствует вашим ожиданиям.
Передача ссылки на проект в Figma
Передача файла разработчику в Фигме
Создаем бомбический дизайн с артдиректором
Верстка сайта с нуля из Figma для начинающих #1
Как подготовить дизайн-макет для передачи разработчику (верстальщику, программисту)
8 урок — Figma 2020 — Экспорт, передача макета в разработку
Как подготовить макет к верстке? За что верстальщики не любят дизайнеров? Часть 1
ПРАВИЛА ПОДГОТОВКИ ДИЗАЙН-МАКЕТА К ВЕРСТКЕ
Передаем макет и верстку правильно
Сетка помогает правильно упорядочить элементы и задает ритм для всего макета. При передаче макета верстальщику не забудьте указать размера контейнера всего содержимого сайта. А если некоторые блоки имеют контейнер со своей шириной, то укажите его размер отдельно.
Расстояния
Старайтесь унифицировать все расстояния между блоками вашего макета. Это значительно упростит работу верстальщику, да и визуально ваш макет будет выглядеть более аккуратным.
Текстовые стили
Не поленитесь создать отдельную страницу, где будут указаны гарнитура, кегль, начертание и межстрочный интервал. Кроме того, не забудьте указать как они будут меняться на разных разрешениях экрана.
Адаптив
Не следует отдавать макет в разработку без отрисованных экранов мобильной версии, полагая, что верстальщик сам всё придумает и реализует. Это задача самого дизайнера и то, каким видит адаптив макета разработчик, может значительно отличаться от того, что будет удобно пользователям.
Состояния элементов
Проработайте состояния всех элементов. Возьмите, например, кнопку из макета и нарисуйте все её состояния: обычное, при ховере, при нажатии. Также тут можно указать все стили, которые присутствуют в макете.
Главное правило при работе над макетом – это внимание к деталям и упорядоченность. Не стоит делать что-то «на глаз» и тогда шансы на то, что финальный сайт будет похож на макет значительно повысятся.
На что ещё следует обратить внимание перед тем, как передавать макет верстальщику? Делитесь своим опытом в комментариях.
Сохраните этот пост, чтобы не потерять.
Как передать макет верстальщику из фигмы
Но лучше применять специальные программы, например Принцип. Если работаете в Виндоусе, присмотритесь к аналогу — Протопай.
Прикладывайте к макету шрифты и иконки
Во время работы собирайте все используемые шрифты, иконки и картинки в отдельную папку, чтобы потом отправить её разработчикам вместе с макетом. Растровые картинки должны быть в ретиновом размере — в два раза больше их размеров в макете.
Если используете шрифт с сервиса Гугль‑фонтс, дайте разработчику ссылку на него. В этом случае файл шрифта не понадобится, потому что на сайт его подключают через этот сервис.
Проведите презентацию
Важно провести презентацию макета до окончания работ по дизайну — возможно, вы придумали штуку, которую сложно, долго или вообще невозможно реализовывать. Так вы вовремя об этом узнаете и у вас будет время придумать другое решение.
Созвонитесь с разработчиками, включите презентацию экрана или расшарьте Фигму и проведите разработчиков по всем макетам. Пусть разработчики зададут вопросы и прокомментируют ваши решения в дизайне.
Дальнейшие изменения в макетах уже после начала разработки необязательно презентовать вживую. Их можно донести в переписке.
P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.
От дизайна к фронтенду: как передать макет в разработку
Чтобы все изображения и кнопки были на своих местах, анимации корректно работали, а шрифты на макете совпадали со шрифтами в интерфейсе, разработчику нужно больше, чем доступ к проекту в Figma. Мы в Friflex проектируем интерфейсы для миллионов пользователей, и, работая над проектами, очень внимательно следим, чтобы после программирования дизайн сохранял функциональность и внешний вид. В этой статье Светлана Моторкина, Head of Design, Friflex, опираясь на свой опыт, рассказывает, как подружить дизайнера и фронтендера и передать макет в разработку без потерь.
Когда работа над визуальной частью проекта закончена, и все макеты готовы, приходит время передать их в разработку. А чтобы после прикрутки к движку все осталось так же красиво как и в макете, необходимо добиться полной гармонии между дизайнером и разработчиком.
Важно понимать, что после передачи макета работа дизайнера не заканчивается. Он как инженер напрямую связан с разработкой и отвечает за весь проект до его реализации.
Сегодня мы детально рассмотрим процесс от начала до конца. В этой статье я поделюсь своими советами, которые помогут сэкономить время и силы на просьбах от разработчиков что-то срочно нарезать или добавить промежуточное состояние экрана.
Шаг 1. Старт проекта
Перед любым новым проектом дизайнер часто задается вопросом: «Какие данные проекта есть на этом этапе и что нужно отрисовывать». После общения с менеджером и получения технического задания не всегда хватает информации о технических ограничениях. Поэтому желательно ознакомиться с возможностями API, выяснить, с какими наборами данных мы будем работать и что с ними можно сделать.
После ознакомления с документацией надо понять, с чего мы начинаем и какой экран нужно отдать в первую очередь. Для этого назначаются встречи с разработчиками, где можно обсудить планы проекта, этапы сдачи экранов и определить их приоритетность.
На встрече заранее согласуйте примерные гайдлайны с разработкой. Это поможет избежать возможных проблем со стилем текста, набором цветов, размерами иконок и т.д. Также не забудьте договориться о технических возможностях и сроках разработки, например, при проектировании сложных анимаций.
Шаг 2. Работа с макетами
Соблюдение структуры
Для простой и удобной навигации в любом проекте должна быть выстроена понятная структура. Называйте страницы и фреймы осмысленно.
Это позволит коллегам понять логику макета и начать быстрее ориентироваться в структуре.
Используйте Changelog (журнал изменений) – фрейм, который содержит поддерживаемый, упорядоченный в хронологическом порядке список изменений для каждой версии проекта. Так разработчик всегда будет в курсе всех изменений.
Компоненты спасают дизайнера от рутины. Задав вид компонента один раз, его автоматически измененные копии можно использовать в разных частях проекта. Используйте их максимально, создавая библиотеку компонентов. И не забывайте показывать все состояния и описания каждого компонента.
Описание компонента
При описании каждого из компонентов попробуйте поставить себя на место разработчика, которому предстоит взять макет в работу.
Создавайте док-фрейм для каждого компонента, в котором будет:
- Описание компонента.
Детально продумайте и опишите свой компонент, например, все виды и размеры компонента, возможные конфигурации, максимальную и минимальную ширину компонента и т. д.
- Стейты (состояния).
Создавая компонент, закладывайте все состояния заранее. Все возможные загрузки, активное и неактивное состояние / при наведении / нажатии в пустом и заполненном виде / ошибки и т. д.
Лайфхак: ознакомиться с примером описания для компонента «Button» можно на сайте Carbon Design System.
Адаптивность и сетки
Адаптивность
Адаптивность – способность макета подстраиваться под разный формат разрешения экрана. Возьмите за правило отрисовывать несколько вариантов макетов под адаптив для разных устройств. Достаточно три – четыре версии (Например для веб: от 1280 – ∞, 1024, 768, 320).
Не забывайте отрисовывать макеты под минимальный размер, либо всегда проверять или закладывать размер на экранах 320px.
Показывайте отзывчивость с помощью Constraints в Figma, т.е. привязки. Если вы рисуете четыре макета, то для каждого из них обязательно нужно прописывать constraints.
Лайфхак: при отрисовке адаптива нужно учитывать Landscape (горизонтальное положение) состояние. Особенно если использование вашего продукта это предусматривает. Актуально для карт, навигаторов, воспроизведения видео.
Сетка
Для того чтобы между дизайнером и разработчиком не было разногласий по поводу отступов и расстояний, используется сетка. Сетка помогает правильно организовать элементы.
Для мобильных устройств обычно используется 4px или 8px сетка.
В результате любой элемент макета кроме линий всегда имеет размер, кратный четырем или восьми. Это автоматически снимает все вопросы по случайным смещениям, дробным пикселям и т.п.
Для веба используется известная сетка Boostrap.
Существует два вида сетки:
- Фиксированая сетка – сетка, в которой колонки зафиксированы по ширине.
- Резиновая сетка – сетка, в которой колонки меняют свою ширину в зависимости от размера устройства.
Лайфхак: добавляйте в стиль созданные колонки/сетки. Чтобы применить колонки к монтажной области, достаточно ее выделить и выбрать на панели «Design» в разделе «Layout Grid» соответствующий разрешению макета стиль. Включить/выключить отображение колонок и сетки: Ctrl + G (для Mac),
Ctrl + Shift + 4» (для Windows).
Карты экранов
Карта экранов показывает весь User Flow, не давая разработчику запутаться в архитектуре продукта. С картой экранов будет понятна логика переходов и взаимодействие с интерфейсом для конкретных кейсов.
Лайфхак: не обязательно рисовать пути вручную, для этого есть множество плагинов. Я использую AutoFlow, ArrowAuto.
Заметки разработчику
Оставляйте заметки разработчику. Такие, как описание действия компонента при нажатии на него. Выберите Master Component, нажмите на иконку настройки и в появившемся окне Documentation (документация) введите текст в поле «How to use this component». Текст отобразится в виде комментария в CCS.
Перед сдачей макетов в разработку уберите все лишнее: наброски, варианты макета, референсы. Но не удаляйте наработки и макеты, которые потеряли актуальность. Они могут пригодиться для следующих работ. Соберите их в отдельную страницу проекта. Для удобства можно использовать плагин Archiver.
Автоматически упорядочивайте и очищайте документ Figma с помощью плагина Clean Document. Он позволяет удалять скрытые слои, разгруппировывать однослойные группы и т.д.
Шаг 3 Передача в разработку
Статус готовности и версионность
Если вы передаете макеты в разработку и параллельно ведете работу, не забывайте указывать, какие макеты уже готовы. Есть несколько способов явно обозначить статус готовности:
- Делить на отдельные пейджи. Разбивайте макеты на вкладки по готовности: готово для разработки / в процессе.
- Указывать статус в самом макете. Маркируем статусы на каждой группе или на каждом макете.
Если в макетах происходят глобальные изменения, например, была изменена структура раздела на сайте, то старайтесь делить макет на версионность, т.е. создавайте новую версию на каждый новый пейдж.
Незначительные изменения, например, смену вида иконки в интерфейсе, можно фиксировать для разработчиков в Changelog (журнал изменений).
Прототипирование
Разработчик не всегда понимает, какой элемент с чем и как должен взаимодействовать в интерфейсе. Для этого нужно прототипирование. Переходы и простые прототипы можно собирать в Figma. Для более сложной анимации вам потребуются дополнительные инструменты: Principle, After Effects и т.д.
Лайфхак: если у вас не хватает навыков сложной анимации, прикрепляйте референсы анимации в виде скринов и ссылок.
Помните, что любая сложная анимация может как сделать ваш интерфейс привлекательным, так и сильно замедлить его.
Графические ассеты и шрифты
Разработчики могут обратиться с просьбой выгрузить графику для каждой платформы в своем формате. Чтобы не тратить на это время, можно сделать выгрузку автоматически с помощью плагина Export Presets. Плагин помогает формировать в один клик ассеты в нужном формате, включая пресеты по умолчанию для самых популярных платформ.
При использовании нестандартных шрифтов в макете, не забывайте прикладывать архив или давать ссылку на скачивание.
Анализ объема работ и общение с разработчиком
После подготовки макетов оцените, на сколько большой объем работы в итоге получился. Разбейте макет на несколько задач, созвонитесь с разработчиком и обсудите план работ. После чего передавайте все макеты в разработку.
Если вы не работайте в Figma, а используете Sketch, можно передавать макеты в Zeplin.
Шаг 4 Дизайн-ревью
На стадии дизайн-ревью задача дизайнера состоит в том, чтобы сверять дизайн- макеты и логику работы.
Фидбек от разработчиков
На этапе ревью могут всплыть дополнительные нюансы, которые не были учтены в работе: забыли показать все состояния стейтов, шрифт на экранах плохо читаем, на дизайне контраст. Работайте с фидбеком от разработчиков. Они имеют опыт и навыки программирования и могут посоветовать, как и где упростить интерфейс, сократить шаги/клики пользователя.
Лайфхак: используете комментарии в Figma как дополнительный инструмент для коммуникации. Участники могут читать, добавлять упоминания и оставлять комментарии к файлу без ограничений.
Практически невозможно сделать все идеально! Не затягивайте и пишите правки с момента получения первой сборки. Сверяйте все на разных размерах устройств, платформ. Чем раньше вы начнете проверять, тем меньше ошибок уйдет в прод.
Лайфхак: возьмите скриншот сборки экрана и приложите рядом со своим макетом. Зафиксируете рядом с экранами правки и отправьте на доработку.
После того, как разработчик внес все правки, задача переходит на QA.
Надеюсь, этот гайд поможет вам научиться передавать макеты в разработку быстро и без потерь, а также позволит сэкономить силы и время на доработках. А если вы хотите узнать, как ускорить процесс разработки в крупных проектах, читайте нашу статью про дизайн-систему от Ильи Лесова.
35 показов
14K открытий
5 репостов
51 комментарий
Написать комментарий.
Ох уж эти идеальные дизайнеры, которые где-то существуют )
Вообще интересно было бы про стандартизацию всех элементов )
Развернуть ветку
Достойно оплачивайте услуги и вы удивитесь, сколько толковых дизайнеров, разработчиков, строителей, сантехников.
Развернуть ветку
4 комментария
Добавлю пару советов:
— Разберитесь как работают средства лейаутинга в выбранной технологии. Как происходит компоновка, как отрабатывается ресайзинг визуально. Хорошие разработчики не откажут ни в экскурсе, ни в наброске мини прототипа на поиграться. Зато вы будете с разрабами в одних системах координат, и не будет вопроса, почему нельзя 13.58 пикселя тут и 45.42 пикселя здесь.
— Излишняя кастомизация — зло. Старайтесь стандартизировать размерности/отступы и прочие паддинги. Анимации должны быть переиспользованы либо действительно необходимы.
— Минимальное поддерживаемое разрешение — супер важная характеристика, всегда продумывайте этот случай на этапе прототипа. Сэкономит кучу времени на разработку и отладку в дальнейшем.
— Заведите неформальный чат с разрабами, где вы будете кидаться друг в друга мемасами об избранности дизайнеров и презренности разработчиков и наоборот. Неформальные связи сильно помогают в работе и взаимопонимании.