Верстка по макету 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); }

}

Альтернативный путь: реализация макета 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.