Как перенести дизайн из figma в html

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

Подготовка макета в Figma

Для успешного переноса дизайна в код важно, чтобы макет был структурирован правильно. Часто разработчики получают «лес» из неподписанных слоёв, что значительно замедляет работу. Хороший макет должен быть понятным, логичным и готовым к передаче в разработку.
Начните с проверки именования слоёв. Каждый блок — шапка, карточка, футер — должен иметь осмысленное название. Это помогает быстро находить нужные элементы и понимать их назначение. Используйте слэши для группировки, например: `header / logo`, `card / title`.
Компоненты и экземпляры — один из самых мощных инструментов Figma. Они позволяют создавать переиспользуемые элементы (например, кнопки, карточки) и обновлять их сразу во всём проекте. Если кнопка «Купить» используется 20 раз, достаточно изменить её в одном месте, и все экземпляры обновятся автоматически.

Авто-расположение (Auto Layout) — обязательный инструмент современного дизайнера. Он позволяет задавать внутренние отступы, расстояния между элементами и направление потока. Когда вы используете Auto Layout, Figma корректно отображает margin и padding в режиме разработчика, что критично для точной верстки.
Также рекомендуется использовать сетки: 8px-грид, колонковую разметку, отступы по 16 или 24 пикселя. Это не только улучшает читаемость макета, но и делает его более предсказуемым при реализации в CSS.

Чек-лист подготовки макета

• Именование всех слоёв и групп
• Создание компонентов для повторяющихся элементов
• Настройка Auto Layout для контейнеров
• Определение типографской шкалы и цветовой палитры
• Добавление аннотаций для сложных взаимодействий
• Проверка адаптивных брейкпоинтов (mobile, tablet, desktop)

Работа с Figma Dev Mode

Figma Dev Mode — это специальный интерфейс для разработчиков, доступный в правой панели редактора. Он показывает технические параметры выбранных элементов: размеры, отступы, цвета, шрифты, тени, границы и даже CSS-код.
Чтобы активировать Dev Mode, выберите любой слой и перейдите во вкладку «Design», затем нажмите «Code». Здесь вы увидите информацию в формате CSS, iOS, Android или Web. Для верстки подходит веб-формат.
Dev Mode автоматически рассчитывает расстояния до ближайших соседей. Например, если вы кликните по заголовку, Figma покажет, насколько он отстоит от верхнего и нижнего элементов. Это экономит время на измерении вручную.

Однако важно помнить: Figma показывает значения в пикселях, а в вёрстке часто используются относительные единицы — rem, em, %, vh/vw. Вам нужно будет перевести px в rem, исходя из базового размера шрифта (обычно 16px = 1rem).
Также стоит обратить внимание на экспорт ресурсов. Изображения, иконки и SVG можно экспортировать напрямую из Figma. Рекомендуется:

• Экспортировать в PNG 1x и 2x для ретина-экранов
• Использовать SVG для иконок и логотипов
• Оптимизировать файлы перед загрузкой на сервер

Как получить CSS-свойства из Figma

1. Выберите нужный элемент в макете
2. Перейдите во вкладку «Code» в правой панели
3. Выберите формат «CSS»
4. Скопируйте нужные свойства: font-size, line-height, color, box-shadow
5. При необходимости скорректируйте единицы измерения (px → rem)

Верстка по Figma: практические шаги

Теперь, когда макет подготовлен, а данные извлечены, можно приступать к верстке. Процесс можно разделить на несколько этапов: анализ структуры, создание HTML-разметки, подключение стилей и тестирование.
Начните с анализа общей структуры страницы. Определите основные блоки: header, main, footer, aside. Обратите внимание на порядок элементов — он должен соответствовать семантике и доступности. Используйте теги <header>, <nav>, <section>, <article>, <footer>.
Представьте, что вы строите дом: сначала фундамент (HTML), потом стены и крыша (CSS). Верстка должна быть семантически правильной, даже если она пока выглядит «голой». Это улучшает SEO и доступность.

