Как верстать по фигме

Верстка по макету из Figma — это точная реализация дизайна в коде: адаптивная, семантичная и доступная. Главное — правильно экспортировать данные, понимать структуру слоёв и использовать современные инструменты для сверки.

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

Анализ макета: с чего начать верстку

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

Обратите внимание на слои: правильно организованный макет имеет чёткую навигацию по названиям слоёв, например, `header/navigation`, `footer/social-links`. Если слои называются `Rectangle 1`, `Copy 3` — это сигнал о низкой подготовке макета. В таком случае стоит запросить у дизайнера пояснения или попросить привести проект в порядок.

Проверьте наличие Design System: есть ли глобальные стили цветов, текста, эффектов и сетки. Глобальные стили можно найти в панели правого сайдбара при выделении элемента. Использование shared styles экономит время и снижает количество ошибок при передаче значений.

Начинайте с главной страницы — чаще всего это desktop-версия. Определите основные контейнеры: ширина обёртки (часто 1200–1440px), отступы от краёв (обычно 80–120px), высота шапки и футера. Заметьте, используется ли сетка: 12-колоночная, flex или grid. Это поможет выбрать стратегию верстки.

Режим Developer в Figma: практическое руководство

Figma предлагает встроенный режим Developer, доступный в правой панели при активации веб-интерфейса. Чтобы перейти в него, выберите нужный фрейм или слой — автоматически откроется информация о стилях, отступах, размерах и цветах.

Здесь вы увидите:

• Точные значения margin и padding;
• Цвета в HEX, RGB, HSL и CSS-переменных (если используются);
• Шрифтовые параметры: font-family, font-weight, font-size, line-height, letter-spacing;
• Тени (box-shadow, drop-shadow);
• Градиенты и transform-эффекты.

Особенно полезна функция CSS Code — при нажатии кнопки «Copy as CSS» вы получаете готовый фрагмент стилей. Однако не стоит слепо вставлять этот код в проект: он часто содержит избыточные свойства или не учитывает vendor prefixes. Лучше использовать его как справочник.

Для удобства можно использовать плагины:

• Stark — проверка доступности цветов (WCAG);
• Content Reel — быстрая вставка реальных данных (имён, email, телефонов);
• Auto Layout to CSS — конвертация Auto Layout в CSS Flexbox/Grid.

Работая в Developer mode, помните: Figma считает расстояния между центрами объектов или до границ соседних. Убедитесь, что включена опция «Show distances between objects» — она показывает точные отступы по осям X и Y.

Экспорт ассетов и работа с изображениями

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

Чтобы экспортировать ассет, выделите нужный слой, откройте панель экспорта (внизу правой панели) и добавьте необходимые форматы. Рекомендуется экспортировать изображения в нескольких плотностях: 1x, 2x (для Retina). Например, если иконка 24×24px, экспортируйте как 24px (1x) и 48px (2x).

Для иконок лучше использовать SVG-спрайты или inline-вставку, чтобы контролировать цвет и размер через CSS. Избегайте использования PNG-иконок — они увеличивают нагрузку и теряют чёткость на HiDPI-экранах.

Типографика и раскладка: пиксель-перфект без потерь

Типографика — основа восприятия интерфейса. В Figma вы можете точно узнать все параметры текста: размер, межстрочный интервал, отслеживание. Однако здесь есть нюанс: Figma и браузеры по-разному рассчитывают высоту строки.

Например, в Figma line-height может быть указан как 28px, но в CSS, если задать `line-height: 28px`, результат будет отличаться из-за особенностей рендеринга шрифтов в движке браузера. Лучше использовать относительные единицы: `line-height: 1.4` вместо фиксированных пикселей.

Также обратите внимание на baseline-сетку. Многие дизайнеры выравнивают текст по базовой линии, но при верстке это сложно реализовать без дополнительных инструментов. Используйте CSS Grid или Flexbox с `align-items: center` или `flex-start`, в зависимости от задачи.

Отступы между абзацами и блоками должны соответствовать системе интервалов. Часто в дизайн-системах используется кратность 4 или 8 (например, 8px, 16px, 24px). Следование такой системе делает интерфейс визуально согласованным.

1. Определите базовый отступ (чаще всего 8px).
2. Используйте его как единицу измерения: 1x, 2x, 3x и т.д.
3. Применяйте к отступам, паддингам, марджинам и интерлиньяжу.
4. Создайте CSS-переменные для быстрой настройки: —gap-sm, —gap-md, —gap-lg.

Адаптивность и брейкпоинты: как определить и реализовать

Figma не всегда содержит макеты для всех устройств. Часто предоставляется только десктопная версия, а мобильная — ожидается от верстальщика. В таких случаях нужно самостоятельно определить брейкпоинты.

Стандартные точки:

• Mobile: до 767px;
• Tablet: 768–1023px;
• Desktop: от 1024px.

Но ориентируйтесь на содержимое, а не на стандарты. Если на ширине 980px блоки начинают перекрываться — значит, брейкпоинт должен быть раньше. Используйте медиа-запросы:

@media (max-width: 767px) { ... }
@media (min-width: 768px) and (max-width: 1023px) { ... }
@media (min-width: 1024px) { ... }

Для адаптивной сетки рекомендуются:

• CSS Grid — для сложных двумерных макетов;
• Flexbox — для одномерных компоновок (навигация, карточки);
• Container Queries — новая технология для компонентной адаптивности (поддержка растёт).

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

Типичные ошибки при верстке по Figma и как их избежать

Даже профессионалы допускают ошибки при работе с Figma. Вот самые распространённые:

1. Слепое доверие к автогенерируемому CSS

Figma предлагает копировать стили как CSS, но они могут содержать:

• Избыточные префиксы;
• Неподдерживаемые свойства;
• Неверные значения line-height.

Всегда адаптируйте код под целевую среду.

2. Игнорирование состояний интерактивных элементов

Кнопки, инпуты, меню имеют состояния: hover, focus, active, disabled. В Figma они могут быть скрыты во вложенных фреймах или не указаны вообще. Уточняйте у дизайнера все состояния до начала верстки.

3. Отсутствие проверки доступности

Контрастность цветов, размер шрифта, клавиатурная навигация — всё это влияет на UX. Проверяйте соотношение цветов с помощью Stark или WebAIM Contrast Checker. Минимальное соотношение для текста — 4.5:1.

4. Верстка без семантики

Использование div вместо header, main, article — частая ошибка. Это снижает SEO и доступность. Всегда применяйте семантические теги HTML5.

5. Несогласованность с дизайн-системой

Если в макете используется цвет `—primary-blue`, а вы в коде пишете `#1a73e8`, это нарушает системность. Подключайте те же переменные, что и в Figma, через CSS Custom Properties.

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

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

Заключение

Верстка по Figma — это не просто перевод пикселей в код, а процесс интерпретации дизайнерской идеи с учётом технических, функциональных и юзабилити-аспектов. Успешная реализация требует внимания к деталям, знания инструментов и умения работать в команде. Современные возможности Figma, такие как Developer Mode, Shared Styles и плагины, значительно упрощают эту задачу, но не заменяют экспертизы верстальщика.

• Всегда анализируйте макет перед началом верстки: структура, стили, компоненты.
• Используйте Developer Mode в Figma, но критически оценивайте генерируемые стили.
• Экспортируйте ассеты в правильных форматах и плотностях.
• Следите за системой отступов и типографикой — они создают визуальную гармонию.
• Не забывайте про адаптивность, доступность и семантику.