Как верстать по Figma: пошаговая инструкция по процессу
Раньше уже разбирал, сложнее ли верстать по Figma, чем из PSD (в двух словах — нет). Но остался вопрос, который заказчики задают чуть реже, зато сами верстальщики — постоянно: а как вообще выглядит сам процесс? Разберу по шагам, с инструментами и типичными граблями.
Вадим ЛукьянцевВеб-разработчик, Краснодар · 5 минут на чтение
Этапы вёрстки сайта: от макета до кода
Если коротко — это несколько последовательных этапов, и пропуск любого из них обычно аукается уже на приёмке готовой работы:
Знакомство с макетом — смотрю все страницы (фреймы), считываю логику: где повторяются блоки, где кастомные элементы, есть ли готовая система отступов
Работа в режиме Dev Mode — специальный режим просмотра в Figma для разработчиков, где видно точные размеры, шрифты и цвета без лишних кликов
Разметка структуры — набрасываю семантический скелет страницы: какие блоки станут смысловыми тегами, где нужна доступная разметка для скринридеров
Собственно вёрстка html и css — собираю блоки, использую flexbox и grid для сеток, придерживаюсь методологии по типу БЭМ
Адаптив и интерактив — поведение на разных ширинах экрана, состояния кнопок, полей и ссылок
Проверка и сдача — сверяю готовую страницу с макетом, проверяю в нескольких браузерах и на разных устройствах
Каждый из этапов может занять от получаса до нескольких дней — зависит от сложности макета и количества уникальных экранов.
Из чего складывается вёрстка из Figma в HTML технически
Переход от макета к рабочему коду — не механическое копирование, а пересборка логики макета в логику браузера:
Стили превращаются в переиспользуемые классы, а не в набор значений на каждый элемент отдельно
Повторяющиеся блоки — карточки, кнопки, пункты меню — собираются один раз и переиспользуются
Сетка и отступы задаются системно, а не подбираются на глаз под каждый блок
Изображения и иконки оптимизируются под вес и формат под браузер
Если в макете уже есть компоненты и текстовые стили с понятными названиями — этот этап проходит быстрее.
Частые ошибки, когда только начинаешь верстать по готовому макету
Дословное копирование размеров без понимания системы. Если в макете кнопка шириной 214 пикселей, это не значит, что в коде нужно жёстко зашить именно это число — часто логичнее задать внутренние отступы и пусть ширина считается от содержимого.
Игнорирование состояний интерфейса. В статичном макете часто нет наведения, фокуса или недоступного состояния кнопки — их приходится додумывать самостоятельно или уточнять у дизайнера.
Вёрстка «под один экран». Одна из самых частых причин переделок — блок красиво выглядит на широком разрешении и разваливается на более узком, потому что про сужение экрана никто не подумал заранее.
Однажды пришёл проект, где предыдущий верстальщик буквально скопировал все размеры из макета в пикселях, включая размер текста, — на телефоне буквы вылезали за пределы экрана. Пришлось переписывать примерно треть стилей заново, хотя изначально казалось, что нужно только доверстать пару блоков.
Сколько времени закладывать на вёрстку сайта по макету
Ориентировочно: лендинг на 5–7 экранов — от трёх до пяти рабочих дней, включая адаптив и проверку. Многостраничный сайт — уже неделя-две, в зависимости от количества уникальных шаблонов страниц. Если макет собран аккуратно, с готовой системой отступов и повторяющимися компонентами — процесс идёт заметно быстрее.
Инструменты, без которых процесс превращается в мучение
Раньше пробовал обходиться без части инструментов — не советую, экономия времени того не стоит:
Dev Mode — без него размеры и цвета приходится вымерять по скриншоту на глаз
Плагины для экспорта иконок и картинок — выгрузка сразу в нужном формате и разрешении
Локальный сервер с автообновлением — чтобы видеть изменения в браузере сразу
Валидатор разметки и чек-лист доступности — экономит время на будущих правках
Если у заказчика нет платного тарифа с Dev Mode — не проблема, просмотр макета всё равно доступен через обычную боковую панель.
Как подготовиться к передаче макета в разработку
Чтобы не тратить время на созвоны и уточнения, полезно заранее:
Дать доступ к файлу с правами хотя бы на просмотр и комментирование
Проверить, что все текстовые стили названы и переиспользуются, а не вставлены как случайный текст в каждом блоке заново
Договориться, кто и как отдаёт финальные тексты для сайта — часто процесс стопорится из-за того, что реальный текст ещё не готов
Обозначить приоритет: что должно быть готово в первую очередь, если проект будут сдавать частями
Как быстро проверить качество готовой вёрстки
Перед сдачей полезно пройтись по короткому списку: открыть страницу на нескольких ширинах экрана, включая самую узкую; проверить состояния всех кнопок и ссылок; убедиться, что текст не вылезает за границы блоков при длинных словах; посмотреть страницу в двух-трёх разных браузерах, а не только в том, где вёлся основной процесс.
Есть макет и нужна вёрстка?
Посмотрю макет и скажу точный срок и стоимость под ваш проект — бесплатная оценка, без обязательств.
Сколько итераций проверки обычно требуется перед сдачей? Обычно хватает одной сверки по чек-листу и одного круга правок после демонстрации — если макет был чётким с самого начала.
Что делать, если макет поменялся уже в процессе вёрстки? Зависит от масштаба изменений: точечная правка одного блока встраивается без сдвига сроков, а изменение структуры экрана обычно требует пересчёта времени — об этом стоит договориться сразу, как только правки станут известны.
Нужно ли отдельно проверять сайт на реальных телефонах, а не только в браузере? Да, эмуляция ширины экрана в браузере не всегда показывает нюансы вроде поведения клавиатуры или скролла на настоящем устройстве — финальную проверку лучше делать хотя бы на одном реальном смартфоне.
Вадим ЛукьянцевОб авторе — нажмите, чтобы раскрыть
Веб-разработчик, Краснодар. Делаю сайты под ключ на Vue/Nuxt и React/Next, вёрстку по макетам из Figma и PSD, сайты на WordPress и SEO-продвижение — сам, без субподрядчиков.
Работаю с 2GIS, Яндекс.Бизнесом, самозанятость оформлена официально с 2024 года. С клиентами по всему Краснодарскому краю и удалённо по России.
