Как верстать из фигмы

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

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

Перед тем как открыть редактор кода, важно глубоко понять структуру и логику макета. Начните с просмотра всех страниц проекта в Figma. Определите, сколько экранов нужно сверстать, есть ли повторяющиеся компоненты (например, шапка, футер, карточки товаров), и какие состояния предусмотрены (ховер, фокус, активное меню). Это позволяет заранее спланировать архитектуру HTML и переиспользуемые CSS-классы.
Обратите внимание на сетку. Узнайте, используется ли 12-колоночная сетка, какой отступ между колонками, где расположены брейкпоинты. Дизайнёр может указать это в комментариях или слоях, но если нет — измерьте самостоятельно. Также проверьте типографику: шрифты, размеры, межстрочные интервалы, веса. Все эти данные станут основой для CSS-переменных.

Особое внимание уделите адаптивности. Есть ли отдельные макеты для мобильных устройств? Если нет — уточните у дизайнера, как должны вести себя элементы при сужении экрана. Иногда дизайнер ожидает, что вы сами «додумаете» поведение интерфейса, но лучше не рисковать.

• Проверьте наличие компонентов и вариаций (primary/secondary кнопки, иконки разных размеров).
• Убедитесь, что все тексты актуальны и нет временных заглушек.
• Найдите анимации и переходы — они могут быть описаны в заметках или показаны через прототипирование.

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

1. Откройте проект в Figma и перейдите в режим просмотра (View mode).
2. Пройдитесь по всем страницам, зафиксируйте типы контента и взаимодействий.
3. Изучите слои: именование, группировка, использование компонентов.
4. Проверьте наличие документации (через фигминьи комментарии или отдельный фрейм).
5. Свяжитесь с дизайнером для уточнения неясных моментов.

Подготовка к верстке: настройка среды и инструментов

Правильная подготовка экономит время и снижает количество ошибок. Начните с выбора стека технологий. Современная верстка чаще всего предполагает HTML5, CSS3 (с использованием препроцессоров вроде SCSS) и, при необходимости, JavaScript (часто с фреймворками: React, Vue, Angular). Однако для простых страниц достаточно чистого HTML и CSS.
Настройте сборку. Даже если проект небольшой, используйте хотя бы базовый Gulp или Vite. Это позволит автоматически обновлять браузер при сохранении файлов, минифицировать CSS и JS, а также собирать спрайты. Для контроля версий обязательно используйте Git.

• Создайте структуру папок: /src, /dist, /assets (изображения, шрифты), /scss.
• Настройте live server — например, через расширение в VS Code или webpack-dev-server.
• Добавьте normalize.css или reset.css, чтобы устранить различия в отображении между браузерами.

Подготовьте шрифты. Если в дизайне используются Google Fonts — подключите их через CDN. Если кастомные — запросите у дизайнера файлы (WOFF2, WOFF) и подключите через @font-face. Не забудьте указать fallback-шрифты.

Как работать с Figma: экспорт, замеры, стили

Figma — мощный инструмент, который предоставляет всё необходимое для точной верстки. Режим просмотра (Preview mode) позволяет кликать по любому элементу и видеть его свойства: отступы, цвет, шрифт, тени, рамки. Чтобы войти в этот режим, дизайнер должен опубликовать макет (Share → Copy link).
Кликните по текстовому блоку — вы увидите название шрифта, размер, высоту строки, буквинку, цвет. Для блоков — ширину, высоту, padding, margin, border-radius, box-shadow. Все значения можно копировать одним кликом. Это исключает ручные ошибки при переносе данных.

Экспорт ассетов — важный этап. Изображения, иконки, логотипы нужно экспортировать в нужных форматах. Figma позволяет экспортировать в PNG, SVG, JPG. Для иконок и логотипов всегда выбирайте SVG — они масштабируются без потерь. Убедитесь, что SVG очищены от лишних тегов (используйте SVGO).

• Для ретина-экранов экспортируйте в 2x и 3x (если требуется).
• Используйте batch export для группировки иконок.
• Называйте файлы осмысленно: icon-menu.svg, а не frame-12.png.

Работа с Auto Layout

Auto Layout в Figma — аналог flexbox в CSS. Если дизайнер использовал его правильно, вы сразу видите направление потока (горизонтальное/вертикальное), выравнивание, gap. Это значительно упрощает верстку списков, навигации, карточек.

Технические аспекты верстки: семантика, адаптивность, доступность

Верстка — это не только внешний вид. Семантическая разметка делает сайт понятным для поисковиков и скринридеров. Вместо <div class="header"> используйте <header>, вместо <div class="button"> — <button> или <a> с правильными ролями.
Адаптивность — обязательное требование. Используйте медиазапросы на основе содержимого (content-based breakpoints), а не конкретных устройств. Начинайте с мобильной версии (mobile-first), затем добавляйте стили для планшетов и десктопов.

• Брейкпоинты: 320px, 768px, 1024px, 1200px — ориентируйтесь на макет.
• Используйте relative units: rem, em, %, vw/vh — они гибче, чем px.
• Для сеток — CSS Grid и Flexbox, а не float или таблицы.

Доступность (accessibility) часто упускают, но она критична. Проверьте контрастность текста, добавьте alt-атрибуты к изображениям, используйте ARIA-роли при необходимости. Убедитесь, что сайт работает с клавиатурой (tabindex, focus-состояния).

Распространённые ошибки и как их избежать

Даже опытные верстальщики допускают типичные промахи. Вот самые частые:

• Слепое копирование пикселей. Не все значения из Figma нужно переносить один к одному. Например, если отступ 17px — скорее всего, дизайнер округлил. Лучше использовать 16px или 20px для согласованности системы отступов.
• Игнорирование отзывчивости. Верстка только под один размер экрана приводит к поломкам на других устройствах. Всегда тестируйте на нескольких viewport’ах.
• Плохая структура классов. Избегайте вложенности вроде .header .nav .item .link. Используйте БЭМ или другие методологии.
• Неоптимизированные изображения. Большие PNG-файлы замедляют загрузку. Конвертируйте в WebP, сжимайте через Squoosh или TinyPNG.

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

• Проверено на Chrome, Firefox, Safari (и на мобильных браузерах).
• Работает в режиме увеличения текста (200%).
• Нет горизонтального скролла на малых экранах.
• Все ссылки и кнопки имеют hover/focus состояния.
• Исходный код валиден (HTML, CSS).

Автоматизация и оптимизация процесса

Современные инструменты позволяют ускорить верстку. Плагины Figma:

• CSS Prettier — генерирует готовый CSS-код для выделенного элемента.
• Tokens Studio — синхронизирует design tokens (цвета, отступы, шрифты) между Figma и кодом.
• Zeplin for Figma — экспортирует спецификации в удобном виде для команды.

Интеграция с системами управления проектами (Jira, Notion) позволяет автоматически создавать задачи на верстку при изменении макета. Также можно настроить CI/CD, чтобы при каждом коммите запускалась проверка качества кода и скриншотное тестирование (например, через Percy).

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

Также Кирилл отмечает важность использования design tokens. «Когда цвета, отступы и типографика хранятся в едином источнике (в Figma и в коде), изменения применяются мгновенно. Если бренд поменял основной цвет — вы меняете его один раз, и он обновляется везде».

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

Заключение

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

• Всегда начинайте с анализа макета и синхронизации с дизайнером.
• Используйте встроенные инструменты Figma для точных замеров и экспорта.
• Придерживайтесь семантики, адаптивности и доступности.
• Автоматизируйте рутинные задачи через плагины и сборки.
• Тестируйте верстку на разных устройствах и браузерах.