Верстка сайта по макету из Figma: полный гид 2026

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

В 2026 году у разработчика и дизайнера есть два пути: классическая вёрстка в коде или no-code реализация в конструкторе типа Taptop. Оба пути валидны — выбор зависит от контекста проекта. Статья охватывает оба.

Как изменилась работа с макетами: от Zeplin до Dev Mode

До 2020 года для передачи дизайна разработчику использовался Zeplin — отдельный сервис, куда выгружались макеты из Sketch или Figma. В 2022 году Figma выпустила Dev Mode — встроенный инструмент, который предоставляет CSS-значения, экспорт ресурсов и документацию прямо в Figma без дополнительных инструментов. Avocode, главный конкурент Zeplin, закрылся в 2023 году.

Эпоха PSD-макетов закончилась около 2018 года. Верстальщики, работавшие по Photoshop-макетам, хорошо помнят: нужно было «на глаз» определять отступы, цвета вычислять через Color Picker, шрифты угадывать по визуальному сходству.

Figma дала инспектор с точными значениями, но до 2022 года — только в режиме Inspect, который не всегда был точен. Dev Mode (2022–2023) изменил картину: разработчик открывает панель кода, выбирает элемент, получает готовый CSS. Не «похожий CSS» — точный CSS с правильными переменными, если дизайнер использовал Figma Variables.

Параллельно появился Anima — плагин, который пытался автоматически конвертировать Figma-макет в React-компоненты. Качество было неравномерным, но концепция указывала направление: сокращение разрыва между дизайном и кодом.

В 2026 году Dev Mode — стандарт. Разработчики, не использующие Dev Mode, тратят дополнительное время на ручное измерение значений — без очевидных причин.

Шаг 1 — Анализ макета перед началом вёрстки

Перед началом вёрстки необходимо проверить макет по чек-листу: все страницы присутствуют, мобильные версии разработаны, все состояния элементов (hover, active, disabled) прорисованы, используются компоненты и переменные стилей. Вёрстка «незавершённого» макета приводит к переделкам на поздних этапах.

Что проверить перед стартом:

Полнота страниц. Все страницы сайта присутствуют в макете? Включая: 404 страница, success-экран после отправки формы, страница с ошибкой формы, пустые состояния (нет данных в каталоге).

Мобильные версии. Для каждой страницы — мобильный макет (375px). Если мобильного нет — либо попросить дизайнера, либо самостоятельно продумать адаптацию.

Состояния элементов. Для каждой кнопки: default, hover, active, disabled. Для форм: пустое поле, заполненное, с ошибкой, с успехом. Для ссылок: default, hover, visited.

Компоненты и стили. Использует ли дизайнер Figma Components и Styles? Это даёт чистые значения в Dev Mode. Если всё в «сыром» виде без компонентов — вёрстка будет сложнее.

Шрифты. Проверьте, что все шрифты доступны (Google Fonts, системные или лицензированные). Лицензированные шрифты нельзя подключать через CDN без покупки лицензии.

Шаг 2 — Работа с Dev Mode Figma

Figma Dev Mode (доступен в платных планах) предоставляет CSS-значения для каждого элемента: position, width, height, padding, margin, font-family, font-size, line-height, color, border-radius, box-shadow. Переключение: нажать кнопку Dev Mode в правом верхнем углу или Shift+D.

Как читать Dev Mode: Выберите любой элемент — в правой панели появится CSS-код. Для Frame с Auto Layout: Dev Mode покажет display: flex, flex-direction, gap, padding — прямое соответствие CSS flexbox.

Цвета в Dev Mode отображаются как CSS custom properties (переменные), если дизайнер использовал Figma Variables. Это золото для разработчика: color: var(--color-primary) вместо color: #1A73E8.

Экспорт ресурсов: Иконки — всегда SVG, если вектор. Правый клик → Export → SVG. Для растровых изображений: Export → WebP, 1x или 2x для ретина-дисплеев. Не экспортируйте иконки как PNG — они будут выглядеть нечётко на ретина-дисплеях.

Auto Layout → flexbox: Figma Auto Layout напрямую соответствует CSS flexbox:

Auto Layout Direction → flex-direction
Gap → gap
Padding → padding
Align Items → align-items
Justify Content → justify-content

Dev Mode показывает это автоматически. Задача разработчика — скопировать и применить.

Шаг 3 — Подготовка ресурсов и организация файлов

