Figma для разработчика

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику

Figma — браузерный редактор интерфейсов. Дизайнеры собирают экраны; разработчик рисовать с нуля не обязан, но должен уметь читать макет, снимать размеры, экспортировать иконки и сверять состояния компонентов. Photoshop для фото — в Adobe; общая картина vertical software — в вводной.

Эта статья — полный тур по интерфейсу, Dev Mode, компонентам, Auto Layout, токенам, handoff в React/CSS, доступности и типичным ошибкам.

Как открыть файл и права доступа

Перейдите по ссылке от дизайнера (нужен бесплатный аккаунт Figma).
Роли:
- View — просмотр, Inspect, комментарии;
- Dev — Dev Mode (в платных планах команды);
- Edit — редко нужно разработчику.
Закрепите файл в избранное (звезда слева в навигаторе).

Официальная справка: Figma Dev Mode.

Тур по интерфейсу Figma

Элемент	Назначение для разработчика
Переключатель Design / Dev Mode	Dev Mode — свойства для кода
Zoom	100% для проверки пикселей, Fit для обзора
Present	Прототип кликов — проверка flow
Share	Ссылка, права, embed
Версии (History)	Откат и сравнение макетов

Левая панель — Layers и Pages

Pages — разделы файла: Web, Mobile, Design System, Archive.
Layers — дерево фреймов и компонентов. Имена слоёв должны быть осмысленными (Card/Header, не Frame 427).
Поиск по слоям: Ctrl+F / Cmd+F.
Иконка компонента (ромб) — instance; четыре ромба — main component.

Навигация: клик по глазу — скрыть слой; замок — блокировка (случайно не сдвинуть).

Центральный канвас

Frame — экран или блок (аналог section / контейнера).
Group — логическая группа без layout (избегайте копировать absolute из групп).
Section (новые файлы) — крупные зоны на канвасе для организации.
Rulers и guides — дизайнерские направляющие; в коде не переносятся.

Масштаб: колесо + Ctrl / Cmd — зум к курсору.

Правая панель — контекстные вкладки

В Design (режим дизайнера, если есть доступ):

Design — fill, stroke, effects, typography;
Prototype — связи экранов;
Inspect — свойства для handoff (всегда доступен).

В Dev Mode:

код CSS / iOS / Android;
расстояния между выбранными элементами;
ссылки на компоненты в design system;
Ready for dev / статусы (если команда использует).

Нижняя панель — Export

Появляется при выделении слоя с настроенным export:

форматы SVG, PNG, JPG, PDF;
пресеты @1x, @2x, @3x;
кнопка Export — скачать выбранное.

Нижний правый угол

Comments — режим комментариев (C);
Multiplayer — кто сейчас в файле;
Presentation — полноэкранный просмотр.

Каждая панель Inspect / Dev Mode — что снимать

Layout

width / height (fixed, hug, fill);
position — absolute только если явно в макете;
constraints — привязки к родителю;
Auto layout — direction, gap, padding, alignment.

Typography

font family, weight, size, line-height, letter-spacing;
paragraph spacing, alignment, decoration;
иногда variable для размера — см. токены.

Fill и Stroke

solid, gradient, image fill;
opacity на слое и на цвете отдельно;
border radius по углам (individual corners).

Effects

drop shadow → box-shadow;
inner shadow, layer blur, background blur;
проверьте, не дублируется ли тень и в CSS компонента.

Grid и constraints на фрейме

layout grid (колонки) — ориентир для CSS Grid;
column count и gutter для адаптива.

Frame, Group, Section — что в коде

Figma	HTML / CSS ориентир
Frame с Auto Layout	`display: flex` контейнер
Frame без layout, только размер	`div` с фиксированными размерами или %
Component instance	React-компонент с props
Text layer	`p`, `span`, `h1` — уточнить семантику у дизайнера
Vector / Boolean	SVG или icon component

Group без Auto Layout часто означает, что дизайнер не довёл макет до flex — спросите перед absolute.

Компоненты — глубоко

Main component и instance

