Когда-то верстальщик получал от дизайнера пачку PNG-файлов и слёзно пытался угадать отступы, шрифты и состояния кнопок. Сегодня всё иначе. Figma перевернула процесс взаимодействия дизайна и вёрстки, став не просто инструментом для рисования, а полноценной рабочей средой, где рождается будущий сайт. Это ваш мост от визуальной идеи до чистого, работающего кода.
Почему Figma — это не «просто картинка»
Главное заблуждение новичка — считать Figma статичным макетом. На самом деле, это живая, интерактивная спецификация. Дизайнер создаёт не просто слои, а систему: компоненты с вариантами, авто-лейауты, которые адаптируются, стили текста и цвета, которые вынесены в отдельные библиотеки. Для верстальщика это золотая жила данных, а не головоломка.
Ключевой принцип: если дизайнер сделал макет в Figma правильно, используя компоненты и стили, то вёрстка становится не угадыванием, а точным переносом параметров.
Суперсилы верстальщика в Figma
Откройте макет. Видите просто картинку? Включите «режим разработчика» (кнопка «Dev Mode» в правом верхнем углу). Вот теперь начинается магия.
1. Визуальное копирование стилей
Кликните на любой элемент — в правой панели вы увидите не только CSS-свойства (от padding и margin до точного кода для тени box-shadow), но и готовые строки для копирования. Цвета сразу в HEX, RGBA или даже CSS-переменных, если дизайнер поработал на опережение.
2. Работа с шрифтами и типографикой
Figma показывает не просто название шрифта, а точный вес (font-weight), размер (font-size), высоту строки (line-height) и межбуквенный интервал (letter-spacing). Больше не нужно измерять пиксели в фотошопе — все значения под рукой.
3. Извлечение ресурсов
Иконки, иллюстрации, изображения — всё можно экспортировать в нужном формате (SVG, PNG, WebP) и разрешении прямо из макета. Причём SVG-код часто можно скопировать прямо в буфер, что идеально для вставки инлайн-иконок.
4. Инспектирование сеток и отступов
Наведите курсор между элементами — Figma покажет точное расстояние в пикселях. Это убивает главную боль верстальщика — измерение отступов. Авто-лейауты (Auto Layout) визуализируют, как элементы связаны между собой, что напрямую диктует логику Flexbox или Grid CSS.
Как правильно «читать» макет: чек-лист
- Изучите структуру файла. Посмотрите на слои слева. Хороший макет логично сгруппирован по страницам и фреймам (Frame).
- Найдите библиотеку компонентов. Часто дизайнеры выносят кнопки, инпуты, карточки в отдельные компоненты. Изучите их — это ваши будущие UI-киты.
- Проверьте стили. Вкладка «Design» > «Local styles» покажет все цвета и текстовые стили, используемые в проекте. Это основа для ваших CSS-переменных (--primary-color, --font-heading).
- Протестируйте интерактив. Переключитесь в «Prototype» режим (верхняя панель). Часто дизайнеры связывают экраны, показывая переходы, ховеры и состояния. Это ваша ТЗ для JavaScript или CSS-анимаций.
Самый частый вопрос дизайнеру: «А есть ли у тебя дизайн-система или библиотека стилей в этом макете?». Если да — ваша работа ускорится в разы.
Интеграции и плагины — ваш турбо-режим
Figma — это экосистема. Установите плагины, которые сделают жизнь проще:
- CSS to Figma / Figma to CSS: Для быстрого переноса стилей.
- Content Reel: Чтобы подставлять реальные тексты и аватары вместо «рыбы».
- Autoflow: Для автоматической отрисовки связей между элементами, чтобы понять поток интерфейса.
- Pixels: Помогает точно выравнивать элементы по пиксельной сетке.
FAQ: Частые вопросы верстальщиков о Figma
Как точно перенести скругления углов (border-radius)?
В режиме Dev Mode кликните на элемент. В панели «Code» вы увидите точное значение для каждого угла (например, border-radius: 8px 8px 0px 0px;). Если скругление в процентах — оно также будет указано.
Дизайнер использует нестандартный шрифт. Что делать?
В панели «Inspect» для текстового блока будет ссылка «View font in Google Fonts» (если шрифт оттуда) или указано точное название и вес. Если шрифт кастомный — дизайнер должен предоставить файлы (.woff2, .ttf) или инструкцию по подключению.
Как понять, что используется: Flexbox или Grid?
Смотрите на структуру слоев и авто-лейауты. Если элементы выстроены в строку или колонку с равномерными отступами — это явный признак Flexbox. Если видите явную табличную структуру — Grid. Figma часто показывает подсказки в панели «Inspect» в разделе «Layout».
Можно ли экспортировать весь макет в HTML/CSS?
Нет, Figma не генерирует чистый, семантический, адаптивный код для сложных макетов. Она даёт точные CSS-свойства для отдельных элементов, но структуру документа, логику и адаптивность верстальщик создаёт сам. Это и есть ваша ценность.
В итоге, Figma для современного верстальщика — это не просто источник макетов, а интерактивная документация, дизайн-спецификация и инструмент коммуникации с дизайнером в одном флаконе. Освоив её «режим разработчика», вы превращаете процесс вёрстки из творческих мучений в точную инженерную задачу. И это невероятно облегчает жизнь.