Добавить в корзинуПозвонить
Найти в Дзене
Product Games

Из Claude Code в Figma

Еще один шаг в сторону более мягкой коллаборации между дизайнером и продактом, который билдит прототипы с LLM. Теперь прототипы, созданные в Claude Code, можно перемещать в Figma для дальнейшей командной работы. Первоисточник: https://www.figma.com/blog/introducing-claude-code-to-figma/ Инструкция на русском: 1. Подключение Связываете Claude Code с вашим аккаунтом Figma. Для этого используется Figma MCP server. Это дает нейросети официальное разрешение заходить в ваши дизайн-файлы. 2. Запуск интерфейса Запускаете свой проект локально или открываете нужную страницу в браузере. Claude должен видеть живой работающий код, чтобы считать его структуру, стили и данные. 3. Команда на захват В терминале Claude Code вы просто пишете текстом: «Перенеси этот экран в Figma». - ИИ сканирует код страницы. - Превращает HTML/CSS в понятный для Figma формат. - Копирует результат в буфер обмена или отправляет напрямую в открытый файл. 4. Работа на холсте Вы переходите в Figma и вставляете резуль

Из Claude Code в Figma

Еще один шаг в сторону более мягкой коллаборации между дизайнером и продактом, который билдит прототипы с LLM. Теперь прототипы, созданные в Claude Code, можно перемещать в Figma для дальнейшей командной работы.

Первоисточник: https://www.figma.com/blog/introducing-claude-code-to-figma/

Инструкция на русском:

1. Подключение

Связываете Claude Code с вашим аккаунтом Figma. Для этого используется Figma MCP server. Это дает нейросети официальное разрешение заходить в ваши дизайн-файлы.

2. Запуск интерфейса

Запускаете свой проект локально или открываете нужную страницу в браузере. Claude должен видеть живой работающий код, чтобы считать его структуру, стили и данные.

3. Команда на захват

В терминале Claude Code вы просто пишете текстом: «Перенеси этот экран в Figma».

- ИИ сканирует код страницы.

- Превращает HTML/CSS в понятный для Figma формат.

- Копирует результат в буфер обмена или отправляет напрямую в открытый файл.

4. Работа на холсте

Вы переходите в Figma и вставляете результат.

Вместо плоской картинки вы получаете живые слои: кнопки, шрифты и отступы, которые можно двигать, перекрашивать и тестировать вместе с командой.

Для команд звучит офигенно! Пробуем?

#PG_education