Loading video...

Video Failed to Load

Go Home

Figma just shipped the ability to bring UI work done in Claude Code straight into Figma as editable design frames. Use this to explore new ideas in Figma, view multi-page flows on the canvas, or reimagine user experiences.

trq212's profile picture

Thariq

293,175 subscribers

1,325,671 views • 4 months ago •via X (Twitter)

ArtsEducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

> 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

356,501 views • 4 months ago

Introducing Figma export in MagicPath. Design and build with our native agent, or your favorite external one (Codex, Claude Code, etc.). Explore tons of different directions, then bring your work into Figma as fully editable designs. As simple as a copy-paste.
0:21

Introducing Figma export in MagicPath. Design and build with our native agent, or your favorite external one (Codex, Claude Code, etc.). Explore tons of different directions, then bring your work into Figma as fully editable designs. As simple as a copy-paste.

Pietro Schirano

40,214 views • 1 month 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,067,170 views • 4 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 • 3 months 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,356 views • 2 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,309,409 views • 4 months ago

Design → code → canvas → feedback → repeat. The Figma MCP server is now bidirectional. GitHub Copilot users can pull design context into code and push working UI back to the Figma canvas, all from Visual Studio Code . No handoffs or context switching. Just flow.
1:40

Design → code → canvas → feedback → repeat. The Figma MCP server is now bidirectional. GitHub Copilot users can pull design context into code and push working UI back to the Figma canvas, all from Visual Studio Code . No handoffs or context switching. Just flow.

Mario Rodriguez

105,727 views • 3 months ago

Figma just became obsolete. one-shots entire UI designs using your Claude Code subscription. - MCP connects to Cursor, Claude Code, or Codex - Fully editable designs - Export to Figma or PNG The kicker? It's completely free right now.
0:27

Figma just became obsolete. one-shots entire UI designs using your Claude Code subscription. - MCP connects to Cursor, Claude Code, or Codex - Fully editable designs - Export to Figma or PNG The kicker? It's completely free right now.

Sanket 🛠️ClawKraft

37,940 views • 5 months ago

Watch this magic! Pasted a Figma design link into Claude. Asked for 3 new variations from QuiverAI. Got 3 fully editable vectors back in Figma 😱 Never left Claude once. I used the new Quiver MCP + Figma MCP.
1:01

Watch this magic! Pasted a Figma design link into Claude. Asked for 3 new variations from QuiverAI. Got 3 fully editable vectors back in Figma 😱 Never left Claude once. I used the new Quiver MCP + Figma MCP.

DANN©

67,324 views • 17 days 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 • 3 months ago

Or just use Figma to turn a flat PNG into an editable vector in 20 seconds
0:40

Or just use Figma to turn a flat PNG into an editable vector in 20 seconds

Dan

71,022 views • 2 months ago

Your design is the prompt Bring your existing ideas to life with Figma Make #Config2025
10:19

Your design is the prompt Bring your existing ideas to life with Figma Make #Config2025

Figma

323,740 views • 1 year ago

Introducing Codex to Figma: Roundtrip between code and canvas through the Figma MCP server
0:36

Introducing Codex to Figma: Roundtrip between code and canvas through the Figma MCP server

Figma

179,484 views • 4 months ago

Something new is coming to the design canvas
0:50

Something new is coming to the design canvas

Figma

1,019,728 views • 9 months ago

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.
0:20

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.

Figma

47,489 views • 2 years ago

Turn code into designs your whole team can edit by connecting Codex to the Figma canvas
0:35

Turn code into designs your whole team can edit by connecting Codex to the Figma canvas

Figma

103,107 views • 21 days ago

That gap between design and production? Closed. 🔁 GitHub Copilot, Visual Studio Code, and Figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇
1:40

That gap between design and production? Closed. 🔁 GitHub Copilot, Visual Studio Code, and Figma now create a continuous loop. With the bidirectional Figma MCP server, Copilot users can: 🔹 Pull design context into code 🔹 Push working UI back to the canvas Connect your canvas and stay in the flow. 👇

GitHub

113,033 views • 3 months ago

How to use Claude to Design UI Screens and Push them to Figma to edit
12:10

How to use Claude to Design UI Screens and Push them to Figma to edit

Your Designer

27,285 views • 1 month 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,549 views • 3 months ago