Loading video...

Video Failed to Load

Go Home

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

figma's profile picture

Figma

557,038 subscribers

3,064,430 views • 3 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

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 • 3 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

354,356 views • 3 months ago

Introducing code layers in Figma Sites Add interactions and animations with code crafted by you or with help from Figma’s AI
0:31

Introducing code layers in Figma Sites Add interactions and animations with code crafted by you or with help from Figma’s AI

Figma

169,116 views • 11 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,567 views • 3 months ago

Attachment issues (resolved) You can attach 30+ file types (docs, data, media, and code) directly in Make, so you can move beyond placeholders and design with real inputs from code to canvas.
0:31

Attachment issues (resolved) You can attach 30+ file types (docs, data, media, and code) directly in Make, so you can move beyond placeholders and design with real inputs from code to canvas.

Figma

34,917 views • 1 month 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

48,999 views • 2 months ago

Figma meets Claude Code! Pencil is an infinite design canvas that runs parallel design agents locally. → Turn designs into code → Runs locally with Claude Code → Works with VSCode, Cursor 100% free, no subscription
1:19

Figma meets Claude Code! Pencil is an infinite design canvas that runs parallel design agents locally. → Turn designs into code → Runs locally with Claude Code → Works with VSCode, Cursor 100% free, no subscription

Alvaro Cintas

387,367 views • 3 months ago

I'm building a new website! ✨ — Figma + Claude Code — Infinite canvas with some of my work — Fun experiments :~)
1:46

I'm building a new website! ✨ — Figma + Claude Code — Infinite canvas with some of my work — Fun experiments :~)

𝔪𝔞𝔱𝔱𝔥𝔢𝔴 𝔳𝔢𝔯𝔫𝔬𝔫

16,114 views • 3 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,304,990 views • 3 months ago

Excited to launch Pencil INFINITE DESIGN CANVAS for Claude Code > Superfast WebGL canvas, fully editable, running parallel design agents > Runs locally with Claude Code → turn designs into code > Design files live in your git repo → Open json-based .pen format
1:19

Excited to launch Pencil INFINITE DESIGN CANVAS for Claude Code > Superfast WebGL canvas, fully editable, running parallel design agents > Runs locally with Claude Code → turn designs into code > Design files live in your git repo → Open json-based .pen format

Tom Krcha

1,493,578 views • 4 months ago

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

259,357 views • 2 months ago

What if Claude Code had an external display? Introducing 🖱️Claude Canvas📺! Especially useful if you're using CC as a personal agent.
2:35

What if Claude Code had an external display? Introducing 🖱️Claude Canvas📺! Especially useful if you're using CC as a personal agent.

David Siegel

500,328 views • 4 months ago

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.
0:25

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.

Thariq

1,324,625 views • 3 months ago

I've always liked the infinite canvas as an exploration medium, but I could never get into Figma because I'm faster at designing in code So this weekend I made an app that combines canvas with code editor - write React, and it appears in the canvas
0:23

I've always liked the infinite canvas as an exploration medium, but I could never get into Figma because I'm faster at designing in code So this weekend I made an app that combines canvas with code editor - write React, and it appears in the canvas

nanda

77,822 views • 1 month ago

The world’s most intuitive AI canvas is here. We built an agentic canvas for generating pro-level creative assets. Think Figma meets Sora. Comment “Canvas” and we’ll DM you an invite code.
1:43

The world’s most intuitive AI canvas is here. We built an agentic canvas for generating pro-level creative assets. Think Figma meets Sora. Comment “Canvas” and we’ll DM you an invite code.

konstantinpaulus

13,538 views • 11 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

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

112,985 views • 2 months ago

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:
1:58

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:

Jason Zhou

78,413 views • 6 months ago

CODE EXECUTION IN CANVAS🎨 Canvas becomes an automated SWE and a data scientist. Search for API docs, ask the model to write code and execute, get the plot!
0:21

CODE EXECUTION IN CANVAS🎨 Canvas becomes an automated SWE and a data scientist. Search for API docs, ask the model to write code and execute, get the plot!

Karina Nguyen

46,579 views • 1 year ago

Figma > Edit Image can take the JSON style code inputs for retexturing any image on canvas • demo ↓
0:21

Figma > Edit Image can take the JSON style code inputs for retexturing any image on canvas • demo ↓

Rahul Chakraborty

31,968 views • 1 year ago