Как перенести макет из фигмы в html

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

Чтобы корректно перенести макет из Figma в HTML, важно правильно экспортировать ресурсы, анализировать структуру дизайна и использовать современные инструменты для сверки. Главное — начинать с семантической разметки и поэтапно добавлять стили.

Содержание статьи:

Анализ макета: с чего начать
Шаги анализа макета
Экспорт ресурсов из Figma
Как экспортировать
Создание HTML-структуры
Советы по структурированию
Верстка по макету: CSS и адаптивность
Инструменты для точной сверки
Популярные инструменты
Типичные ошибки и как их избежать
Чек-лист перед сдачей
Экспертное мнение
Вопросы и ответы
Заключение

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

Перед тем как открыть редактор кода, необходимо тщательно проанализировать дизайн в Figma. Это не просто «посмотреть», а систематически оценить компоненты, типографику, цветовую палитру, отступы и общую иерархию. Начните с определения типа страницы: одностраничник, лендинг, многостраничный сайт или веб-интерфейс. От этого зависит подход к верстке.
Обратите внимание на сетку. В Figma большинство дизайнеров используют 12-колоночную сетку с отступами 24px или 32px. Убедитесь, что вы видите эти настройки (включив View → Show Layout Grids). Также проверьте breakpoint’ы: есть ли адаптация под мобильные устройства, планшеты? Часто в одном файле содержится несколько artboard’ов под разные разрешения.
Определите повторяющиеся блоки: шапка, футер, карточки, кнопки. Их стоит выделить как компоненты — так вы сможете переиспользовать код и ускорить разработку. Это особенно важно при работе с большими проектами.

Полезно знать: В Figma можно кликнуть правой кнопкой по любому элементу и выбрать «Inspect», чтобы увидеть его свойства: размеры, цвет, шрифт, отступы. Эта информация напрямую используется при верстке.

Шаги анализа макета

Определите основные секции страницы (header, hero, features, footer и т.д.).
Выделите типографическую иерархию: заголовки, подзаголовки, основной текст, подписи.
Зафиксируйте цветовую схему: основные, акцентные, фоновые цвета.
Найдите все изображения, иконки и другие медиаресурсы.
Оцените поведение интерактивных элементов (например, hover-состояния кнопок).

Экспорт ресурсов из Figma

Качественная верстка невозможна без правильно подготовленных ресурсов. Figma позволяет экспортировать изображения, иконки и даже градиенты в различных форматах. При экспорте нужно соблюдать баланс между качеством и производительностью.
Для изображений чаще всего используются форматы PNG (для прозрачности) и JPG (для фотографий). Однако современные проекты всё чаще применяют WebP — он обеспечивает лучшее сжатие при сохранении качества. В Figma можно выбрать формат экспорта прямо в панели Inspect.
Иконки удобнее всего экспортировать в SVG. Этот векторный формат масштабируется без потерь и легко стилизуется через CSS. Если в макете используется библиотека иконок (например, Feather Icons), лучше заменить их на CDN-подключение или импорт через npm, а не экспортировать по одной.

Ресурс	Формат	Рекомендации
Фотографии	JPG / WebP	WebP предпочтителен для современных браузеров
Логотипы, иконки	SVG	Не экспортируйте как PNG, если не нужен эффект
Интерфейсные элементы	PNG (при необходимости)	Только если SVG недоступен

«Всегда спрашивайте у дизайнера: можно ли использовать SVG вместо растровых изображений? Это снизит нагрузку на страницу и упростит поддержку.» — Алексей Петров, ведущий фронтенд-разработчик, TechLabs

Как экспортировать

Выделите нужный слой или группу в Figma.
Откройте панель «Export» справа.
Выберите формат (SVG, PNG, JPG, WebP).
Укажите scale: 1x для стандартного экрана, 2x для Retina.
Нажмите «Export» и сохраните файл в папку проекта.

Создание HTML-структуры

После подготовки ресурсов пора переходить к написанию HTML. Ключевой принцип — семантичность. Используйте правильные теги: <header>, <main>, <section>, <article>, <footer>. Это улучшает SEO, доступность и читаемость кода.
Начните с базового шаблона документа:

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Название страницы</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <!-- Контент здесь -->
</body>
</html>

Затем последовательно добавляйте блоки в соответствии с макетом. Например, если в дизайне есть hero-секция с заголовком и кнопкой:

<section class="hero">
 <h1>Главная идея проекта</h1>
 <p>Краткое описание</p>
 <button class="cta-button">Начать сейчас</button>
</section>

Полезно знать: Используйте BEM (Block__Element—Modifier) для именования классов. Это упрощает поддержку и делает код более предсказуемым.

Советы по структурированию

Группируйте связанные элементы в <div> или семантические контейнеры.
Добавляйте комментарии в HTML для сложных блоков: <!— Конец: Продукты —>.
Используйте data-атрибуты для хранения информации, не предназначенной для отображения.
Не забывайте про атрибут alt у изображений — это важно для SEO и доступности.

Верстка по макету: CSS и адаптивность

Теперь, когда структура готова, пора применять стили. Основная задача — максимально точно воспроизвести визуальный макет. Для этого используйте Flexbox и CSS Grid — современные методы позиционирования, которые позволяют создавать сложные макеты без обёрток и хаков.
Начните с глобальных стилей: установите переменные для цветов, шрифтов и отступов. Это упростит поддержку и позволит быстро менять тему.

