Dev Mode: передача в разработку

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

Дизайн закончен — но как передать его в код без сотни вопросов «а какой тут отступ»? Dev Mode отвечает на них сам.

Dev Mode — финал дизайн-процесса: режим, где разработчик инспектирует макет, считывает размеры и значения, получает CSS и аннотации. Он сближает мир дизайна (слои, фреймы) с миром кода (токены, отступы, единицы).

Как войти в Dev Mode

1. Нажмите кнопку Dev Mode в правом верхнем углу или Shift+D.
2. Интерфейс перестроится: левая панель покажет секции, помеченные «готово к разработке».
3. Правая панель станет Inspect-панелью с кодом и значениями.

Инспекция размеров и CSS

Выделите любой элемент в Dev Mode:

• Увидите его размеры, отступы, цвета, скругления.
• В секции Code Figma сгенерирует CSS (или другой язык/единицы на выбор).
• Можно переключать единицы (px, rem) под свою кодовую базу.

Наводите на соседние элементы при выделенном — Figma покажет расстояния между ними, как линейка.

Inspect-панель в Dev Mode

  Выбран: Button
  +-- Size:    160 x 48
  +-- Padding: 12 / 24
  +-- Radius:  8
  +-- Fill:    accent/brand  (#2563EB)
  +-- Code:    CSS / iOS / Android (на выбор)

Аннотации и готовность

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

Code Connect и переменные

Продвинутая функция Code Connect связывает компоненты Figma с реальными компонентами кода из репозитория, чтобы разработчик видел готовый сниппет своего фреймворка. А переменные в Dev Mode показываются с их именами токенов — разработчик видит accent/brand, а не голый HEX.

Сравнение версий и ресурсы для разработки

Dev Mode умеет показывать что изменилось между версиями макета — разработчик видит, какие элементы поменялись с прошлой проверки, и не переделывает уже готовое. В секции Dev resources к фрейму можно прикрепить ссылки: на тикет в Jira, на ветку в Git, на страницу в Storybook. Так весь контекст задачи собран в одном месте, рядом с дизайном.

Экспорт ассетов тоже живёт здесь. Разработчик выделяет иконку или картинку и в секции Export скачивает её в нужном формате (SVG, PNG, PDF) и масштабе (1x, 2x, 3x для разных плотностей экрана). Дизайнер заранее помечает экспортируемые слои, чтобы ничего не пришлось вырезать вручную.

Почему чистый макет так важен для хендоффа

Качество Dev Mode напрямую зависит от того, как собран макет. Если кнопка сделана на авто-лейауте с осмысленными отступами и привязанными переменными — сгенерированный код будет аккуратным, отступы читаемыми, цвета придут как токены accent/brand. Если же это набор случайно расставленных прямоугольников с дробными координатами — inspect выдаст мусор, а разработчик завалит вас вопросами. Поэтому весь курс вёл к этому: фреймы, авто-лейаут, компоненты, переменные нужны не ради красоты в Figma, а ради чистой, понятной передачи в код.

Горячие клавиши

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

• Передают неструктурированный макет. Без авто-лейаута и осмысленных имён сгенерированный код будет мусорным. Чистый макет = чистый inspect.
• Не помечают готовность. Разработчик не знает, какие секции финальны. Используйте Ready for dev.
• Считают CSS из Dev Mode готовым кодом. Это подсказка значений, а не production-код. Реальную вёрстку пишет разработчик.

Совет профи: дизайн заканчивается передачей, а не картинкой

Многие новички считают работу законченной, когда макет выглядит красиво. Но настоящая работа дизайнера продукта заканчивается, когда дизайн аккуратно передан в разработку и корректно воплощён в коде. Dev Mode — финальный мост, и его качество зависит от всего, что было до: фреймов, авто-лейаута, компонентов, переменных, осмысленных имён. Чистый макет даёт чистый inspect, понятные отступы и токены вместо голых чисел. Помечайте секции Ready for dev, добавляйте аннотации к неочевидным местам, прикрепляйте ссылки на тикеты. Относитесь к разработчику как к главному «пользователю» вашего файла. Тогда передача проходит без сотни вопросов, а ваш дизайн доходит до людей таким, каким вы его задумали. На этом круг замыкается: красивый макет — лишь половина дела, вторая половина — грамотный хендофф.

Чек-лист

• Вошёл в Dev Mode по Shift+D.
• Считал размеры, отступы и CSS элемента.
• Понял роль аннотаций и Ready for dev.
• Знаю про Code Connect и токены-переменные.

Итоги. Dev Mode — мост между дизайном и кодом: инспекция размеров и CSS, аннотации, метки готовности, Code Connect и токены. Качество передачи зависит от чистоты макета. На этом курс завершён: вы прошли путь от пустого холста до дизайн-системы и грамотного хендоффа. Поздравляю — теперь вы умеете работать в Figma.