Main живёт в библиотеке (часто файл Design System).
Instance на экране — ссылка на main. Изменения в main обновляют instances.
Override — локальные изменения instance (текст, цвет). В коде это props.

Именование

Хорошая схема: Category/Name/Variant

Button/Primary/Default
Button/Primary/Hover
Input/Text/Error

В React:

<Button variant="primary" state="default" />

Связь с React.

Вложенные компоненты

Кнопка может содержать instance Icon/Close. При реализации — composition:

<Button icon={<IconClose />} />

Не копируйте SVG вручную из каждого экрана — берите из библиотеки иконок проекта.

Slots (пустые фреймы)

Дизайнер оставляет пустой Auto Layout frame "Slot" — место для контента. В коде — children.

Variants — все состояния

Variant — оси свойств компонента:

State=Default | Hover | Pressed | Disabled
Size=Small | Medium | Large
Icon=Left | Right | None

Как читать панель Variants

Выделите main component.
Справа — таблица осей и значений.
Каждая ячейка — отдельный визуал. Все нужно сверить в коде.

Матрица для кнопки (пример)

State	Background	Text	Border
Default	token primary	white	none
Hover	primary-dark	white	none
Disabled	gray-200	gray-400	none
Loading	primary	spinner	none

Если в макете только Default — запросите остальные до начала вёрстки.

Boolean properties

В Figma можно включать слой иконки bool-переключателем. В коде:

<Button hasIcon={true} />

Auto Layout — теория

Auto Layout ≈ flexbox:

Figma	CSS
Horizontal	`flex-direction: row`
Vertical	`flex-direction: column`
Gap	`gap`
Padding	`padding`
Space between	`justify-content: space-between`
Hug contents	`width: fit-content` / `align-self: flex-start`
Fill container	`flex: 1`

Hug vs Fixed vs Fill

Hug — размер по контенту;
Fixed — жёсткий width/height;
Fill — растянуться в родителе (часто flex: 1).

Типичная ошибка — скопировать fixed width с кнопки, у которой на самом деле Hug.

Auto Layout — пять упражнений

Выполните в тестовом файле или мысленно на макете.

Упражнение 1. Карточка товара

Структура:

Frame Card (vertical, gap 16, padding 24)
  Image (fill width, fixed height 200)
  Row Title (horizontal, space-between)
    Text Title (hug)
    Icon Favorite
  Text Description (fill width)
  Button CTA (hug)

CSS-скелет:

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Упражнение 2. Навбар

Horizontal Auto Layout, space-between, padding 16, fill width родителя.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  width: 100%;
}

Упражнение 3. Список с разделителями

Vertical, gap 0, каждый row — horizontal padding 16, height 48, border-bottom.

Используйте gap или border на item — согласуйте с дизайнером.

Упражнение 4. Модалка

Outer frame center (constraints center), inner fixed 400px, vertical gap 24, padding 32.

Для центрирования:

.modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}

Упражнение 5. Форма с лейблами

Vertical gap 20. Каждое поле — vertical gap 8: label + input component instance.

Не задавайте margin на каждый input вручную — gap на форме.

Constraints и адаптив

Constraints — как слой ведёт себя при изменении размера родительского frame.

Constraint	Поведение	CSS-аналог
Left	прижат к левому краю	`align-self: flex-start`
Right	к правому	`margin-left: auto`
Left & Right	растягивается	`width: 100%`
Center	по центру	`margin: 0 auto`
Top / Bottom	вертикальные аналоги	flex alignment
Scale	масштаб слоя	редко в CSS 1:1

Breakpoints

Дизайнер задаёт frames: Desktop 1440, Tablet 768, Mobile 375.

Ваш план:

найти соответствующие frames в Pages;
сравнить, что меняется (колонки, скрытие, размер шрифта);
перенести в media queries.

Если только desktop — запросите mobile до сдачи.

Min / max в Auto Layout

Figma поддерживает min/max width на frame. В CSS:

.sidebar {
  min-width: 240px;
  max-width: 320px;
  flex: 1;
}

Variables и design tokens

Variables в Figma (2023+) — именованные значения цвета, числа, строки, boolean.

Коллекции

