Figma Dev Mode и Code Connect отвечают на вопрос «как разработчику перейти от макета к коду?». С этим вопросом они помогают. На другой вопрос они не отвечают: совпадает ли выпущенный код с дизайном? В этой заметке мы разводим два вопроса. Покажем, что делает каждая функция по документации самой Figma и где разрыв остаётся открытым.
Коротко
- Dev Mode показывает файл Figma глазами разработчика. Он есть на всех платных тарифах, нужен Full seat или Dev seat (Figma Help Center).
- Code Connect показывает в Dev Mode настоящий код ваших компонентов вместо сгенерированных сниппетов. Для него нужен тариф Organization или Enterprise (Figma Help Center).
- Обе функции работают при передаче дизайна в разработку, от макета к коду. В документации ни одной из них нет проверки того, что ушло в продакшен.
- Оставьте их для передачи дизайна в разработку и добавьте проверку, которая сравнивает выпущенный код с дизайн-системой.
Что решает Dev Mode
По словам Figma, Dev Mode даёт разработчикам «всё, что нужно, чтобы ориентироваться в дизайн-файлах и превращать дизайн в код» (Guide to Dev Mode). Там же перечислено, что разработчики в нём делают. Они изучают макеты, сравнивают версии фреймов и смотрят макеты с пометкой «готово к разработке». Ещё они разбирают варианты компонентов, не редактируя файл, и связывают макеты с задачами, документацией и компонентами в коде.
Dev Mode есть на всех платных тарифах, нужен Full seat или Dev seat. Это стандартный режим разработчика в Figma.
Что добавляет Code Connect
Без настройки Dev Mode показывает код, который Figma генерирует из слоя. С Code Connect он «будет показывать сниппеты кода из вашей дизайн-системы, как в продакшене, вместо автоматически сгенерированных примеров» (GitHub). Figma называет Code Connect «мостом между вашей кодовой базой и Dev Mode в Figma, который напрямую связывает компоненты в репозиториях с компонентами в дизайн-файлах» (Code Connect). Выберите кнопку в Figma, и разработчик увидит <Button variant="primary"> из вашей библиотеки, а не стопку CSS.
Несколько фактов, от которых зависит внедрение:
Последняя строка важна, если вы настроили Code Connect давно. Парсеры для отдельных фреймворков «больше не будут получать обновления и поддержку», поэтому старые конфигурации стоит перенести на файлы шаблонов.
Code Connect также питает MCP-сервер Figma, через который ИИ-агенты читают макеты. Удалённый сервер https://mcp.figma.com/mcp доступен на любом тарифе и с любым seat. Руководство по MCP связывает его с Code Connect: «Повышайте качество результата, переиспользуя свои настоящие компоненты» (Figma MCP server).
Что они решают: сравнение
Первые три строки про передачу дизайна в разработку: дизайн движется к коду. Последние три про продакшен, и ни одна страница Figma об этих функциях не обещает его проверять.
Где разрыв остаётся открытым
Code Connect описывает, каким код должен быть. Каким код стал, он не видит.
- Привязка обещает, но не проверяет. Запись Code Connect говорит: «эта кнопка из Figma соответствует
<Button>». Разработчик всё равно может выпустить локальныйSaveButtonс HEX-цветом, и Figma об этом не узнает. - Токены расходятся отдельно. Переменная в Figma меняется, а токен в коде хранит старое значение, пока его кто-нибудь не экспортирует. Dev Mode показывает новое значение, продакшен живёт со старым. Это расхождение дизайн-системы в самом простом виде.
- ИИ-агенты расширяют разрыв. Агент читает макет через MCP и может переиспользовать ваши компоненты, если привязка есть. Но что он написал на самом деле, никто не проверяет. Поэтому ваш ИИ-агент не знает вашу дизайн-систему, пока результат ничем не проверен.
Как использовать их вместе
- Смотрите макеты в Dev Mode. Он есть на любом платном тарифе.
- Добавьте Code Connect для ключевых компонентов, если у вас Organization или Enterprise. Начните с нескольких компонентов, которые разработчики ищут чаще всего, и настройте их через файлы шаблонов.
- Проверяйте продакшен отдельно. Сравнивайте значения токенов в коде с Figma и ищите в коде обходы системы: зашитые цвета, и пересобранные компоненты. Запускайте проверку на каждый pull request, чтобы расхождение было видно, пока оно маленькое.
Место FISYCO
Мы делаем FISYCO для третьего шага. Он сравнивает ваши библиотеки в Figma с кодом в репозитории и находит расхождения и обходы токенов и компонентов. Изменения токенов и ассетов он доставляет pull request'ами. FISYCO работает рядом с Dev Mode и Code Connect и не заменяет их. Они говорят разработчикам, что строить, а FISYCO показывает, совпадает ли выпущенный код с дизайном.
Документация Figma цитируется по состоянию на 30 сентября 2026 года.