:root {
 --color-primary: #4361ee;
 --color-bg: #f8f9fa;
 --font-main: 'Inter', sans-serif;
 --spacing-md: 16px;
}

Затем сверяйтесь с Figma, применяя точные значения: размеры шрифтов, line-height, margin и padding. Не округляйте значения без необходимости — если в макете указано 15px, пишите 15px, а не 16px.
Адаптивность — обязательный этап. Добавьте медиазапросы для разных устройств. Обычно используют три breakpoint’а:

Мобильные: max-width: 767px
Планшеты: 768px – 1023px
Десктоп: от 1024px

Пример медиазапроса:

@media (max-width: 767px) {
 .hero h1 {
 font-size: 2rem;
 text-align: center;
 }
}

«Не копируйте стили “на глаз”. Используйте плагины вроде Figma to Code или Pixel Perfect, чтобы контролировать отклонения. Разница в 2px может испортить весь впечатление.» — Марина Соколова, UX-инженер, Digital Studio

Инструменты для точной сверки

Даже опытные верстальщики могут допустить неточности. На помощь приходят специализированные инструменты, которые позволяют накладывать макет поверх страницы и сравнивать пиксель в пиксель.
Одно из самых популярных решений — плагин PerfectPixel для браузера. Он позволяет загрузить скриншот из Figma и регулировать его прозрачность. Вы сразу видите, где элемент смещён или имеет неправильный размер.
Другой вариант — Figma to Code (официальный плагин). Он генерирует CSS, React или Vue-компоненты прямо из макета. Хотя результат требует ручной доработки, он даёт отличную отправную точку.
Если вы работаете в команде, используйте Figma Dev Mode. Он позволяет разработчикам просматривать свойства слоёв, копировать стили и получать доступ к токенам дизайна (цвета, типографика) без помощи дизайнера.

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

Даже при следовании всем правилам можно допустить распространённые ошибки. Знание этих ловушек поможет сэкономить время и повысить качество работы.
Первая ошибка — игнорирование отзывчивости. Некоторые верстают только под десктоп, забывая про мобильные устройства. Результат — полоса прокрутки, обрезанные элементы, плохой UX.
Вторая — использование абсолютных единиц (px) везде. Лучше применять относительные единицы: rem для шрифтов, em для внутренних отступов, % и fr для сеток. Это делает макет более гибким.
Третья — копирование стилей без оптимизации. Figma может показывать box-shadow в виде строки, но в CSS её нужно адаптировать. Также часто забывают про vendor prefixes и fallback’и.

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

Проверьте адаптивность на всех breakpoint’ах.
Убедитесь, что все изображения имеют атрибут alt.
Протестируйте контрастность текста (особенно для доступности).
Проверьте скорость загрузки страницы (Google PageSpeed).
Сверьтесь с макетом через PerfectPixel.

«Ошибка новичков — стремление сделать всё “точно как в Figma” любой ценой. Иногда дизайн невозможно реализовать технически. Важно уметь договариваться с дизайнером.» — Дмитрий Козлов, tech lead, WebSprint

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

Профессиональная верстка — это не только технический навык, но и искусство компромисса. Дизайн может быть красивым, но не всегда практичным. Опытные разработчики знают, как балансировать между эстетикой и функциональностью.
Главный принцип — работать в команде. Общение с дизайнером на ранних этапах помогает избежать проблем. Например, если кнопка имеет нестандартную форму, уточните: можно ли её сделать через CSS или нужен SVG?
Также важно следить за трендами. В 2026 году активно развиваются CSS Container Queries, новые значения display (например, display: chip), а также улучшения в области доступности. Использование этих возможностей делает код современнее и эффективнее.

Полезно знать: Figma теперь поддерживает Design Tokens — переменные, которые можно экспортировать в JSON и использовать в CSS. Это упрощает синхронизацию между дизайном и кодом.

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

Можно ли автоматически конвертировать Figma в HTML?

Полностью автоматической конвертации пока нет. Плагины вроде Figma to Code или Anima помогают, но результат требует ручной доработки. Особенно это касается семантики, доступности и адаптивности.

Что делать, если макет не адаптивный?

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

Как быть с анимациями из Figma?

Figma показывает прототипы с анимацией, но не предоставляет параметры (duration, easing). Вам нужно воссоздать их вручную с помощью CSS transitions или JavaScript. Используйте инструменты вроде Lottie для сложных анимаций.

Нужно ли использовать препроцессоры (Sass, Less)?

Да, если проект большой. Они упрощают работу с переменными, вложенностью и модульностью. Однако для простых страниц достаточно чистого CSS с использованием custom properties.

Как проверить, что верстка соответствует макету?

Используйте комбинацию: визуальная сверка (PerfectPixel), проверка в разных браузерах и устройствах, а также инструменты вроде Chrome DevTools для анализа стилей и макета.

Заключение

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

Главное — не стремиться к идеальной копии, а создавать функциональный, быстрый и удобный интерфейс. Технологии меняются, но основы остаются: анализ, структура, стиль и тестирование.

Всегда начинайте с анализа макета и выделения компонентов.
Экспортируйте ресурсы в правильных форматах: SVG для иконок, WebP для изображений.
Используйте семантическую разметку и современные методы позиционирования (Flexbox, Grid).
Применяйте инструменты для сверки, такие как PerfectPixel и Figma Dev Mode.
Работайте с дизайнером — обсуждайте нереализуемые решения и предлагайте альтернативы.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.