Если вы верстальщик, который до сих пор мучительно вымеряет отступы в пикселях или гадает, какой именно шрифт использовал дизайнер, эта статья для вас. Я расскажу, как превратить Figma из источника головной боли в ваш главный рабочий инструмент, который ускорит вёрстку в разы и сведёт ошибки к минимуму.
Введение: Почему проблема "figma для верстальщика" актуальна в 2025?
Казалось бы, Figma существует уже давно. Но в 2025 году скорость разработки выросла настолько, что старые подходы — делать скриншоты макета или вручную переписывать значения из инспектора — просто нежизнеспособны. Дизайны стали сложнее, а требования к точности и доступности — строже. Проблема не в самом Figma, а в том, как мы, верстальщики, с ним взаимодействуем. Мы тратим львиную долю времени не на творческую работу с кодом, а на механическую расшифровку макета.
Основные симптомы и риски
Давайте честно признаем симптомы, которые знакомы каждому:
- "Слепая" вёрстка: Вы переносите значения, не понимая логики дизайн-системы. Почему здесь отступ 24px, а там 20px? Это опечатка или система?
- Хрупкий результат: Любое изменение в макете дизайнера означает часовой пересчёт всех margin и padding в вашем коде.
- Потеря контекста: Вы видите статичный frame, но не знаете, как компонент ведёт себя на разных разрешениях или в разных состояниях (hover, focus, disabled).
- Риск для проекта: Неточности накапливаются, интерфейс "плывёт", ревью занимает дни, а доверие между дизайнером и разработчиком тает.
Экспертный совет: Главный риск — не технический, а коммуникационный. Разрыв между дизайном и кодом убивает скорость команды. Ваша цель — не просто сверстать макет, а понять и воплотить дизайн-систему.
Пошаговый план решения (7 шагов)
Шаг 1: Настройка рабочего пространства в Figma
Не открывайте макет и сразу не лезьте в код. Сначала исследуйте файл. Найдите страницу со стилями (Colors, Typography, Effects). Проверьте, используются ли компоненты и Auto Layout. Это ваш фундамент.
Шаг 2: Установка обязательных плагинов
Без этих инструментов в 2025 году уже не обойтись:
- Figma to HTML: или аналоги для быстрого экспорта структуры.
- Px | Rem | Em: для мгновенного перевода пикселей в относительные единицы.
- Color Contrast Checker: для проверки доступности прямо в макете.
Шаг 3: Работа со стилями и переменными
Это ключевой момент. Если дизайнер использовал Styles (Цвета, Текстографика), вы можете легко экспортировать их в CSS-переменные. Если нет — создайте свою карту, согласовав её с дизайнером.
Шаг 4: Анализ Auto Layout и Constraints
Auto Layout — это прямое указание на то, как должен вести себя блок при изменении контента или размера экрана. Изучите направление (horizontal/vertical), spacing и padding. Constraints подскажут, как элемент привязан к родителю.
Шаг 5: Экспорт ресурсов по уму
Не экспортируйте все иконки по одной. Проверьте, не собраны ли они в компонент с вариантами (Variants). Используйте режим "Export" для настройки формата (SVG всегда приоритетен для иконок) и размера.
Шаг 6: Использование Dev Mode
В 2025 году Dev Mode в Figma — это must-have. Включите его (Shift + I). Теперь вы видите не только значения, но и рекомендации по коду, можете копировать CSS-свойства целыми блоками и видеть связи между компонентами.
Шаг 7: Создание «живой» связи
Договоритесь с дизайнером о регулярных sync-сессиях. Обсуждайте сложные компоненты до начала вёрстки. Используйте комментарии в Figma для уточнений.
Реальный кейс из моей практики
Недавно я вёл проект сложной финансовой dashboard. Дизайнер, талантливый визуально, не использовал компоненты и Auto Layout. Макет был красивым, но абсолютно «мёртвым» для вёрстки. Вместо того чтобы начать пилить код, я потратил два часа на созвон с дизайнером. Мы вместе:
- Выделили повторяющиеся элементы (карточки, кнопки, заголовки таблиц).
- Создали для них простейшие компоненты и стили.
- Перестроили ключевые фреймы с помощью Auto Layout.
Альтернативные подходы и их сравнение
Figma — не единственный игрок. Давайте сравним его с другими инструментами для передачи макета.
| Инструмент | Плюсы для верстальщика | Минусы | Когда выбирать |
|---|---|---|---|
| Figma | Онлайн, лучший Dev Mode, сильное комьюнити и плагины | Требует от дизайнера дисциплины в использовании стилей | В 95% случаев в 2025. Стандарт индустрии. |
| Adobe XD | Плотная интеграция с другими продуктами Adobe | Меньше плагинов, слабее инструменты для разработчиков | Если вся команда дизайнеров в экосистеме Adobe. |
| Sketch + Zeplin | Zeplin даёт очень чистый и понятный спецификации для вёрстки | Работа в двух разных приложениях, Sketch только под Mac | Для legacy-проектов, где команда годами отлажена на этом стеке. |
| Penpot (open-source) | Полный контроль, можно самому развернуть | Меньше функций и плагинов, сыроват | Для проектов с жёсткими требованиями к безопасности и конфиденциальности. |
Частые ошибки и как их избежать
- Ошибка 1: Игнорирование дизайн-системы. Вы берёте значения точечно. Решение: Всегда смотрите на макет системно. Спросите дизайнера о гайдлайнах.
- Ошибка 2: Жёсткое копирование размеров. Вы копируете 24px вместо того, чтобы понять, что это базовый отступ `--space-md` в системе. Решение: Работайте через CSS-переменные, привязанные к стилям Figma.
- Ошибка 3: Вёрстка только для десктопа. Вы верстаете один breakpoint, а потом ломаете голову над адаптивом. Решение: Сразу смотрите, как дизайнер представил мобильную и планшетную версии (или как ведут себя Auto Layout constraints).
Практический пример с кодом: Допустим, в Figma у кнопки padding: 12px 24px, цвет фона — стиль "Primary/500", скругление — 8px.
Плохо: Жёстко прописать в CSS `padding: 12px 24px; background: #3B82F6; border-radius: 8px;`
Хорошо: Вынести в переменные, отражающие систему.
:root {
--space-sm: 12px;
--space-md: 24px;
--radius-md: 8px;
--color-primary-500: #3B82F6; /* Взят из стиля Figma */
}
.button {
padding: var(--space-sm) var(--space-md);
background: var(--color-primary-500);
border-radius: var(--radius-md);
}
Ключевые выводы
- Figma в 2025 — это не картинка, а интерактивная спецификация. Относитесь к ней именно так.
- Ваш главный навык — не умение точно отмерить пиксель, а умение декодировать дизайн-систему из Figma в логичную систему CSS-переменных и компонентов.
- Инвестируйте время в настройку процесса и коммуникацию с дизайнером. Это окупится десятикратно на каждом следующем проекте.
- Используйте Dev Mode и плагины — они созданы, чтобы экономить ваше время и нервы.
FAQ (Частые вопросы)
Что делать, если дизайнер не использует стили и компоненты в Figma?
Вежливо предложить помощь в их настройке. Объясните, что это ускорит работу и ему/ей (при изменении дизайна нужно будет поправить стиль в одном месте), и вам. Если не идёт на контакт — создайте свою внутреннюю карту переменных в коде, основанную на наиболее частых значениях из макета.
Как правильно экспортировать иконки из Figma?
Всегда выбирайте SVG. Убедитесь, что фигура превращена в outline (частая проблема с кастомными шрифтами). Проверяйте, нет ли лишних слоёв или обтравочных масок. Используйте плагины типа "SVG Export" для оптимизации кода.
Есть ли способ автоматизировать перенос стилей из Figma в код?
Да! Исследуйте инструменты типа Figma API (для продвинутых) или плагины, которые генерируют CSS/SCSS/Style Dictionary файлы. В 2025 году появляется всё больше no-code решений для синхронизации дизайн-токенов.
Dev Mode — это платно?
Для редакторов файлов (дизайнеров) — да, требуется платная подписка Figma. Но для зрителей (которыми часто являются разработчики, получившие доступ к макету) Dev Mode в 2025 году, как правило, доступен. Уточняйте у владельца файла.