Figma Dev Mode: передача макета разработчику — статусы, инспект и код
Передача макета редко ломается на «красиво нарисовано». Она ломается на мелочах: какая версия актуальна, где отступы, что делать с иконкой, почему код в Inspect не совпадает с дизайн-системой.
Dev Mode — это отдельный режим Figma для разработчика. Разберём, что он даёт и в каком порядке им пользоваться.
Что такое Dev Mode и кому он доступен
Dev Mode — интерфейс для инспекции и навигации по макету. Включается в любом файле Figma Design:
- Откройте файл.
- Нажмите переключатель Dev Mode на панели инструментов или Shift + D.
- Повторное нажатие возвращает в Design mode.
Важное ограничение из документации: функция доступна на платных планах и требует места Full или Dev. Если ссылку открывает человек с другим местом, увидит обычный просмотр.
Голый Inspect-панель при этом никуда не делся: базовые размеры и стили видны и без Dev Mode, но весь сценарий со статусами и сниппетами кода — это уже Dev Mode.
Шаг 1. Отметить, что готово к разработке
Главная идея — не «весь файл готов», а конкретные объекты. Документация перечисляет, что можно помечать:
- секции;
- фреймы;
- компоненты;
- инстансы (при отметке в Dev Mode).
Порядок:
- Переключитесь в Dev Mode.
- Выберите фрейм, компонент или секцию.
- Нажмите Mark as ready for dev — на панели инструментов, а у компонентов кнопка над правым верхним углом.
После отметки всем, кто ранее открывал файл в Dev Mode, приходит уведомление. Это и есть замена сообщению «я обновил макет, посмотри».
Статусы
В Dev Mode два статуса:
- Ready for dev — доступен на всех платных планах;
- Completed — только Organization и Enterprise.
Completed полезен, когда разработка реально закончена: дизайнер видит, что макет не завис в вечной готовности.
Шаг 2. Проверить список готового
В левой панели Dev Mode есть представление Ready for dev. Оно:
- показывает все объекты с dev-статусом в одном списке;
- выводит время последнего изменения;
- появляется только если хотя бы один объект отмечен.
Для большого файла это единственный способ не искать нужный экран по канвасу. Если список пуст — никто ничего не отмечал, и разработчик снова пойдёт спрашивать в чат.
Шаг 3. Инспекция: что смотреть в первую очередь
В панели Inspect видно:
- имя слоя и его тип (компонент, инстанс, фрейм, текст);
- дату последнего обновления слоя;
- размеры, отступы, типографику, заливки, обводки, эффекты;
- свойства компонента и переменные.
Практический порядок чтения:
- Тип слоя — это компонент из библиотеки или отрисованный вручную прямоугольник?
- Свойства компонента — какие варианты включены в этом инстансе.
- Отступы и размеры — сняты ли они с auto layout (тогда они «живые») или набиты вручную.
- Переменные — используются ли токены или в макет залит произвольный цвет.
Последний пункт важнее, чем кажется: если в макете стоит hex-цвет вместо переменной, разработчик либо нарушит дизайн-систему, либо потратит время на сверку.
Шаг 4. Код и сниппеты
В разделе Code панели Inspect Figma генерирует сниппеты для выбранного слоя. Язык и единицы выбираются в правом верхнем углу секции Code; внизу списка — настройки под конкретный язык, например единицы измерения для CSS.
Что важно понимать:
- Сниппет — отправная точка, а не финальный код.
- Figma генерирует код на основе свойств выбранного слоя; при изменении выделения он меняется.
- Расширять вывод можно через codegen-плагины.
Если в проекте принят свой стек, честнее договориться: разработчик копирует размеры и структуру, а код пишет по своим компонентам. Тогда сниппеты экономят время на измерениях, а не создают иллюзию готового кода.
Шаг 5. Сравнить изменения
Если фрейм менялся после того, как вы его смотрели, в Inspect появляется ссылка Compare changes. Она открывает историю версий фрейма и позволяет сравнить текущую версию с предыдущей.
Также можно сравнить:
- отсоединённые компоненты;
- инстансы с оверрайдами против базового компонента;
- два компонента между собой — выберите один, зажмите Shift и кликните второй.
Это отвечает на вопрос «что именно поменялось после правок», не заставляя листать историю файла целиком.
Шаг 6. Focus view
Focus view показывает один макет, отмеченный как готовый, во весь экран: инструменты Dev Mode, вкладки Inspect и Plugins, версию истории именно для этого дизайна и интерактивные контролы, позволяющие временно изменить размер или режим переменных, не трогая файл.
Доступен на Organization и Enterprise. Для ежедневной работы с одним макетом это удобнее, чем прыгать по канвасу.
Порядок передачи: короткий регламент
- Дизайнер отмечает конкретные фреймы как Ready for dev.
- В комментариях к статусу пишет, что изменилось.
- Разработчик открывает Ready for dev, а не весь файл.
- Спорные места проверяются через Compare changes.
- После реализации дизайнер или разработчик ставит Completed (если план позволяет).
Частые ошибки
Отмечать весь файл. Статус на огромной странице бесполезен: непонятно, что именно готово.
Молчать об изменениях. Повторная отметка статуса после правок даёт уведомление; тихая правка — нет.
Ждать готового кода. Сниппеты отражают свойства слоя, а не архитектуру приложения.
Игнорировать переменные. Hex вместо токена превращает передачу в переписывание цветов.
Работать без доступа Dev. Если у разработчика нет нужного места, он не увидит Dev Mode — это проверяется до старта, а не в день сдачи.
FAQ
Нужен ли платный план для Dev Mode?
Да. В документации указано, что режим доступен на платных планах и требует места Full или Dev.
Чем Dev Mode отличается от обычного Inspect?
Обычная панель показывает свойства слоя. Dev Mode добавляет статусы готовности, представление Ready for dev, сниппеты кода с выбором языка, сравнение версий и фокус-вью.
Что видит разработчик без Dev Mode?
Просмотр файла и базовую информацию о слоях. Статусов и генерации кода у него не будет.
Можно ли отметить инстанс, а не компонент?
Да, в Dev Mode для инстансов доступна отметка готовности.
Видно ли, что макет изменился после передачи?
Да: у изменённых фреймов появляется Compare changes, а у ранее открывавших файл — уведомление после смены статуса.