Как верстать с figma

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

Как использовать Dev Mode в Figma

Figma предлагает встроенный режим для разработчиков — Dev Mode. Он позволяет быстро получать доступ к техническим данным каждого элемента: размерам, отступам, цветам, теням, бордерам, типографике и другим CSS-свойствам. Чтобы активировать его, достаточно нажать правой кнопкой мыши на нужный объект и выбрать «Show in Developer Mode» или просто переключиться во вкладку «Design / Dev» в правой панели.

В Dev Mode вы увидите все необходимые параметры в удобном формате. Например, при наведении на текстовый блок отобразятся font-family, font-size, line-height, letter-spacing и color. Для кнопки или контейнера можно посмотреть padding, border-radius, box-shadow и background. Это значительно ускоряет процесс сверки и снижает количество ошибок.

Особенно полезна функция измерения расстояний между элементами. Достаточно зажать Shift и провести курсором между двумя объектами — Figma покажет точное расстояние по горизонтали или вертикали. Это критически важно при верстке плотных интерфейсов, где каждый пиксель имеет значение.

Также стоит использовать плагины, такие как CSS Prettier, Tokens Studio или Stylify, которые преобразуют свойства из Figma в готовый CSS-код. Некоторые из них поддерживают темы, переменные и даже генерацию SCSS или Tailwind-классов. Это особенно актуально в проектах с дизайн-системами.

Шаги для работы в Dev Mode

1. Откройте макет в Figma и перейдите во вкладку «Dev» справа.
2. Выберите нужный слой или компонент с помощью инструмента выбора.
3. Проверьте все CSS-свойства: размеры, цвета, тени, радиусы скругления.
4. Измерьте расстояния до соседних элементов с помощью Shift + клик и протягивание.
5. Экспортируйте растровые ассеты в нужных размерах (1x, 2x, 3x).
6. Используйте плагины для автоматической генерации стилей.

Извлечение стилей: цвета, шрифты, отступы

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

Цвета в Figma лучше всего хранить в виде Color Styles. Они позволяют задать единые названия (например, «Primary Blue», «Error Red») и применять их к любым элементам. При верстке эти стили можно экспортировать в CSS-переменные:

Шрифты также должны быть унифицированы через Text Styles. Убедитесь, что указаны не только font-size и font-weight, но и line-height, letter-spacing и font-family. Современные браузеры чувствительны к малейшим расхождениям в высоте строки, поэтому важно использовать те же значения, что и в макете.

Отступы и интервалы — ещё одна частая причина расхождений. Хорошая практика — использование spacing tokens: 4px, 8px, 12px, 16px, 24px, 32px и т.д. Такие значения легко преобразовать в CSS-переменные или классы утилитарной системы (например, Tailwind).

Если в макете используются иконки, уточните у дизайнера формат: SVG, Icon Font или спрайт. SVG предпочтительнее — они масштабируются без потерь и легко стилизуются через CSS.

Верстка макетов: сетки, фреймы и слои

Figma строится на принципах фреймов (frames), аналогичных flex-контейнерам или grid-обёрткам в CSS. Понимание структуры фреймов помогает быстрее воссоздать макет в HTML. Каждый фрейм может иметь направление (horizontal/vertical), выравнивание и распределение отступов — всё это напрямую соответствует Flexbox.

Например, если в Figma есть фрейм с Auto Layout по вертикали и gap = 16px, его логично сверстать как:

.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

Для сеточных макетов (например, карточки товаров) используйте CSS Grid. Figma поддерживает layout grids, которые можно включить для любого фрейма. Они помогают визуализировать колонки, отступы и брейкройнты.

При анализе слоёв обращайте внимание на порядок: в Figma верхние слои отображаются выше, а в DOM — то же самое. Однако z-index в CSS может отличаться, особенно если используются position: relative/absolute. Проверяйте, не перекрывают ли элементы друг друга.

Компоненты и экземпляры (instances) в Figma — это аналог React-компонентов или миксинов. Если вы видите повторяющиеся кнопки, карточки или навигацию, верстайте их как переиспользуемые блоки с модификаторами (BEM) или компоненты в фреймворке.

Пример анализа фрейма

• Фрейм «Header»: Auto Layout, horizontal, gap=24px, padding=16px.
• Дочерние элементы: логотип, навигация, кнопка входа.
• Выравнивание: space between (justify-content: space-between).
• Вывод: использовать flexbox с justify-content: space-between и gap: 24px.

Адаптивная верстка по Figma: best practices

Многие дизайнеры предоставляют макеты только для одного разрешения, но современная верстка требует поддержки множества устройств. Хороший подход — наличие нескольких фреймов под разные брейкройнты: mobile (375px), tablet (768px), desktop (1440px). Figma позволяет организовать их в одном файле с помощью страниц и вариантов компонентов.

Перед началом верстки определите точки перехода (breakpoints). Стандартные значения:

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

На каждом брейкройнте проверяйте:

• Изменение структуры (например, вертикальное меню на мобильном).
• Размеры шрифтов и отступов (часто уменьшаются на мобильных).
• Скрытие или замена элементов (иконки вместо текста, гамбургер-меню).

Используйте медиа-запросы и relative units (rem, em, %, vw/vh). Избегайте фиксированных ширин, если только это не обусловлено дизайном (например, логотип).

Также полезно использовать современные методы:

• Container Queries — для компонентов, реагирующих на ширину контейнера.
• Clamp() — для создания fluid typography и spacing.
• Aspect Ratio — чтобы сохранить пропорции карточек и изображений.

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

Даже опытные верстальщики допускают ошибки при работе с Figma. Ниже — самые частые проблемы и способы их устранения.

Ошибка 1: Расхождение в высоте строк

Дизайн: line-height = 24px; Верстка: line-height = 1.5 при font-size = 16px → 24px, но результат отличается.

Причина: в Figma line-height может быть «auto» или «from font». Уточняйте у дизайнера, как рассчитано значение.

Решение: используйте абсолютные значения в пикселях, если требуется точное соответствие.

Ошибка 2: Размытые изображения и иконки

Элементы выглядят нечётко на экране.

Причина: позиционирование по дробным координатам (например, left: 10.3px).

Решение: включите snapping в Figma и используйте transform: translateZ(0) или backface-visibility для принудительного GPU-рендеринга.

Ошибка 3: Несоответствие цветов

Цвет в браузере отличается от Figma.

Причина: разница в цветовых профилях (sRGB vs. P3).

Решение: работайте в sRGB, отключите HDR, используйте стандартные мониторы для сверки.

Ошибка 4: Проблемы с Auto Layout и overflow

Текст выходит за границы блока или фрейм не растягивается.

Причина: в Figma Auto Layout может быть ограничен по высоте.

Решение: проверяйте свойства «Fixed Size» и «Fill Container». В CSS используйте min-height и overflow-wrap.

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

По словам эксперта, идеальный workflow включает:

• Регулярные встречи «handoff» между дизайнером и разработчиком.
• Использование shared libraries и design tokens.
• Автоматическую синхронизацию стилей через Figmagic или Style Dictionary.

Также Дмитрий рекомендует внедрять инструменты вроде Chromatic для визуального тестирования: они сравнивают сверстанный интерфейс с макетом и находят расхождения на уровне пикселей.

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

Заключение

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

• Всегда используйте Dev Mode для получения точных значений.
• Стандартизируйте цвета, шрифты и отступы через переменные.
• Учитывайте адаптивность и все брейкройнты.
• Проверяйте line-height, цветовые профили и рендеринг на разных устройствах.
• Поддерживайте связь с дизайнером — это ключ к качественному handoff.