Передача дизайна разработчикам через Dev Mode в Figma

Как устроена передача через Dev Mode

Dev Mode — отдельный режим Figma для разработчиков. Вместо инструментов редактирования в нём панель инспектора: размеры, отступы, типографика, цвета, фрагменты кода и ассеты. Дизайнер отмечает готовые части как Ready for dev, разработчик открывает их и забирает всё нужное.

Но Dev Mode показывает только то, что есть в файле. Если слои называются «Frame 2481», отступы случайные, а состояний нет, разработчикам всё равно придётся переспрашивать. Поэтому основная часть хорошей передачи — это подготовка файла.

Учтите, что доступ к Dev Mode зависит от тарифа Figma и типа места в команде.

Подготовка файла: чек-лист

1. Структура

• Отдельные страницы для работы в процессе, готовых экранов и архива.
• Экраны одного сценария сгруппированы в секции — именно их вы будете отмечать как готовые.
• Фреймы названы по экрану и состоянию: Checkout / Payment / Error.

2. Нейминг

• Никаких «Rectangle 12» на значимых слоях.
• Компоненты и свойства вариантов названы так же, как в коде:

Button
  variant = primary | secondary | tertiary
  size    = sm | md | lg
  state   = default | hover | focus | disabled | loading

Когда названия совпадают, разработчик сразу сопоставляет макет с существующими компонентами.

3. Отступы и раскладка

• Собирайте на auto layout: тогда padding и gap читаются точными значениями, а не угадываются по расстоянию в пикселях.
• Используйте шкалу отступов (например, 4, 8, 12, 16, 24, 32) и избегайте случайных значений вроде 13 или 27.
• Задайте правила ресайза (fill, hug, fixed), чтобы было понятно, как элементы растягиваются.
• Покажите ключевые брейкпоинты, если раскладка меняется между мобильной и десктопной версией.

4. Токены

Используйте переменные и стили для цветов, типографики, скруглений и отступов. Тогда в Dev Mode разработчик видит имя токена вроде color/text/primary, а не голый hex, и может использовать тот же токен в коде.

5. Состояния

Для компонентов: default, hover, focus, pressed, disabled, loading. Для экранов: пусто, загрузка, ошибка, успех, длинный текст, сообщения валидации, нет прав. Недостающие состояния — самая частая причина вопросов туда-обратно.

6. Экспорт

• Отметьте иконки, логотипы и изображения как экспортируемые в нужном формате: SVG для иконок и векторной графики, растровые форматы в нужных масштабах для фото.
• Дайте экспортируемым слоям понятные имена — они станут именами файлов.
• Уберите скрытые и неиспользуемые слои из групп экспорта.

7. Аннотации

Опишите то, чего не видно на статичном фрейме:

• взаимодействия и переходы;
• длительность и кривые анимаций;
• правила валидации и ограничения (максимальная длина, допустимые форматы);
• доступность: порядок фокуса, подписи для кнопок-иконок, alt-тексты;
• крайние случаи: что будет с очень длинным именем или нулём элементов.

Dev Mode поддерживает аннотации и измерения, привязанные к элементам, поэтому заметки остаются рядом с тем, что они описывают.

Как разработчики работают в Dev Mode

1. Открывают файл и переключаются в Dev Mode, затем фильтруют секции со статусом Ready for dev.
2. Выделяют элемент — панель инспектора показывает размер, padding, gap, типографику и цвета с именами токенов.
3. Измеряют расстояния, наводя курсор на соседние элементы при выделенном.
4. Читают фрагменты кода как справку. Они показывают значения, но структура реального кода должна следовать вашим компонентам и соглашениям — не копируйте их вслепую.
5. Скачивают ассеты из раздела экспорта в панели.
6. Читают аннотации и ветку комментариев.
7. Используют сравнение изменений, чтобы увидеть, что правили после отметки «готово».

Частые ошибки

• Секцию отметили готовой, а потом тихо её поменяли.
• Отвязанные инстансы компонентов, которые уже не совпадают с библиотекой.
• Значения вне шкалы отступов и hex-цвета вне палитры.
• Нарисован только «счастливый путь», без ошибок и пустых состояний.
• Несколько устаревших версий экрана рядом без пометок.