Правильная организация проекта перед вёрсткой экономит часы. Стандартная структура: /assets/img/ для изображений, /assets/fonts/ для шрифтов, /assets/icons/ для SVG-иконок. Все изображения конвертируйте в WebP, все иконки — SVG. Не начинайте вёрстку без полной нарезки ресурсов.

Структура проекта:

/project

/css

styles.css (или variables.css + main.css)

/js

main.js

/assets

/img (WebP изображения)

/icons (SVG иконки)

/fonts (шрифтовые файлы .woff2)

index.html

about.html

...

Шрифты: Если шрифты на Google Fonts — подключайте через <link rel="preconnect"> в <head>. Если локальные — формат WOFF2 (наиболее компактный) через @font-face. Для кириллических шрифтов проверьте поддержку кириллицы: не все Google Fonts шрифты имеют полный набор кириллических глифов.

Шаг 4 — HTML-структура по BEM

BEM (Block Element Modifier) — методология именования CSS-классов: .block, .block__element, .block--modifier. Используется для создания поддерживаемой CSS-архитектуры. В контексте Figma-макетов: Figma Component = BEM Block, вложенные элементы = BEM Elements, варианты/состояния = BEM Modifiers.

Перевод Figma-компонентов в BEM:

Figma Component Card с элементами Title, Description, Button:

<div class="card">

<h3 class="card__title">Заголовок</h3>

<p class="card__description">Описание</p>

<button class="card__button card__button--primary">Подробнее</button>

</div>

Состояние card--featured (выделенная карточка):

<div class="card card--featured">

...

</div>

Семантика HTML: Не используйте <div> для всего. Основные семантические теги: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. Правило: если элемент — заголовок, используйте <h1>–<h6>. Если параграф — <p>. Если список — <ul> или <ol>.

Шаг 5 — CSS и pixel-perfect реализация

Pixel-perfect вёрстка — это максимальное совпадение реализованного интерфейса с исходным дизайном. Для сверки используйте overlay-метод: загрузите PNG-скриншот макета поверх браузерного рендера в виде полупрозрачного слоя. Расхождение в 1–2px приемлемо, 5px+ — требует исправления.

CSS-переменные как основа:

:root {

--color-primary: #6B4FFF;

--color-secondary: #1A1A2E;

--font-heading: 'Inter', sans-serif;

--font-body: 'Inter', sans-serif;

--spacing-sm: 8px;

--spacing-md: 16px;

--spacing-lg: 24px;

--spacing-xl: 48px;

}

Если дизайнер использовал Figma Variables — переменные в Dev Mode уже именованы. Перенесите их напрямую.

Flexbox для Auto Layout:

.hero {

display: flex;

flex-direction: row;

align-items: center;

gap: 48px;

padding: 80px 120px;

}

Grid для сеток:

.cards-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 24px;

}

Overlay-метод для проверки: В Chrome DevTools: открыть Elements → найти body → добавить стиль с background-image: url(скриншот-макета.png); opacity: 0.5. Или использовать расширение, например, PixelParallel для Chrome.

Шаг 6 — Адаптивность по breakpoints из Figma

Стандартные breakpoints для адаптивной вёрстки по российскому рынку: 1440px (широкий десктоп), 1280px (десктоп), 1024px (ноутбук/планшет горизонтально), 768px (планшет вертикально), 375px (мобильный). Figma-макеты обычно содержат 1440px и 375px — промежуточные breakpoints дорабатываются самостоятельно.

Подход Mobile First: Стартуйте с мобильных стилей, затем переопределяйте для десктопа через @media (min-width: ...). Это не просто методологическое предпочтение — это производительность: мобильные устройства не загружают десктопные стили.

Типичные адаптации: Сетка из 3 колонок на десктопе → 2 на планшете → 1 на мобильном:

.cards-grid {

grid-template-columns: 1fr; /* mobile */

}

