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

Верстка сайта по макету из Figma — это процесс преобразования дизайнерского прототипа в рабочий, интерактивный и адаптивный веб-интерфейс с использованием HTML, CSS и JavaScript. Ключевая задача — точно передать визуальные элементы, анимации, отступы и поведение компонентов, не теряя при этом производительность и доступность.

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

Подготовка к верстке: что нужно получить от дизайнера

Перед началом верстки важно убедиться, что макет в Figma подготовлен корректно. Некоторые дизайнеры оставляют «сырые» файлы, где нет четкой структуры, названий слоев или брейкпоинтов. Это увеличивает время на согласование и приводит к ошибкам.
Убедитесь, что у вас есть доступ к полному Figma-файлу, а не только к скриншотам. В идеале проект должен быть организован в виде фреймов (frames) с понятными названиями: Desktop, Tablet, Mobile. Каждый экран должен соответствовать определенному состоянию страницы — главная, каталог, форма обратной связи и т.д.
Проверьте наличие следующих элементов:

• Цветовая палитра, вынесенная в стиль (color styles).
• Шрифтовые стили (text styles) для заголовков, основного текста, кнопок.
• Гайды и сетка (layout grid), указывающие отступы и колонки.
• Прототип с переходами между экранами (для понимания логики интерфейса).
• Ассеты: иконки, логотипы, иллюстрации, которые нужно экспортировать.

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

Проверка макета на полноту

Перед тем как начать верстать, пройдитесь по каждому экрану и проверьте:

• Все ли состояния интерактивных элементов учтены (например, hover, active, disabled)?
• Есть ли макеты для всех брейкпоинтов (1920px, 1024px, 768px, 375px)?
• Указаны ли отступы между блоками (внутренние и внешние)?
• Определены ли Z-индексы для слоев (например, модальные окна, подсказки)?

Если дизайнер не предусмотрел какие-то состояния, предложите стандартные решения — например, использовать серую рамку для disabled-кнопки или затемнение фона для модального окна.

Инструменты для точной передачи данных из Figma в код

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

• Выделите любой элемент — справа откроется панель с его свойствами.
• Нажмите на значение цвета, чтобы скопировать HEX, RGB или HSL.
• Используйте инструмент «Inspect», чтобы увидеть расстояние до соседних объектов (offset).
• Щелкните правой кнопкой по тексту, чтобы получить font-family, font-size, line-height, letter-spacing.

Современные плагины значительно упрощают процесс:

• WhatFont — определяет шрифт на макете, если он не указан явно.
• Autoresize — помогает проверить, как элементы ведут себя при изменении размера.
• CSS Peeper — экспортирует CSS-стили прямо из Figma.
• Tokens Studio — синхронизирует дизайн-токены (цвета, отступы, радиусы) между Figma и кодом.

Как копировать стили правильно

Figma показывает line-height в пикселях, но в CSS часто удобнее использовать единицы без измерения (unitless). Например, если в Figma указан line-height = 24px при font-size = 16px, в CSS лучше записать как 1.5.
Также обратите внимание на:

• Letter-spacing — в Figma может быть в пикселях, а в CSS — в em или px.
• Box-shadow — копируйте строку целиком, но проверьте, поддерживается ли она в целевых браузерах.
• Border-radius — если используется несколько значений (например, 8/4), это означает эллипс; в CSS придется прописывать border-radius: 8px / 4px.

Как верстать: структура, сетка и адаптивность

После сбора данных можно переходить к верстке. Начните с создания базовой HTML-структуры. Используйте семантические теги: <header>, <main>, <section>, <article>, <footer>. Это улучшит SEO и доступность.
Сетка — один из ключевых аспектов. Если в Figma используется 12-колоночная сетка с отступами 24px, воспроизведите её с помощью CSS Grid или Flexbox. Например:

.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
padding: 0 24px;
}

Для адаптивности задайте брейкпоинты на основе макетов. Обычно используют:

• Desktop: 1200–1920px
• Tablet: 768–1024px
• Mobile: 320–480px

Применяйте медиа-запросы, чтобы менять сетку и размеры элементов:

