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

Разметка в Figma — это ключевой этап подготовки дизайна к передаче разработчикам. Она позволяет точно передать технические параметры макета: отступы, размеры элементов, цвета, шрифты и взаимное расположение компонентов. Правильно выполненная разметка ускоряет верстку, снижает количество ошибок и упрощает коммуникацию между дизайнерами и frontend-разработчиками. Без неё даже самый красивый дизайн может быть реализован с искажениями.

Что такое разметка в дизайне и зачем она нужна

Разметка в контексте UI/UX-дизайна — это набор технической информации, которая описывает структуру интерфейса. Она включает в себя расстояния между элементами (отступы), размеры блоков, типы шрифтов, цветовые коды, состояния кнопок и другие параметры, необходимые для точного воспроизведения макета в коде. Разметка не является частью визуального оформления, но играет роль «технического паспорта» проекта.
Для разработчиков разметка заменяет догадки. Вместо того чтобы самостоятельно измерять каждый пиксель, они могут просто открыть Figma, перейти во вкладку Inspect и получить все данные. Это особенно важно при работе над крупными проектами с множеством экранов и компонентов. Чем точнее разметка, тем меньше правок после первой верстки.
Для дизайнеров разметка — способ продемонстрировать профессионализм и внимание к деталям. Хорошо оформленный макет с понятной структурой повышает доверие команды и ускоряет согласование. Кроме того, разметка помогает самому дизайнеру выявить логические несоответствия: например, когда отступы в одном блоке 16px, а в другом — 18px без видимой причины.

Основные инструменты для разметки в Figma

Figma предлагает мощный набор встроенных инструментов, которые позволяют создавать разметку без сторонних программ. Главные из них — это режим Inspect, Auto Layout, Constraints и Comments. Каждый решает свою задачу, но вместе они формируют полную систему передачи данных.
Режим Inspect активируется при выборе любого слоя или группы. Он отображается в правой панели и показывает все свойства выбранного элемента: координаты X/Y, ширину, высоту, цвет заливки, обводку, тени, прозрачность, шрифты и интерлиньяж. Разработчики используют этот раздел для копирования CSS, iOS или Android-параметров. Данные обновляются в реальном времени при изменении макета.
Auto Layout — один из самых важных инструментов. Он позволяет задавать динамическое поведение элементов: отступы, выравнивание, направление (горизонтальное или вертикальное). При использовании Auto Layout Figma автоматически рассчитывает расстояния между компонентами, что делает разметку более предсказуемой. Например, если вы увеличите текст в кнопке, кнопка автоматически растянется, и разработчик увидит новые размеры.
Constraints определяют, как элемент ведёт себя при изменении размеров родительского фрейма. Они особенно важны для адаптивных интерфейсов. Например, вы можете указать, что логотип должен всегда оставаться в левом верхнем углу, а кнопка входа — в правом. Эти настройки видны в Inspect и помогают верстальщику понять логику позиционирования.

Как использовать Auto Layout для точной разметки

Auto Layout — это не просто удобство, а стандарт современного дизайна. Чтобы его применить, выделите группу элементов (например, кнопку с иконкой и текстом) и нажмите Ctrl+Shift+A (или найдите значок ≡ в правой панели). После этого вы сможете задать внутренние отступы (padding) и расстояние между дочерними элементами (gap).
Когда Auto Layout активирован, Figma начинает показывать расстояния между элементами в виде цифр. Эти цифры видны и в Inspect, и при наведении курсора. Это и есть основа разметки. Например, если у вас gap = 8px, значит, между всеми элементами в группе будет ровно 8 пикселей. Это гарантирует единообразие.

Как сделать разметку по шагам: пошаговая инструкция

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

1. Подготовьте макет: убедитесь, что все элементы правильно названы, сгруппированы и организованы по страницам. Удалите скрытые или неиспользуемые слои.
2. Примените Auto Layout ко всем компонентам: кнопкам, карточкам, навигации. Это обеспечит точные отступы и адаптивность.
3. Настройте Constraints для каждого элемента. Укажите, как он должен вести себя при изменении размеров экрана.
4. Проверьте Inspect для ключевых элементов. Убедитесь, что все параметры отображаются корректно: шрифты, цвета, тени.
5. Добавьте комментарии в спорных местах. Например, если есть особое поведение при наведении или адаптация под мобильные устройства.
6. Создайте отдельную страницу с гайдлайнами, где укажите типографику, цветовую палитру, размеры отступов (8px grid) и библиотеку компонентов.
7. Поделитесь ссылкой с правами на просмотр и убедитесь, что разработчик может открыть Inspect и скопировать нужные значения.

Пример: разметка карточки товара

Представьте, что вы проектируете карточку товара для интернет-магазина. Она включает изображение, название, цену, кнопку «В корзину» и рейтинг. Чтобы сделать разметку:

• Оберните всю карточку в фрейм 300×400px.
• Примените к карточке Auto Layout (вертикальное), с padding = 16px и gap = 12px.
• Для кнопки также используйте Auto Layout с внутренними отступами 12px по вертикали и 24px по горизонтали.
• Установите Constraints для изображения: «ширина — 100%, привязка к верху».
• В Inspect проверьте, что шрифт названия — Inter, 16px, жирность 600, цвет #111.
• Добавьте комментарий: «При клике кнопка меняет цвет на #005fcc и показывает иконку галочки».

Теперь разработчик может открыть Figma, выбрать любой элемент и получить все необходимые данные.

Совместимость с разработками и экспорт данных

