Скачать или смотреть Код → Figma — это меняет подход к разработке пользовательского интерфейса.

Переход от дизайна к коду сейчас — это норма. Но переход от кода к Figma и обратно? Это совершенно новый рабочий процесс. В этом видео я покажу вам, как взять существующий код, сгенерировать на его основе дизайн, экспортировать дизайн из Claude Code в Figma, отредактировать этот дизайн в Figma, а затем синхронизировать эти изменения обратно в ваш проект — с точностью до пикселя. Я покажу вам шаг за шагом, как установить и настроить Claude Code в терминале и Cursor. Также вы научитесь запускать Figma MCP в Claude Code из терминала и генерировать пользовательские интерфейсы. Затем вы узнаете, как отправлять дизайн из кода в Figma и синхронизировать изменения обратно в ваш проект в Claude Code.

💌 Индивидуальные тренинги и курсы: https://sergeichyrkov.com/learn

👉 Команды:
1. Установите Claude Code:
https://code.claude.com/docs/en/quick...
Для MacOS выполните в терминале:
curl -fsSL https://claude.ai/install.sh | bash
2. Подключите Figma MCP к Claude Code
https://code.claude.com/docs/en/mcp
запустите в терминале:
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp
3. Установите плагин Figma и войдите в систему
claude plugin install figma@claude-plugins-official

______________________________
Посмотрите мои ссылки ⬇️
▸ Мой сайт — https://sergeichyrkov.com
▸ Моя студия — https://chyrkov.studio
▸ Моя библиотека отобранных ресурсов — https://designsweets.co
▸ Twitter —   / sergeichyrkov  
▸ Instagram —   / chyrkov  
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin —   / sergeichyrkov  
______________________________
Полезная информация:
👉 Создавайте веб-сайты за считанные минуты с Framer — https://framer.link/chyrkov
👉 Записывайте свой экран как профессионал — https://screenstudio.lemonsqueezy.com...
👉 Лучшая музыка для ваших видео (получите 30 дней бесплатно) — https://www.epidemicsound.com/referra...
______________________________
📝 Разделы:
0:00 — Введение
0:56 — Как установить и настроить Claude Code
3:00 — Как запустить проект в Claude Code
4:03 — Как подключить Figma MCP к Claude Code
5:12 — Установка плагина Figma в Claude Code
7:00 — Как настроить Claude Code в курсоре
8:10 — Как использовать Claude Code приложение
8:53 — Как сгенерировать пользовательский интерфейс в терминале Claude Code
10:40 — Как отправить дизайн из Claude Code в Figma
12:48 — Как перенести изменения из Figma в Claude Code
14:21 — Как использовать приложение Claude Code для обновления дизайна в файле Figma

______________________________
😍 Финансовая поддержка канала:
Если вам нравится то, что я делаю, и вы хотите поддержать канал финансово, вы можете пожертвовать мне немного кофе здесь: https://www.buymeacoffee.com/sergeich...
Это ценится и помогает каналу, но, пожалуйста, не чувствуйте себя обязанными получать удовольствие от моего контента.

______________________________
📃 Отказ от ответственности:
Некоторые ссылки в описаниях моих видео являются партнерскими ссылками, что означает, что без дополнительных затрат для вас я получу небольшую комиссию, если вы перейдете по ним и совершите соответствующую покупку.


______________________________
#figma #claude #ai #webdesign