Пошаговый алгоритм верстки

1. Создайте HTML-файл с базовой структурой и подключите CSS
2. Разбейте макет на логические блоки
3. Начните верстку сверху вниз: шапка → контент → подвал
4. Для каждого блока создайте контейнер с классом, например: .header, .hero-section
5. Добавьте внутренние элементы: текст, кнопки, изображения
6. Примените стили через CSS, сверяясь с данными из Figma
7. Проверьте отступы, выравнивание и шрифты
8. Сделайте адаптивную версию для мобильных устройств

Используйте методологии BEM (Block__Element–Modifier) для именования классов. Это делает код понятным и масштабируемым. Например: `.card`, `.card__title`, `.card__button`, `.card—featured`.

CSS-свойства следует применять по принципу прогрессивного улучшения. Начните с базовых: display, flex, grid, margin, padding. Затем добавьте типографику, цвета, тени. Не забывайте про hover-эффекты и состояния фокуса — они важны для UX.

Адаптивность и кросс-браузерность

Адаптивная верстка — не опция, а обязательное требование. Пользователи заходят на сайты с разных устройств: смартфонов, планшетов, ноутбуков. Ваш сайт должен корректно отображаться на всех экранах.
Figma позволяет создавать макеты под разные разрешения. Обычно используют три брейкпоинта: 320–480px (mobile), 768px (tablet), 1024–1440px (desktop). Убедитесь, что дизайнер предоставил все три версии.
В CSS адаптивность реализуется через медиа-запросы. Пример:

/* Mobile styles */
.hero {
 padding: 1rem;
}
/* Tablet and up */
@media (min-width: 768px) {
 .hero {
 padding: 2rem;
 }
}
/* Desktop */
@media (min-width: 1024px) {
 .hero {
 padding: 3rem;
 }
}

Используйте относительные единицы: rem для шрифтов и отступов, % и vw/vh для ширины. Это делает макет гибким и отзывчивым.

Кросс-браузерность — ещё один важный аспект. Убедитесь, что ваш сайт работает в Chrome, Firefox, Safari и Edge. Некоторые CSS-свойства (например, grid-gap, backdrop-filter) могут требовать префиксов или полифиллов.
Таблица совместимости поможет избежать проблем:

Ошибки и как их избежать

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

• Игнорирование Auto Layout: если в Figma используется Auto Layout, но верстальщик этого не видит, он может неверно рассчитать отступы. Всегда проверяйте, включён ли Auto Layout у контейнера.
• Жёсткая привязка к пикселям: использование width: 320px вместо width: 100% ломает адаптивность. Думайте в процентах и относительных единицах.
• Несемантичная разметка: злоупотребление div’ами без использования семантических тегов. Это вредит SEO и доступности.
• Отсутствие проверки на мобильных устройствах: верстка может выглядеть идеально на десктопе, но сломаться на iPhone. Тестируйте на реальных устройствах или эмуляторах.
• Неправильная работа со шрифтами: Figma показывает font-weight 500, но в CSS нет такого веса у шрифта Inter. Всегда проверяйте, загружены ли все нужные начертания.

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

Екатерина Волкова, ведущий UX/UI-дизайнер в продуктовой команде FinTech-стартапа, делится своим опытом:

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

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

Заключение

Перенос дизайна из Figma в HTML — это не просто техническая задача, а процесс взаимодействия между дизайном и разработкой. Успешная реализация зависит от подготовки макета, точности измерений и соблюдения лучших практик верстки.

• Подготавливайте макет: именуйте слои, используйте компоненты и Auto Layout
• Извлекайте данные через Figma Dev Mode: цвета, шрифты, отступы
• Верстайте по методологии BEM, используя семантические теги
• Делайте адаптивную верстку по принципу mobile-first
• Тестируйте на разных устройствах и браузерах