Как передать макет верстальщику из фигмы

КАК ПЕРЕДАТЬ ДИЗАЙН ИЗ ФИГМЫ ВЕРСТАЛЬЩИКУ

Когда вы закончили работу в 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

ПРАВИЛА ПОДГОТОВКИ ДИЗАЙН-МАКЕТА К ВЕРСТКЕ

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

Регистрация и добавление нового макета

Чтобы начать пользоваться редактором, нужно зайти на https://www.figma.com/ и зарегистрироваться. Можно войти через Google или просто создать аккаунт на сайте.

Вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для знакомства с приложением. Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение .fig или .sketch . При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте.

После добавления макет появится в общем списке.

Структура макета и рабочие инструменты

Интерфейс в разделе работы с макетом состоит из нескольких блоков.

1. Боковая панель. Здесь показана вся структура проекта. Можно проследить вложенность элементов и найти нужный. Каждый тип элемента обозначен отдельной иконкой — текст, изображение, составной блок.
2. Основная рабочая область в центре — для непосредственного взаимодействия с макетом.
3. Основное меню в верхней части страницы. Большая часть инструментов в нём предназначены для дизайна, но вам точно пригодится меню масштабирования, расположенное справа.
4. Боковая панель справа включает три вкладки, но нам будут нужны только две из них — Design и Inspect, в которой расположены разделы Code и Local Styles. В этих вкладках находится вся доступная информация об элементе.

Работа с параметрами элементов

Основная задача верстальщика при работе с макетом — узнать параметры элементов и перенести их в вёрстку. Давайте разберём по пунктам, как это сделать в Figma.

Параметры текста

Чтобы узнать все текстовые параметры, нужно выделить элемент и открыть вкладку Inspect — Code в правой боковой панели. Там в списке свойств отобразятся все используемые параметры — название, размер, насыщенность и цвет шрифта, высота строки и остальные.

Изображение

Свойства width и height во вкладке Inspect — Code расскажут о размере изображения.

Также можно скачать любое изображение из макета. Для этого нужно кликнуть по вкладке Design и там найти последний пункт Export. Далее в выпадающем меню выбрать формат, в котором вы хотите экспортировать изображение — PNG, JPG, SVG или PDF.

Цвет элемента

В разделе Code вкладки Inspect можно узнать фоновый цвет элемента — значение background .

Размеры и расстояние между элементами

Размер определяется несколькими способами.

Например, во вкладке Code можно посмотреть значения свойств width и height . Или просто выделить нужный блок — размер отобразится внизу элемента. Также можно узнать расстояние между двумя любыми элементами. Для этого нужно выделить первый элемент, а затем наводить курсор на остальные — будет появляться направляющая и значение.

Figma — это удобный и простой инструмент для верстальщика, и мы предлагаем вам попробовать его в деле. Заходите в магазин макетов, выбирайте любой и практикуйтесь.

Пригодится верстальщику:

• Дизайн для верстальщиков
• Вёрстка для дизайнеров
• Топ-20 лучших плагинов для Figma в 2023

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Правила подготовки макетов в Figma

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

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

1. Используй сетку

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

Хорошая статья про сетки.

Когда сеткой начинают пользоваться и дизайнеры и разработчики — многие проблемы отпадают. Вот один из примеров такого подхода. При верстке макета больше не нужно мерить отступы между каждым элементом. Все они подчинены заранее заданным модулям.

Текстовые фреймы, иконки, менюхи, попапы, дропдауны, контролы вот это всё всё всё должно быть кратно модулям сетки. Или хотя бы стремиться к этому.

Вот что говорят ребята из отдела разработки по поводу сеток:

Конечно, когда в макетах появилась упорядоченность стало проще. Мы больше не меряем каждый отступ вручную.

2. Задавай текстовым блокам осознанные размеры

Вот два с виду одинаковых текстовых блока. Описание и цена. Но если посмотреть как они выглядят в макете — сразу видна разница.

Виталий, разработчик:

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

3. Следи за боковыми отступами

Разница должна быть чем-то обоснована, не должно получаться случайных значений.

Виталий, разработчик:

Если отступы в блоке одинаковы — свойство, задающее отступ в родительском блоке, имеет вид padding: 0, 24.

