Большинство разработчиков открывают Figma только когда дизайнер скидывает ссылку и говорит «верстай». И сразу начинается: где посмотреть отступы, как узнать точный цвет, почему шрифт выглядит не так. Эта статья — чтобы такого не было.
Зачем разработчику уметь работать в Figma
Figma — это не просто картинка, на которую смотришь. Внутри каждого макета зашиты все нужные данные: размеры, отступы, цвета в hex и rgba, стили текста, названия переменных. Если знать, где это всё лежит, можно верстать почти без вопросов к дизайнеру.
Плюс это экономит время. Вместо переписки «скинь цвет кнопки» — открыл, кликнул, скопировал. Всё.
Интерфейс: что где находится
Когда открываешь файл, видишь три основные зоны:
Левая панель — слои и страницы. Здесь видно всю структуру макета: фреймы, группы, компоненты. Можно кликать по элементам в списке, а не на канвасе — удобно, когда элементы перекрываются.
Центр — канвас. Само полотно с макетами. Зум колёсиком мыши, перемещение — зажатый пробел + мышь или средняя кнопка.
Правая панель — инспектор. Вот здесь всё самое интересное для разработчика. Как только кликаешь на элемент, справа появляются его свойства: размеры, координаты, цвета, шрифты, тени, скругления.
Ещё есть вкладка Dev Mode — специальный режим для разработчиков. Там инспектор показывает значения ещё удобнее, а код для CSS или iOS/Android генерируется автоматически. Про него отдельно.
Как читать отступы и размеры
Кликаешь на элемент — справа видишь W (width) и H (height) в пикселях. Это базово.
Чтобы узнать отступ между двумя элементами, зажми Alt и наведи курсор на другой элемент, не снимая выделение с первого. Figma покажет расстояние красными линиями. Это работает и внутри фреймов, и между ними.
Падинги внутри контейнера смотри в правой панели в разделе Auto Layout (если дизайнер использовал его) — там будут явно указаны top, right, bottom, left. Если Auto Layout нет, придётся считать вручную через Alt.
Одна вещь, которая часто путает: размеры в Figma — это пиксели дизайна, не CSS-пиксели. Если макет сделан в 2x (для Retina), все значения нужно делить на 2. Уточни у дизайнера, в каком масштабе макет.
Цвета: как копировать правильно
Кликаешь на элемент, справа в разделе Fill видишь цвет. Кликаешь на цветной квадратик — открывается пикер с hex, RGB, HSL. Кнопка копирования рядом с hex-значением.
Если в проекте используются Color Styles или Variables (переменные цветов), рядом с заливкой будет имя стиля, например primary/blue-500. Это значит, что в коде, скорее всего, уже есть соответствующая переменная или токен — не нужно копировать hex, нужно использовать переменную.
Про прозрачность: в Figma opacity элемента и opacity заливки — разные вещи. Если у кнопки прозрачность 50%, это может быть задано либо через Fill opacity (тогда только цвет полупрозрачный), либо через Layer opacity (тогда весь элемент с текстом станет полупрозрачным). В CSS это разные свойства: background-color: rgba(...) или opacity: 0.5. Смотри внимательно.
Типографика
Кликаешь на текстовый элемент — справа видишь:
- Font family и font weight
- Font size
- Line height (высота строки)
- Letter spacing (межбуквенный интервал)
- Text align
Всё это напрямую ложится в CSS. Line height в Figma может быть в пикселях или процентах — в CSS лучше переводить в безразмерные значения (например, 24px при 16px шрифте = 1.5).
Если в проекте есть Text Styles — увидишь их имена рядом со шрифтом. Это тоже подсказка: ищи соответствующие классы или переменные в коде.
Dev Mode — режим для разработчика
Dev Mode включается кнопкой </> в правом верхнем углу (или через меню). В этом режиме:
- Инспектор показывает свойства в формате, готовом для копирования в CSS
- Можно переключаться между CSS, iOS (Swift) и Android (Kotlin/Compose)
- Рядом с каждым значением есть кнопка копирования
- Для изображений сразу виден вариант экспорта
Для вёрстки это удобнее, чем обычный режим просмотра. Значения box-shadow, border-radius, font — всё уже в нужном синтаксисе.
Важный нюанс: Dev Mode в бесплатном плане Figma ограничен. Если у тебя нет доступа — попроси дизайнера дать права на просмотр файла в Dev Mode, либо работай через обычный инспектор.
Компоненты и варианты
Компоненты в Figma — это как переиспользуемые блоки. Кнопки, карточки, иконки обычно вынесены в отдельные компоненты, а в макетах используются их экземпляры (instances).
Когда кликаешь на экземпляр компонента, в правой панели видишь кнопку «Go to main component» — это переход к оригиналу. Там можно посмотреть все состояния и варианты.
Variants — это набор состояний компонента (например, кнопка: default, hover, disabled, loading). Дизайнер обычно показывает их в одном месте. Разработчику важно понять: это один компонент с пропсами, или разные классы? Ответ — в структуре вариантов.
Если компонент называется Button/Primary/Large/Default — это подсказка по структуре: тип, размер, состояние. Именно так стоит именовать props или классы в коде.
Экспорт ресурсов
Иконки, изображения, иллюстрации — всё это нужно экспортировать. Кликаешь на элемент, в правой панели внизу раздел Export. Там можно выбрать формат (PNG, SVG, PDF, WebP) и масштаб (1x, 2x, 3x).
Для иконок почти всегда лучше SVG — масштабируется без потерь, весит меньше. Для фото — WebP или PNG 2x.
Если дизайнер заранее настроил экспорт, увидишь уже готовые настройки. Если нет — настраивай сам перед скачиванием.
Лайфхак: можно выделить несколько элементов и экспортировать их разом. Или экспортировать целый фрейм как страницу.
Грид и сетка
Почти в каждом проекте дизайнер настраивает Layout Grid — сетку колонок. Чтобы её увидеть, нажми Ctrl+Shift+4 (или Cmd+Shift+4 на Mac), или включи отображение через кнопку глаза рядом с Grid в правой панели при выбранном фрейме.
Обычно это 12 колонок с определёнными gutters и margins. Например: 12 колонок, gutter 24px, margin 80px — стандарт для десктопа 1440px. Для мобильного — 4 колонки, gutter 16px, margin 16px.
Возьми эти цифры и перенеси в CSS Grid или переменные своей сетки. Не пытайся угадать — смотри в макете.
Прототипы и флоу
Вкладка Prototype в правой панели показывает связи между экранами: куда ведёт клик на кнопку, какая анимация перехода, какие есть оверлеи.
Для разработчика это полезно, чтобы понять логику навигации без лишних слов. Видишь стрелки от кнопки к фрейму — понятно, какой экран открывается.
Запустить прототип можно кнопкой Play в правом верхнем углу. Это позволяет пощупать задуманный UX до начала вёрстки.
Плагины, которые реально помогают
Figma поддерживает плагины — они ставятся через меню Resources. Несколько полезных для разработчика:
Figma to Code — генерирует HTML/CSS, React, Flutter, SwiftUI из выбранного фрейма. Результат не идеальный, но как отправная точка — ок.
Measure — добавляет аннотации с размерами прямо на макет. Удобно, если нужно распечатать или передать спецификацию.
Tokens Studio — работает с дизайн-токенами. Если в проекте настроены токены, этот плагин покажет их структуру и позволит экспортировать в JSON.
Iconify — огромная библиотека иконок прямо внутри Figma. Если дизайнер использовал иконки оттуда, их легко найти и скачать в нужном формате.
Частые проблемы при работе с чужими макетами
Нет текстовых стилей, цвета хардкодом — придётся самому выстраивать систему. Спроси дизайнера, есть ли токены или просто копируй значения.
Макет не адаптирован — только один размер экрана, без мобильной версии. Уточни до начала вёрстки: нужна ли мобилка, и если да — кто её делает.
Компоненты не систематизированы — одна и та же кнопка встречается в 5 разных вариантах с мелкими отличиями. Это признак того, что макет делался быстро. Выбери один вариант за основу и зафиксируй с дизайнером.
Шрифт не подключён — видишь рамку вокруг текста и системный шрифт вместо нужного. Figma скажет, какой шрифт нужен. Скачай его с Google Fonts или попроси файл у дизайнера.
Оверлеи и хитрые маски — иногда элемент визуально выглядит как одно, а в слоях это 5 вложенных групп с масками. Разворачивай слои и смотри реальную структуру перед тем, как верстать.
Как это работает в реальных проектах
В студии REEXY перед стартом вёрстки всегда проводим кик-офф по макету: разработчик и дизайнер вместе проходят по ключевым экранам, разбирают нестандартные элементы и фиксируют вопросы. Это занимает 30–60 минут, но экономит дни переделок.
Ещё одна практика — именованные слои. Если слои в Figma называются осмысленно (hero/title, card/image, nav/link), разработчику легче переносить структуру в HTML. Если всё называется Frame 234 и Group 12 — это красный флаг.
Что стоит сделать перед началом вёрстки
Проверь, что у тебя есть:
- Доступ к файлу в режиме просмотра или Dev Mode
- Все нужные шрифты
- Иконки и изображения (или договорённость, кто их экспортирует)
- Понимание брейкпоинтов (какие размеры экранов есть в макете)
- Ответы на вопросы про состояния: hover, focus, disabled, loading, error
- Список анимаций и переходов, если они есть
Если чего-то нет — лучше выяснить сразу, чем наткнуться в середине работы.
Figma — инструмент, который становится удобным быстро. Первые пару проектов уйдёт время на то, чтобы найти нужные данные, потом это становится автоматическим. Главное — не смотреть на макет как на картинку, а кликать и читать то, что внутри.