Primitives — raw palette blue-500;
Semantic — color-bg-primary, color-text-muted;
Spacing — space-4, space-8;
Typography — font-size-body.

Режимы (Modes)

Light / Dark — переключение набора значений. В коде:

:root {
  --color-bg-primary: #ffffff;
}
[data-theme="dark"] {
  --color-bg-primary: #121212;
}

Или CSS variables из токенов команды.

Как снимать токен в Dev Mode

Клик по свойству → иконка переменной → имя color/button/primary. Используйте это имя в коде, не HEX с экрана (если проект на токенах).

Экспорт токенов

Плагины: Tokens Studio, Style Dictionary pipeline. Уточните у дизайнера JSON или npm-пакет @company/design-tokens.

Dev Mode — пошаговый workflow

Откройте файл → переключите Dev Mode (верхняя панель).
Выберите frame экрана → статус Ready for dev (если команда ведёт).
Клик по элементу → правая панель:
- Box model (margin/padding визуально);
- Code → CSS, React (ограниченно), iOS, Android;
- Assets → экспорт привязанных иконок.
Measure — зажмите Alt / Option и наведите между элементами (расстояние).
Сравните с соседним состоянием (hover) через variants.
Оставьте комментарий, если расхождение с design system.
Отметьте секцию Done в Jira с ссылкой на node (Copy link to selection).

Без Dev Mode — вкладка Inspect в правой панели в Design mode даёт те же размеры и CSS.

Что не копировать слепо из Dev Mode

абсолютные position: absolute на весь экран;
font-family с несуществующим в проекте шрифтом;
тени и blur без проверки performance;
фиксированные width: 375px на production.

Handoff дизайн-системы

Структура файла DS

страница Foundations — цвета, типографика, grid;
Components — кнопки, инпуты, модалки;
Patterns — карточки, таблицы, empty states;
Templates — готовые экраны.

Чек-лист разработчика при подключении DS

Подключена библиотека (Assets → Libraries)
Имена компонентов совпадают с UI-kit в коде
Все variants перечислены в Storybook / доке
Токены в репозитории синхронизированы
Иконки — один набор (SVG sprite или React icons)

Принципы интерфейса — раздел про UI.

Расхождение макет и код

Тикет дизайнеру с скриншотом и ссылкой на node. Не подгоняйте "на глаз" без согласования — иначе DS разъедется.

От макета к React и CSS — расширенная таблица

Figma	CSS	React / notes
Auto Layout horizontal, gap 16	`display:flex; gap:16px`	`Stack direction="row" gap={16}`
Padding 24	`padding:24px`	prop `p={24}` если UI-kit
Fill #2563EB	`background:var(--color-primary)`	theme token
Text 16 / 24	`font-size:16px; line-height:24px`	Typography component
Border radius 8	`border-radius:8px`	`rounded-lg` в Tailwind
Shadow md	`box-shadow:0 4px 6px rgba(...)`	проверить token
Opacity 60%	`opacity:0.6`	лучше отдельный token disabled
Fixed 320px	`width:320px`	на mobile часто `100%`
Hug	`width:fit-content`	`display:inline-flex` для кнопок
Fill container	`flex:1`	`flexGrow={1}`
Grid 12 columns	`grid-template-columns: repeat(12, 1fr)`	container + col span
Sticky header	constraints top	`position:sticky; top:0`

Пример компонента кнопки

Макет: Button/Primary/Default, padding 12 24, gap 8, radius 8, Auto Layout horizontal center.

