Code to Canvas с Claude Code — выступление Figma

О чём видео

Официальная демонстрация Figma процесса Code to Canvas — как Claude Code через MCP превращает продакшн-код в редактируемые Figma-файлы. Демо охватывает обратную сторону типичного пайплайна «дизайн в код»: начиная с работающего приложения, извлекая структуру компонентов и импортируя её в Figma для редактирования.

Для кого

Дизайн-инженеры и продуктовые дизайнеры в командах, где кодовая база ушла далеко от того, что отражают Figma-файлы. Актуально для команд с легаси-приложениями, где нет точного Figma-источника истины.

Ключевые выводы

1. Направление код-в-дизайн решает реальную проблему синхронизации. Большинство команд испытывает дрейф дизайн-файлов: код эволюционирует, а Figma-файлы остаются замороженными.

2. MCP — слой подключения. Figma MCP сервер позволяет Claude Code программно читать и писать в Figma-файлы с пониманием структуры компонентов, слоёв и свойств.

3. Дизайнеры могут редактировать состояние живого кода в Figma. После импорта дизайнеры вносят изменения знакомыми Figma-инструментами, затем отправляют правки обратно в код.

4. Процесс зависит от структуры кодовой базы. Проекты с чёткими границами компонентов и последовательным именованием дают лучшие результаты импорта.

Стоит смотреть, если…

Вы хотите понять официальную MCP-интеграцию Figma с Claude Code и оценить, может ли она закрыть разрыв между вашим продакшн-кодом и Figma-файлами.