@media (max-width: 1024px) {
.container { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 768px) {
.container { grid-template-columns: 1fr; }
}


Пиксель-перфект: как добиться точного соответствия

Чтобы сверить верстку с макетом, используйте режим наложения (overlay) в Figma. Активируйте его в Dev Mode — картинка макета накладывается поверх сайта с 50% прозрачностью.
Проверяйте:

• Соответствие отступов (padding/margin).
• Выравнивание текста и иконок.
• Размеры кнопок и полей ввода.
• Высоту строк и межбуквенных интервалов.

Если есть расхождения — не меняйте макет, а анализируйте причину: возможно, шрифт не загрузился, или сработал user-agent стиль. Сбросьте CSS с помощью normalize.css или reset.css.

Работа со шрифтами и текстом

Шрифты — важнейший элемент дизайна. Если в Figma используется Google Fonts (например, Inter, Roboto), подключите их через <link> в head или @import в CSS.
Для кастомных шрифтов (WOFF, WOFF2) используйте @font-face:

@font-face {
font-family: 'CustomFont';
src: url('fonts/custom.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}

Обратите внимание на font-display: swap — это обеспечит отображение текста даже до загрузки шрифта, предотвращая FOIT (Flash of Invisible Text).
Создайте CSS-классы для текстовых стилей:

.text-h1 { font-size: 32px; line-height: 1.2; font-weight: 700; }
.text-body { font-size: 16px; line-height: 1.5; color: #333; }


Компоненты и повторяющиеся элементы

Figma позволяет создавать компоненты (Components) — переиспользуемые блоки, такие как кнопки, карточки, навигация. Эти же принципы применяйте в верстке: создавайте переиспользуемые CSS-классы и, при использовании фреймворков, React/Vue-компоненты.
Например, кнопка с разными состояниями:

.button { padding: 12px 24px; border-radius: 8px; }
.button--primary { background: #0066cc; color: white; }
.button--secondary { background: #f0f0f0; color: #333; }
.button:hover { opacity: 0.9; }

Если в проекте много однотипных карточек, используйте миксины (в Sass) или CSS-классы с модификаторами по БЭМ.

Работа с состояниями

Убедитесь, что все интерактивные состояния реализованы:

• :hover — при наведении
• :focus — для доступности (через Tab)
• :active — при клике
• :disabled — для неактивных элементов

Не забывайте про touch-устройства — используйте @media (hover: none) для оптимизации.

Экспорт ресурсов: иконки, изображения, SVG

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

1. Выделите слой или фрейм.
2. В правой панели найдите раздел «Export».
3. Выберите формат (SVG, PNG @1x, @2x) и нажмите «Export».

Для retina-экранов экспортируйте изображения в @2x и @3x. В HTML указывайте через srcset:



SVG можно встраивать напрямую в HTML для управления через CSS/JS:



Тестирование и сверка с макетом

После завершения верстки проведите тщательное тестирование:

• Откройте сайт в разных браузерах (Chrome, Firefox, Safari, Edge).
• Проверьте адаптивность на реальных устройствах или через DevTools.
• Используйте Figma Overlay для пиксель-перфекта.
• Протестируйте доступность: контраст текста, клавиатурная навигация, ARIA-атрибуты.

Автоматизируйте проверку с помощью инструментов:

• Lighthouse — для аудита производительности, доступности, SEO.
• Pa11y — для тестирования доступности.
• Chromatic — для визуального тестирования компонентов.

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

• Соответствие макету по всем брейкпоинтам ✅
• Корректная работа анимаций и hover-эффектов ✅
• Подключены правильные шрифты и fallback-шрифты ✅
• Изображения оптимизированы и имеют alt-атрибуты ✅
• Код валиден (HTML, CSS) и соответствует стайлгайду ✅

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

По его словам, важно мыслить системно: использовать дизайн-токены, создавать компоненты, а не просто копировать пиксели. «Когда вы верстаете, вы не просто переводите макет в код — вы строите цифровую среду. И она должна быть живой, масштабируемой и удобной.»

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

Заключение

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

• Всегда проверяйте макет на полноту перед началом верстки.
• Используйте Dev Mode в Figma для получения точных значений.
• Применяйте семантическую разметку и адаптивные единицы измерения.
• Экспортируйте ресурсы в правильных форматах (SVG для иконок).
• Тестируйте верстку в разных условиях и браузерах.