Figma и Anthropic запустили функцию Code to Canvas, которая конвертирует рабочий код из Claude Code в полностью редактируемые дизайны внутри Figma. Офигенная фича и такой мостик между AI-кодингом и традиционным дизайн-процессом, анонсированный 16-17 февраля 2026 года (то есть все уже работает, можно пробовать).
Я подключил и след постом покажу, что получается. А вот зачем эта фича в принципе нужна:
1. Командная работа. Обычно разработчик держит код у себя, а дизайнер видит только скриншоты. Теперь код мгновенно становится макетом в Figma. Вся команда может зайти, покрутить элементы, поправить текст и согласовать визуал до финальной верстки.
2. Можно все двигать руками, а не кодом. AI выдал базовый интерфейс. Вместо того чтобы просить его «подвинь кнопку» 10 раз, вы просто перекидываете это в Figma и сами за минуту делаете 5 вариантов компоновки. AI строит фундамент, вы наводите красоту.
3. Можно вернуть дизайн в Claude Code одной кнопкой. Поправили дизайн руками в Figma? Скидываете ссылку на фрейм обратно в Claude, и он обновляет код под правки. Дизайн и код теперь синхронизированы.
Как настроить за 3 минуты
Вам нужен Figma Desktop App и аккаунт Dev Seat в фигме (20 баксов/мес), и доступ к Claude Code.
1. В Figma надо нажать `Shift+D` (перевести в Dev Mode), найти раздел MCP server и нажать Enable.
2. В терминале ввести команду:
`claude mcp add --transport http figma https://mcp.figma.com/mcp`
Или, если используете не в терминале, просто попросить Claude Code помочь с настройкой (он справится)
3. В Claude напишите `/mcp` и подтвердите подключение.
Как использовать:
Пишете в Claude: "Сделай дашборд для CRM" (или "карточки с прогнозами экспертов про AGI", скину след постом, что у меня из этого вышло). Он пишет код.
Пишете "Send to Figma".
Магия — через 3 секунды у вас в файле лежит редактируемый макет.
В общем, теперь можно генерировать целые интерфейсы и заниматься только арт-дирекшеном (aka двигать квадратики в фигме).
Инструкция от Figma | Анонс запуска