Один из главных плюсов Figma — прямая интеграция с процессом разработки. Разметка не требует экспорта в PDF или PNG с нарисованными стрелками. Всё уже доступно онлайн. Однако важно понимать, как именно разработчики используют эти данные.
Figma позволяет копировать CSS, Swift, XML (Android) и SVG-код прямо из панели Inspect. Например, при выборе кнопки разработчик нажимает «Copy as CSS» и вставляет стили в проект. Это работает с цветами, шрифтами, тенями и рамками. Однако анимации и сложные эффекты нужно описывать отдельно.
Для эксперта важно помнить: не все свойства экспортируются идеально. Например, кастомные шрифты могут отображаться как system-ui, если не подключены через Figma Fonts. Также не передаются медиа-запросы — адаптивность описывается через Constraints и Auto Layout, но логика breakpoints остаётся на усмотрение верстальщика.

Как проверить, что разметка готова к передаче

Перед отправкой макета проведите финальную проверку:

• Откройте режим Inspect для 3–5 случайных элементов. Убедитесь, что все значения видны и соответствуют макету.
• Попробуйте скопировать CSS и вставить в текстовый редактор. Проверьте, нет ли пропущенных свойств.
• Убедитесь, что все цвета из палитры добавлены в Styles, а шрифты — в Text Styles.
• Проверьте, что комментарии не содержат двусмысленностей и описывают поведение, а не визуал.
• Откройте макет на мобильном устройстве через Figma Mirror — убедитесь, что всё отображается корректно.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при создании разметки. Они кажутся мелочами, но могут вызвать серьёзные проблемы на этапе разработки.
Первая ошибка — отсутствие единой сетки. Когда одни отступы 16px, другие — 18px, третьи — 20px, система теряет целостность. Решение: придерживайтесь 8px-сетки (или 4px для мелких интерфейсов). Все размеры должны быть кратны базовому шагу.
Вторая — ручная группировка вместо Auto Layout. Если вы просто группируете элементы, Figma не покажет расстояния между ними. Разработчик не увидит gap, и придётся измерять вручную. Используйте Auto Layout всегда, когда есть несколько элементов в строке или столбце.
Третья — неправильные Constraints. Например, центральный элемент привязан к левому краю, а не к центру. Это приведёт к смещению при адаптации. Правило: горизонтальные привязки — left, right, center; вертикальные — top, bottom, middle.
Четвёртая — отсутствие документации. Нет страницы с цветами, шрифтами, компонентами. Разработчик тратит время на поиск. Создайте отдельную страницу «Design System» и ссылайтесь на неё.

Чек-лист перед сдачей макета

• Все компоненты используют Auto Layout.
• Constraints настроены для всех ключевых элементов.
• Цвета и текстовые стили сохранены в библиотеке.
• Есть страница с гайдлайнами и примерами использования.
• Добавлены комментарии к неочевидным поведениям.
• Макет протестирован в разных разрешениях.

Плагины и автоматизация разметки

Figma поддерживает множество плагинов, которые упрощают создание разметки. Они не заменяют базовые инструменты, но значительно ускоряют рутинные задачи.
Один из самых популярных — Zeplin for Figma. Он синхронизирует макеты с платформой Zeplin, где разработчики получают дополнительные возможности: выгрузку стилей, сравнение версий, интеграцию с Jira. Хотя многие функции дублируются в Figma, Zeplin удобен для крупных команд.
Figma to Code — плагин, который генерирует React, Vue или HTML/CSS код на основе выбранных фреймов. Полезно для прототипирования и демонстрации. Код не идеален, но даёт хорошую отправную точку.
Auto Layout Spacing помогает быстро настраивать gap и padding для нескольких групп одновременно. Особенно актуален при рефакторинге старых макетов без Auto Layout.

Когда использовать плагины, а когда — встроенные инструменты?

Плагины стоит применять, если:

• Вы работаете в большой команде с десятками дизайнеров и разработчиков.
• Требуется интеграция с внешними системами (Jira, Notion, GitHub).
• Нужно массовое преобразование (например, добавить Auto Layout ко всем кнопкам).

Во всех остальных случаях достаточно встроенных возможностей Figma. Не усложняйте процесс ради модных инструментов.

Экспертное мнение

Современный дизайн — это не только про красоту, но и про эффективность передачи информации. Хороший дизайнер должен мыслить как разработчик, понимать, как его макет будет реализован в коде.
Разметка — это мост между двумя мирами. Она снижает трение в команде, ускоряет итерации и повышает качество продукта. По данным исследования InVision, проекты с чёткой разметкой выходят на рынок в среднем на 27% быстрее.
Ключевой принцип: делайте разметку частью рабочего процесса, а не финальным штрихом. Применяйте Auto Layout с первого дня, используйте компоненты и систематизируйте стили. Это сэкономит часы работы в будущем.
Также важно учитывать контекст. Для MVP может быть достаточно базовой разметки, а для масштабируемого продукта — нужна полная система с документацией, плагинами и регулярными ревью.

Вопросы и ответы

Заключение

Разметка в Figma — это не опциональный этап, а обязательная часть профессионального дизайна. Она обеспечивает точность, скорость и ясность в коммуникации между дизайнерами и разработчиками. Современные инструменты, такие как Auto Layout, Inspect и Constraints, позволяют создавать подробную техническую документацию без лишних усилий.
Главное — внедрить разметку в повседневную практику. Не оставляйте её напоследок. Используйте компоненты, соблюдайте сетку, добавляйте пояснения и регулярно проверяйте, как макет выглядит со стороны разработчика.

• Всегда используйте Auto Layout для компонентов и групп.
• Настройте Constraints, чтобы задать поведение элементов.
• Добавляйте комментарии и создавайте страницу с гайдлайнами.
• Проверяйте разметку через режим Inspect перед сдачей.
• Используйте плагины осознанно — только при реальной необходимости.