export function Button({ children, icon, variant = 'primary' }) {
  return (
    <button className={`btn btn--${variant}`}>
      {icon && <span className="btn__icon">{icon}</span>}
      {children}
    </button>
  );
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

Tailwind-маппинг (если проект на Tailwind)

Сверьте tailwind.config с tokens — не угадывайте класс.

Дизайнер может отмечать:

focus order — порядок табуляции;
contrast — плагины Stark, A11y;
touch target минимум 44×44 pt на mobile.

Ваша проверка

контраст текста и фона ≥ 4.5:1 для body (WCAG AA);
не только цвет для состояния error — иконка или текст;
focus ring на интерактивных элементах в макете;
alt text для meaningful images — в комментарии или спецификации.

Подробнее — интерфейс и UX, HTML семантика.

Focus в коде

Если в макете нет focus — добавьте по DS и согласуйте:

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

Плагины для разработчиков

Плагин	Зачем
Stark	Контраст, симуляция дальтонизма
Content Reel	Тестовые данные длинных имён
Measure	Расстояния (дубль встроенного Alt)
Tokens Studio	Экспорт variables в JSON
Anima / Locofy	Генерация кода — проверять вручную
GitHub / Jira	Линки задач к frames
Redlines	Подписи размеров на макете
Iconify	Поиск иконок

Не устанавливайте плагины с правами записи без доверия. Для чтения достаточно встроенного Inspect.

Комментарии и collaboration

C — режим комментария, клик на canvas;
@имя — упоминание дизайнера;
прикрепите screenshot области (Figma делает автоматически);
статусы: Open / Resolved — закрывайте после фикса в коде или макете;
не правьте макет сами без договорённости — только комментарии.

Шаблон комментария:

@designer На mobile 375 кнопка обрезается — нет padding у родителя. Node: Header/Actions. Предлагаю padding 16 по DS.

История версий (Version history)

Ctrl+Alt+Version / меню File → Show version history;
именованные версии перед релизом ("Sprint 42 handoff");
сравните, если дизайнер обновил макет mid-sprint;
не копируйте старые размеры из кэша в голове — перепроверяйте node.

При конфликте "вчера было 16px, сегодня 24" — смотрите history и спрашивайте, что актуально.

Mobile handoff

Отдельные frames

Ищите 375, 390, 360 в названии. Сверьте:

safe area (notch) — отступ сверху;
bottom bar height;
font-size часто меньше desktop;
touch targets 44px min.

Экспорт @3x

Растровые ассеты для iOS — @3x PNG; Android — mdpi/hdpi/xhdpi или vector.

React Native / Flutter

Dev Mode даёт iOS/Android snippets. Компоненты навигации — native patterns, не всегда 1:1 с web CSS.

Экспорт ассетов — детально

Выделите слой → Export внизу справа → +.
Форматы:
- SVG — иконки, простая векторная графика;
- PNG @2x — растровые картинки, сложные тени;
- JPG — фото контент.
Имена: icon-close.svg, illustration-empty-state.png.
Export settings на component — все instances наследуют.

SVG cleanup

Откройте SVG в редакторе: уберите лишние id, объедините path если нужно. Или SVGO в CI.

Спрайты

Если дизайнер дал sheet — попросите отдельные файлы или используйте svg-sprite. Уточните иконочный набор один раз в начале проекта.

Десять частых ошибок и исправления

1. Экспорт всего экрана одним PNG

Проблема: нельзя адаптировать, плохой текст.

Исправление: верстать по слоям; PNG только для фото и сложного арта.

2. Игнор variants hover/disabled/error

Проблема: в проде кнопка не меняется при disabled.

Исправление: матрица states в начале задачи; Storybook stories на каждый variant.

3. Копирование absolute с full-page frame

Проблема: ломается адаптив.

Исправление: искать Auto Layout родителя; переписать на flex/grid.

4. Жёсткие px на mobile

Проблема: горизонтальный скролл на 320px.

Исправление: max-width: 100%, %, clamp(); сверить mobile frame.

5. Шрифт из макета не подключён

Проблема: fallback ломает метрики.

Исправление: @font-face или Google Fonts; субпиксельные отличия — обсудить с дизайнером.

6. HEX вместо токенов

Проблема: dark mode не работает.

Исправление: var(--color-text-primary) по имени из Variables.

7. Иконки разного stroke width

Проблема: визуальный шум.

Исправление: один набор из DS; не миксовать экспорт с разных экранов.

8. Не прочитаны комментарии на макете

Проблема: сделали "не так, как договорились".

Исправление: перед стартом — фильтр Comments Open на странице.

9. Blur на больших областях

Проблема: лаги в браузере.

Исправление: упростить blur, backdrop-filter с осторожностью, fallback.

10. Подход как в Photoshop

Проблема: ручная правка каждого слоя, нет компонентов.

Исправление: мыслить компонентами и tokens; правки через дизайнера в main library.

Figma, Photoshop и код — когда что

Инструмент	Когда использовать
Figma	UI, прототипы, handoff
Photoshop	Фото, ретушь, сложный растр (справочник)
Код	Источник правды в production

Что снимать из макета — чек-лист

Отступы, шрифты, цвета — Inspect или Dev Mode
Иконки — Export SVG
Состояния кнопок — все variants
Адаптив — frames desktop/tablet/mobile
Токены — имена variables, не только HEX
Focus, error, empty states
Комментарии Open просмотрены
Ссылка на node в тикете

Меньше вопросов "какой там padding?" в чате — быстрее вёрстка.

Горячие клавиши для разработчика

Действие	Windows / Linux	macOS
Увеличить зум	`Ctrl + +`	`Cmd + +`
Measure distance	`Alt` + hover	`Option` + hover
Комментарий	`C`	`C`
Поиск слоя	`Ctrl + F`	`Cmd + F`
Copy link to selection	`Ctrl + L`	`Cmd + L`
Toggle grid	`Ctrl + '`	`Cmd + '`
Dev Mode	`Shift + D`	`Shift + D`

Handoff таблиц и форм

Таблица

header row — отдельный component с bold text;
zebra striping — уточнить token фона;
сортировка и фильтры — в макете иконки или в спецификации;
empty state — отдельный frame, не пустой скрин.

В коде — семантический <table> или UI-kit DataGrid. HTML таблицы.

Форма

label всегда видим, не только placeholder;
error text и border color из variants Input/Error;
расстояние label–input из Auto Layout gap;
submit disabled state — variant кнопки.

Валидация

Если в макете нет error states — блокер handoff. Запросите до начала вёрстки.

Прототипы — как читать flow

Вкладка Prototype у выбранного frame.
Синие стрелки — переходы по клику или hover.
Present (▶) — полноэкранный режим кликов.
Запишите список экранов и переходов для роутера:

/login → /dashboard (click Submit)
/dashboard → /settings (click Avatar)

Роуты в веб-разработке согласуйте с backend API.

Dark mode — от Variables до CSS

В Figma переключите mode Dark на корневом frame.
Снимите пары токенов: bg-primary light #FFF / dark #121212.
В коде:

:root {
  --bg-primary: #ffffff;
  --text-primary: #111827;
}
[data-theme="dark"] {
  --bg-primary: #121212;
  --text-primary: #f3f4f6;
}

React: ThemeProvider переключает data-theme на html.

Проверьте контраст в обоих modes плагином Stark.

Интеграция с Jira и GitHub

плагин Jira — привязка frame к тикету DEV-123;
в описании тикета — Copy link to selection;
статус "Design ready" в workflow;
при PR — скриншот результата рядом с node link для дизайн-ревью.

Меньше расхождений между макетом mid-sprint и продакшеном.

FAQ — часто задаваемые вопросы

Вопрос. Нужен ли платный Figma разработчику?

Ответ. Бесплатного аккаунта хватит для просмотра и Inspect. Dev Mode зависит от тарифа команды — попросите dev seat у дизайнера.

Вопрос. Dev Mode выдал странный CSS. Верить?

Ответ. Как подсказку, не истину. Проверяйте flex, шрифты и токены проекта.

Вопрос. Как скопировать ссылку на конкретный элемент?

Ответ. Правый клик → Copy link to selection. Вставьте в Jira/Slack.

Вопрос. Component detached — что это?

Ответ. Instance отвязали от main. Риск рассинхрона. Попросите вернуть instance или обновить main.

Вопрос. Auto Layout не видно, но отступы ровные.

Ответ. Возможно ручные координаты. Включите outline и спросите дизайнера про flex.

Вопрос. Цвет в формате RGBA 0–1, а не 0–255.

Ответ. Figma иногда показывает доли. Умножьте на 255 или копируйте HEX из Inspect.

Вопрос. Как узнать шрифт, если текст в кривых?

Ответ. Шрифт не снять — нужен живой text layer или спецификация от дизайнера.

Вопрос. Можно ли править макет самому?

Ответ. Только по договорённости. Иначе — комментарии, не правки чужого файла.

Вопрос. FigJam и Figma Design — одно и то же?

Ответ. FigJam — доски. Handoff UI — в Figma Design files.

Вопрос. Prototype click не совпадает с роутингом в приложении.

Ответ. Прототип — flow для UX. Роуты согласуйте отдельно с PM/дизайнером.

Вопрос. Как экспортировать все иконки разом?

Ответ. Выделить frame иконок → Export, или плагин Batch Export. Согласуйте имена.

Вопрос. Variable mode Dark не переключается в Inspect.

Ответ. Переключите mode в правой панели на frame или в настройках просмотра.

Вопрос. Расстояние 15px между элементами — ошибка?

Ответ. Может быть из сетки 8px с исключением. Уточните: token space-4 (16) или точно 15.

Вопрос. Image fill — как экспортировать картинку?

Ответ. Выделить слой с fill → Export. Или попросить оригинал из DAM, не сжатый из макета.

Вопрос. Нет mobile макета — начинать вёрстку?

Ответ. Лучше запросить mobile frame или правила (stack, hide sidebar). Иначе переделки.

Вопрос. Anima сгенерировала React — использовать?

Ответ. Как черновик. Рефакторить под DS, accessibility и структуру проекта.

Вопрос. Как синхронизировать Figma с Storybook?

Ответ. Плагины Chromatic, Storybook Connect; вручную — одинаковые имена variants и props.

Как открыть файл и права доступа​

Тур по интерфейсу Figma​

Верхняя панель (Toolbar)​

Левая панель — Layers и Pages​

Центральный канвас​

Правая панель — контекстные вкладки​

Нижняя панель — Export​

Нижний правый угол​

Каждая панель Inspect / Dev Mode — что снимать​

Layout​

Typography​

Fill и Stroke​

Effects​

Grid и constraints на фрейме​

Frame, Group, Section — что в коде​

Компоненты — глубоко​

Main component и instance​

Именование​

Вложенные компоненты​

Slots (пустые фреймы)​

Variants — все состояния​

Как читать панель Variants​

Матрица для кнопки (пример)​

Boolean properties​

Auto Layout — теория​

Hug vs Fixed vs Fill​

Auto Layout — пять упражнений​

Упражнение 1. Карточка товара​

Упражнение 2. Навбар​

Упражнение 3. Список с разделителями​

Упражнение 4. Модалка​

Упражнение 5. Форма с лейблами​

Constraints и адаптив​

Breakpoints​

Min / max в Auto Layout​

Variables и design tokens​

Коллекции​

Режимы (Modes)​

Как снимать токен в Dev Mode​

Экспорт токенов​

Dev Mode — пошаговый workflow​

Что не копировать слепо из Dev Mode​

Handoff дизайн-системы​

Структура файла DS​

Чек-лист разработчика при подключении DS​

Расхождение макет и код​

От макета к React и CSS — расширенная таблица​

Пример компонента кнопки​

Tailwind-маппинг (если проект на Tailwind)​

Доступность (a11y) в Figma​

Ваша проверка​

Focus в коде​

Плагины для разработчиков​

Комментарии и collaboration​

История версий (Version history)​

Mobile handoff​

Отдельные frames​

Экспорт @3x​

React Native / Flutter​

Экспорт ассетов — детально​

SVG cleanup​

Спрайты​

Десять частых ошибок и исправления​

1. Экспорт всего экрана одним PNG​

2. Игнор variants hover/disabled/error​

3. Копирование absolute с full-page frame​

4. Жёсткие px на mobile​

5. Шрифт из макета не подключён​

6. HEX вместо токенов​

7. Иконки разного stroke width​

8. Не прочитаны комментарии на макете​

9. Blur на больших областях​

10. Подход как в Photoshop​

Figma, Photoshop и код — когда что​

Что снимать из макета — чек-лист​

Горячие клавиши для разработчика​

Handoff таблиц и форм​

Таблица​

Форма​

Валидация​