Code → Figma — This Changes UI Development скачать в хорошем качестве

Code → Figma — This Changes UI Development

Design → Code is normal now. But Code → Figma → Code? That’s a completely new workflow. In this video, I’ll show you how to take existing code, generate a design from it, edit that design in Figma, and then sync those changes back to your project — pixel-perfect. I will show you step by step how to install and set up Claude Code in the terminal and Cursor. Also, you will learn to run Figma MCP in Claude Code from the terminal and generate UIs. Then you will learn how to send design from code into Figma and sync changes back to your project in Claude Code. 💌 1:1 trainings and courses: https://sergeichyrkov.com/learn 👉 Commands: 1. Install Claude Code: https://code.claude.com/docs/en/quick... For MacOS, run in terminal: curl -fsSL https://claude.ai/install.sh | bash 2. Connect Figma MCP in Claude Code https://code.claude.com/docs/en/mcp run in terminal: claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp 3. Install Figma plugin and login claude plugin install figma@claude-plugins-official ______________________________ Check out my links ⬇️ ▸ My website — https://sergeichyrkov.com ▸ My studio — https://chyrkov.studio ▸ My curated resources library — https://designsweets.co ▸ Twitter —   / sergeichyrkov   ▸ Instagram —   / chyrkov   ▸ Behance — https://www.behance.net/chyrkov ▸ Linkedin —   / sergeichyrkov   ______________________________ Useful stuff: 👉 Build websites in minutes with Framer — https://framer.link/chyrkov 👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com... 👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referra... ______________________________ 📝 Chapters: 0:00 — introduction 0:56 — How to install and set up Claude Code 3:00 — how to launch a project in Claude Code 4:03 — How to connect Figma MCP to Claude Code 5:12 — Install Figma Plugin to Claude Code 7:00 — How to set up Claude Code in Cursor 8:10 — How to use Claude Code app 8:53 — How to generate UI in Claude Code terminal 10:40 — How to send design from Claude Code to Figma 12:48 — How to push changes from Figma to Claude Code 14:21 — How to use Claude Code app to update designs for Figma file ______________________________ 😍 Monetarily Supporting The Channel: If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeich... This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content. ______________________________ 📃 Disclaimer: Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase. ______________________________ #figma #claude #ai #webdesign