Во втором случае, чтобы понять закономерность отступов, придется коммуницировать с дизайнером и уточнять: что же там имелось ввиду в этом чертовом хаосе.

4. Используй Grow Vertically для текстовых блоков

Виталий, разработчик:

Хорошо когда размеры текстовых блоков по высоте изменяются автоматически. В таких блоках можно через свойства сразу получить корректную высоту. В отличии от правого примера, где высота блока 27 px, а по факту должна быть 70 px.

5. Соблюдай целые значения в пикселях

Расстояния между объектами должны быть выражены целыми значениями. Так же как и размеры самих объектов.

Внешне, макеты с дробными значениями не всегда отличимы от «нормальных», но стоит погрузиться в них… и начинаются проблемы. Часто дробные значения возникают, если взять группу объектов и масштабировать ее. Очень часто такие значения свидетельствуют о том, что дизайнер поторопился и не проверил этот момент.

Виталий, разработчик:

Вчера пришла в работу задача на верстку. Открываю макет в фигме, и что вижу… Отступы все дробные, кегель у шрифта — дробный, межстрочник — тоже дробный. Не, ну я, конечно, написал дизайнеру. Подождал ответа, подождал пока он разберется, откуда это всё взялось. В итоге только к вечеру смог приступить к этой задаче.

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

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

Или создание отдельных блоков в виде компонентов и их переиспользование. Главное, чтобы выбранный подход был логичным и понятным для тех, кто будет работать после или одновременно с тобой. Мы, как правило, используем компоненты в зависимости от сложности проекта.

Компонентам и их использованию посвящены отдельные статьи. С описанием работы constraints и сеток внутри компонентов.

7. Называй группы и фреймы осмысленно

Понятные названия помогут другим разобраться в твоем макете и не вспоминать тебя “теплыми” словами.

Виталий, разработчик:

Среди разработчиков есть культура написания имен переменных и функций. А вы, дизайнеры, чем лучше? Почему вы с легкостью отдаете макеты с неинформативными названиями? Подписывайте ясно и четко названия фреймов и компонентов.

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

Существует много мониторов с увеличенной плотностью пикселей. Что это означает для дизайнера?

При одинаковых физических размерах экранов на каждом из них помещается разное количество пикселей. И если подготовить растровое изображение для обычного монитора 1:1, то на ретине оно будет выглядеть размытым.

Виталий, разработчик:

Помню как в 2000-м году выходил в интернет через старый добрый US Robotics Courier на скорости 14 400 бит/с… Тогда графику делали 1в1, сайты верстали таблицами, не было ретин и прочих смартфонов. В общем жили не тужили. Сейчас CSS псевдо классы позволяют ребятам с ретиной и прочими hi-end дисплеями подгружать специально для них предназначенные растровые изображения. При этом не грузить их всем остальным.

От дизайна к фронтенду: как передать макет в разработку

Чтобы все изображения и кнопки были на своих местах, анимации корректно работали, а шрифты на макете совпадали со шрифтами в интерфейсе, разработчику нужно больше, чем доступ к проекту в 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.

Надеюсь, этот гайд поможет вам научиться передавать макеты в разработку быстро и без потерь, а также позволит сэкономить силы и время на доработках. А если вы хотите узнать, как ускорить процесс разработки в крупных проектах, читайте нашу статью про дизайн-систему от Ильи Лесова.

36 показов
14K открытий
5 репостов
51 комментарий
Написать комментарий.

Ох уж эти идеальные дизайнеры, которые где-то существуют )
Вообще интересно было бы про стандартизацию всех элементов )

Развернуть ветку

Достойно оплачивайте услуги и вы удивитесь, сколько толковых дизайнеров, разработчиков, строителей, сантехников.

Развернуть ветку
4 комментария

Добавлю пару советов:

— Разберитесь как работают средства лейаутинга в выбранной технологии. Как происходит компоновка, как отрабатывается ресайзинг визуально. Хорошие разработчики не откажут ни в экскурсе, ни в наброске мини прототипа на поиграться. Зато вы будете с разрабами в одних системах координат, и не будет вопроса, почему нельзя 13.58 пикселя тут и 45.42 пикселя здесь.

— Излишняя кастомизация — зло. Старайтесь стандартизировать размерности/отступы и прочие паддинги. Анимации должны быть переиспользованы либо действительно необходимы.

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

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