Loading video...

Video Failed to Load

Go Home

Going from Claude Code to Figma and BACK! Is it any good? 👇

designcoursecom's profile picture

Gary Simon

49,565 subscribers

32,106 views • 7 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Learn how to go from Claude Code to Figma and back again Livestream with Anthropic: March 31, 9:00AM PST | 12:00PM EST
0:32

Learn how to go from Claude Code to Figma and back again Livestream with Anthropic: March 31, 9:00AM PST | 12:00PM EST

Figma

260,894 views • 5 months ago

Tired: code or canvas Wired: code AND canvas Introducing Claude Code to Figma
3:19

Tired: code or canvas Wired: code AND canvas Introducing Claude Code to Figma

Figma

3,075,994 views • 7 months ago

How to import a Claude prototype into Figma 👇 Claude gets you to a working prototype fast. Don’t rebuild it - quickly bring it into Figma and keep going. Quick demo:
1:15

How to import a Claude prototype into Figma 👇 Claude gets you to a working prototype fast. Don’t rebuild it - quickly bring it into Figma and keep going. Quick demo:

Anima

1,437,799 views • 4 months ago

> Send code from Claude > Explore on the canvas > Prototype with AI > Work through feedback > Roundtrip back to code All in Figma
0:29

> Send code from Claude > Explore on the canvas > Prototype with AI > Work through feedback > Roundtrip back to code All in Figma

Figma

358,688 views • 6 months ago

We just built Figma for Claude Code > Select any element on your local front-end > Edit it like you would in Figma > Apply the changes with Claude Code This is not a demo or waitlist. Try it today.
0:22

We just built Figma for Claude Code > Select any element on your local front-end > Edit it like you would in Figma > Apply the changes with Claude Code This is not a demo or waitlist. Try it today.

Quentin Romero Lauro

252,419 views • 7 months ago

242 variables added in Figma via Claude Code in 2 seconds Imagine doing this manually lol I built a Figma x Claude Code CLI 🔗👇
0:48

242 variables added in Figma via Claude Code in 2 seconds Imagine doing this manually lol I built a Figma x Claude Code CLI 🔗👇

Sil

26,965 views • 6 months ago

Introducing Figma Connect 2.0 Copy multiple designs in Figma, paste them into MagicPath, and get clean react code instantly. Auto Layout and responsiveness, all preserved. Your Figma designs become code any agent can understand and build with. Codex, Claude Code, and more.
0:50

Introducing Figma Connect 2.0 Copy multiple designs in Figma, paste them into MagicPath, and get clean react code instantly. Auto Layout and responsiveness, all preserved. Your Figma designs become code any agent can understand and build with. Codex, Claude Code, and more.

Pietro Schirano

39,101 views • 1 month ago

Claude Code tried to improve /init... Is it any better?
11:17

Claude Code tried to improve /init... Is it any better?

Matt Pocock

45,389 views • 6 months ago

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams
0:48

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

77,115 views • 6 months ago

Figma just gave AI agents the canvas. Claude Code can now design directly in Figma via MCP + Skills👇
0:32

Figma just gave AI agents the canvas. Claude Code can now design directly in Figma via MCP + Skills👇

Min Choi

49,268 views • 5 months ago

Introducing our Free Figma-to-Code converter. Copy your design directly from Figma and paste it into our canvas. Our compiler converts your figma design into code, and you can export it in your preferred format. Free to use, with no limits. No login required, try it here👇
1:28

Introducing our Free Figma-to-Code converter. Copy your design directly from Figma and paste it into our canvas. Our compiler converts your figma design into code, and you can export it in your preferred format. Free to use, with no limits. No login required, try it here👇

Praha

23,097 views • 12 days ago

Here is what i cooked, i made it for my gf 💕 Designed in Figma, built with Claude code and Gemini
0:46

Here is what i cooked, i made it for my gf 💕 Designed in Figma, built with Claude code and Gemini

Stefan

53,222 views • 3 months ago

I made a Claude Code skill that turns any arxiv paper into working code. Every line traces back to the paper section it came from & any implementation detail the paper skips will be flagged, and not assumed. open sourcing it -
0:49

I made a Claude Code skill that turns any arxiv paper into working code. Every line traces back to the paper section it came from & any implementation detail the paper skips will be flagged, and not assumed. open sourcing it -

pdawg

207,931 views • 5 months ago

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.
0:30

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.

Claude

4,322,877 views • 7 months ago

Just updated talk to figma mcp open source Anthropic Claude Code can now talk to figma I can ask claude to review my design and annotate directly in design file Link below
1:02

Just updated talk to figma mcp open source Anthropic Claude Code can now talk to figma I can ask claude to review my design and annotate directly in design file Link below

Sonny

32,790 views • 6 months ago

Omg... you can turn Claude Code into a pro designer? Apparently you can turn any Figma Board into a Claude Skill... If you want early access to the web app... Reply below 👇 we will DM.
1:48

Omg... you can turn Claude Code into a pro designer? Apparently you can turn any Figma Board into a Claude Skill... If you want early access to the web app... Reply below 👇 we will DM.

Learn to Vibecode

74,821 views • 8 months ago

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.
0:33

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,599,203 views • 1 year ago

How to make Claude Code 10x better: Connect it with a tool that reviews your code and generates prompts for Claude to fix any issues with it automatically. Here is what this looks like:
3:38

How to make Claude Code 10x better: Connect it with a tool that reviews your code and generates prompts for Claude to fix any issues with it automatically. Here is what this looks like:

Santiago

98,993 views • 1 year ago

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.
6:06

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

Meng To

171,880 views • 2 years ago

From Claude Design to Figma in 60 seconds: 1. In Claude Design: Present → New tab 2. Copy the link 3. Paste into Anima Agent 4. The agent renders it as editable Figma layers link 👇
0:36

From Claude Design to Figma in 60 seconds: 1. In Claude Design: Present → New tab 2. Copy the link 3. Paste into Anima Agent 4. The agent renders it as editable Figma layers link 👇

Anima

1,228,977 views • 5 months ago