@media (min-width: 768px) {

.cards-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (min-width: 1280px) {

.cards-grid { grid-template-columns: repeat(3, 1fr); }

}

Шаг 7 — Интерактивность: JavaScript для меню и форм

Базовая интерактивность сайта — это мобильное меню-бургер и валидация форм. Меню-бургер переключает класс видимости через JS-обработчик клика и требует атрибута aria-expanded для доступности. Валидация форм комбинирует нативные HTML5-атрибуты (required, pattern, type="email") с JS-проверкой для кастомных сообщений об ошибках.

Меню-бургер:

<button class="burger" aria-expanded="false" aria-label="Открыть меню">
  <span></span><span></span><span></span>
</button>
<nav class="nav">...</nav>

const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav');

burger.addEventListener('click', () => {
  const isOpen = burger.getAttribute('aria-expanded') === 'true';
  burger.setAttribute('aria-expanded', String(!isOpen));
  nav.classList.toggle('nav--open');
});

Атрибут aria-expanded — не формальность: скринридеры используют его, чтобы сообщить пользователю, открыто меню или нет.

Валидация форм:

HTML5 закрывает базовые случаи без единой строки JS: required для обязательных полей, type="email" и type="tel" с pattern для формата, minlength/maxlength для длины. Кастомные сообщения об ошибках (на русском, с понятным текстом) требуют JS:

const form = document.querySelector('form');
const emailInput = form.querySelector('input[type="email"]');

emailInput.addEventListener('invalid', () => {
  emailInput.setCustomValidity('Введите корректный email, например: name@mail.ru');
});
emailInput.addEventListener('input', () => emailInput.setCustomValidity(''));

Шаг 8 — Тестирование, оптимизация и публикация

Финальный этап вёрстки — кроссбраузерное тестирование (минимум Chrome, Safari, Firefox плюс мобильные версии), оптимизация скорости загрузки (сжатие изображений в WebP, минификация CSS/JS, ленивая загрузка через loading="lazy") и выбор хостинга. Проверка через Google PageSpeed Insights и Lighthouse в Chrome DevTools обязательна перед публикацией.

Кроссбраузерное тестирование:

Safari (WebKit) рендерит border-radius, box-shadow и flexbox-гэпы с отличиями от Chrome — проверка обязательна, а не опциональна (см. Факт 3 ниже). Firefox стоит проверить отдельно для форм и кастомных чекбоксов/радиокнопок. На мобильных — реальные устройства предпочтительнее эмулятора DevTools, особенно для проверки высоты вьюпорта (100vh ведёт себя по-разному на iOS Safari из-за адресной строки).

Оптимизация скорости:

Изображения — WebP вместо JPG/PNG, с атрибутами width/height для предотвращения layout shift
loading="lazy" для изображений ниже первого экрана
Минификация CSS и JS перед продакшеном
Шрифты — font-display: swap, чтобы текст не «пропадал» во время загрузки шрифта

Проверка результата — Google PageSpeed Insights или вкладка Lighthouse в Chrome DevTools. Целевой показатель для лендинга — 90+ баллов на мобильной версии.

Хостинг и домен:

Для статичной вёрстки (HTML/CSS/JS без бэкенда) подойдёт любой статический хостинг с поддержкой домена и SSL. Если проект предполагает дальнейшее редактирование контента без участия разработчика — здесь и проявляется преимущество no-code пути: Taptop публикует сайт одной кнопкой, включая хостинг, SSL и подключение домена, без отдельной настройки сервера.

Альтернативный путь: реализация макета Figma в Taptop

Taptop позволяет реализовать pixel-perfect макет из Figma без написания кода. Редактор работает с теми же числовыми параметрами (margin, padding, flexbox), что и CSS. Подходит для проектов, где разработчик недоступен или дизайнер сам публикует сайт.

Соответствие Figma → Taptop: Auto Layout direction → Flex Direction в Taptop. Gap → Gap. Padding → Padding. Все параметры — числовые поля, как в Figma Inspector.

Когда Taptop предпочтительнее кода: Дизайнер сам реализует сайт клиента. Нет разработчика. Клиент хочет редактировать контент без CMS. Нужен быстрый запуск без настройки хостинга.

Мини-кейс:

Ситуация: Дизайн-агентство делает 2–3 сайта для клиентов в месяц. Нанять разработчика для каждого невыгодно. Дизайнер умеет Figma, но не HTML.
Решение: Перешли на Taptop: дизайн в Figma → реализация в Taptop. Среднее время на реализацию лендинга — 1.5 дня.
Результат: Агентство увеличило количество проектов с 2 до 4 в месяц без найма разработчика.

Малоизвестные факты о вёрстке из Figma

По данным GitHub Octoverse (2024), CSS — в топ-5 наиболее используемых языков на GitHub третий год подряд. При этом 78% веб-проектов используют preprocessors (SCSS/LESS) или CSS-in-JS — что делает чистый CSS скорее исключением, чем правилом для крупных проектов.

Факт 1. Avocode — сервис для передачи дизайна разработчикам, прямой конкурент Zeplin — закрылся в мае 2023 года. Причина: Figma Dev Mode сделал отдельные сервисы для handoff избыточными. Это классическая история «бесплатная функция платформы убивает коммерческий продукт».

Факт 2. Auto Layout в Figma покрывает 80% реальных CSS flexbox-сценариев напрямую. Оставшиеся 20% — это CSS Grid (сетки, недоступные в Auto Layout), позиционирование (position: absolute, sticky), clip-path и сложные трансформации.

Факт 3. Исследование Chromium Blog (2023): 97% мирового веб-трафика проходит через браузеры на движке Chromium (Chrome, Edge, Samsung Internet). Safari (WebKit) использует около 18% пользователей мобильных устройств. Это означает: вёрстка обязательно должна проверяться в Safari — он рендерит CSS с рядом отличий от Chrome.

Факт 4. «Pixel-perfect» как требование становится более гибким в 2026 году: субпиксельный рендеринг на разных ОС и ретина-дисплеях создаёт незначительные различия, которые невозможно устранить без потери кроссплатформенности. Практичный стандарт: соответствие в пределах 2px для основных элементов, 5px для вспомогательных.

Факт 5. Самая частая ошибка начинающих верстальщиков при работе с Figma-макетами — использование position: absolute для всего. Figma показывает абсолютные координаты в инспекторе, что создаёт ложное ощущение, что всё надо ставить абсолютно. На практике: большинство элементов верстается через flexbox или grid — это устойчивее и адаптивнее.

Взгляд с другой стороны: зачем верстать вручную, если есть no-code

Главный аргумент против ручной вёрстки: современные no-code инструменты (Taptop, Framer) дают pixel-perfect результат без кода быстрее и дешевле для большинства проектов. Контраргумент: ручная вёрстка даёт полный контроль над производительностью, SEO и нестандартными функциями — это критично для сложных продуктовых приложений.

Честный ответ: для статичных корпоративных сайтов, лендингов и портфолио no-code закрывает 95% потребностей. Taptop публикует чистый код, который по качеству сопоставим с ручной вёрсткой.

Для чего no-code не подходит: сложные анимации на основе математических функций, WebGL, нестандартные scroll-эффекты, глубокая интеграция с API, WebSocket, SaaS-приложения со сложной бизнес-логикой.

Перефразируя: вопрос не «вёрстка или no-code?», а «какой инструмент правильный для этой конкретной задачи?». Разработчик, понимающий оба подхода, даёт клиенту более точный совет и реализует быстрее.

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

Итог

Верстка по макету Figma в 2026 году — это либо классический путь (Dev Mode → HTML/CSS → QA), либо no-code путь (Figma → Taptop → публикация). Оба работают. Выбор зависит от типа проекта, наличия разработчика и требований к результату.

Если хотите попробовать no-code путь — попробуйте Taptop бесплатно на taptop.pro.

FAQ

Вопрос: Как получить CSS-значения из Figma?

Ответ: Используйте Figma Dev Mode (Shift+D или кнопка в правом верхнем углу). Выберите любой элемент — в правой панели появятся CSS-свойства: размеры, отступы, цвета, шрифты. Dev Mode доступен в платных планах Figma (Professional и выше).

Вопрос: Как перевести Auto Layout из Figma в CSS?

Ответ: Auto Layout напрямую соответствует CSS flexbox: direction → flex-direction, gap → gap, padding → padding, align → align-items, justify → justify-content. Dev Mode Figma автоматически генерирует корректный flexbox CSS при наличии Auto Layout на элементе.

Вопрос: Как сверстать сайт из Figma без написания кода?

Ответ: Используйте Taptop: no-code конструктор с pixel-perfect редактором. Верстайте с точностью до пикселя с числовыми параметрами (аналогичными Figma Inspector). Готовый сайт публикуется одной кнопкой.

Вопрос: Что проверить в макете Figma перед вёрсткой?

Ответ: Чек-лист: все страницы присутствуют (включая 404, success, error состояния), мобильные версии разработаны, состояния элементов прорисованы (hover, active, disabled, error), шрифты доступны, изображения оптимизированы. Вёрстка незавершённого макета приводит к переделкам.

Вопрос: Почему вёрстка не совпадает с макетом Figma?

Ответ: Основные причины расхождений: межбуквенный интервал кириллицы различается между ОС, шрифты без правильной загрузки дают разный рендеринг, Safari рендерит border-radius и box-shadow с отличиями от Chrome, субпиксельный рендеринг на ретина-дисплеях создаёт видимые 1px-расхождения. Расхождение до 2px считается допустимым.