Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

btw, from Figma → Code via Pencil > just copy/paste: cmd+C in Figma, cmd+V in Pencil > styles and layout settings preserved, pixel perfect > claude code produces the code that fits your repo code, requirements and rules, you are in charge

tomkrcha's profile picture

Tom Krcha

21,155 subscribers

15,131 Aufrufe • vor 5 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche 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

357,344 Aufrufe • vor 4 Monaten

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

250,872 Aufrufe • vor 5 Monaten

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,497,404 Aufrufe • vor 5 Monaten

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,595,685 Aufrufe • vor 9 Monaten

> be you > work in figma sites but want the power of make > see this tweet and realize code now belongs; make a mess, rev, refine > start to use code layers > actually finish your site
3:05

> be you > work in figma sites but want the power of make > see this tweet and realize code now belongs; make a mess, rev, refine > start to use code layers > actually finish your site

Niko

51,551 Aufrufe • vor 1 Jahr

Introducing Figma Connect. The best way to turn your Figma designs into code. No MCP hell. No plugins. Just copy and paste your designs into MagicPath and turn them into interactive prototypes without compromising your craft. Every pixel. Every detail. Every asset. Preserved.
1:19

Introducing Figma Connect. The best way to turn your Figma designs into code. No MCP hell. No plugins. Just copy and paste your designs into MagicPath and turn them into interactive prototypes without compromising your craft. Every pixel. Every detail. Every asset. Preserved.

Pietro Schirano

979,151 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 3 Monaten

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,255 Aufrufe • vor 1 Jahr

Code → design → code Generate design files from code, collaborate in @Figma, and implement updates all within Codex without breaking your flow.
0:20

Code → design → code Generate design files from code, collaborate in @Figma, and implement updates all within Codex without breaking your flow.

OpenAI Developers

241,653 Aufrufe • vor 4 Monaten

I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.
0:43

I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.

Meng To

32,205 Aufrufe • vor 2 Jahren

Introducing Bifrost, a tool that uses AI to turn anything from Figma into clean React code automatically. How it works: - Generates usable code for anything in Figma - Drops the code directly into your code editor - Learns how to structure code just like yours 1/4
0:54

Introducing Bifrost, a tool that uses AI to turn anything from Figma into clean React code automatically. How it works: - Generates usable code for anything in Figma - Drops the code directly into your code editor - Learns how to structure code just like yours 1/4

kartik

756,127 Aufrufe • vor 3 Jahren

damn its so easy to go from design -> code with Figma MCP + Claude Code. literally just one click of a button, and the code is ready! still a lot of polishing to do, but this has helped us make development ~50% faster 😁
1:19

damn its so easy to go from design -> code with Figma MCP + Claude Code. literally just one click of a button, and the code is ready! still a lot of polishing to do, but this has helped us make development ~50% faster 😁

Marcel

54,348 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 3 Monaten

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,763 Aufrufe • vor 1 Jahr

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

42,132 Aufrufe • vor 1 Monat

Figma Make, now on your local code In limited beta starting today, you can visually edit and ship changes by connecting Make to your codebase At Figma, we use our products to design in every way: design layers, prototypes, and now, production code
0:30

Figma Make, now on your local code In limited beta starting today, you can visually edit and ship changes by connecting Make to your codebase At Figma, we use our products to design in every way: design layers, prototypes, and now, production code

Figma

398,060 Aufrufe • vor 1 Monat

I built a complex history feature for my Figma to Code plugin in 3 prompts. This is a 30-min tutorial using Claude Code. The difference in code generation between gpt-4o, Claude 3.5 and 3.7 is insane. 3.7 produces near-perfect results and is far more consistent. It's really a designer's best friend, not missing details from the design, like adaptive layout, outlines, spacing, etc. It seems like the new model has great taste now.
30:38

I built a complex history feature for my Figma to Code plugin in 3 prompts. This is a 30-min tutorial using Claude Code. The difference in code generation between gpt-4o, Claude 3.5 and 3.7 is insane. 3.7 produces near-perfect results and is far more consistent. It's really a designer's best friend, not missing details from the design, like adaptive layout, outlines, spacing, etc. It seems like the new model has great taste now.

Meng To

32,475 Aufrufe • vor 1 Jahr

In Cursor you can *easily* turn comments into code. Just write in natural language what you want in your file. Then highlight it, use CMD+K, and ask the AI to translate it into code - and it will! Turn your thoughts right into apps.
6:50

In Cursor you can *easily* turn comments into code. Just write in natural language what you want in your file. Then highlight it, use CMD+K, and ask the AI to translate it into code - and it will! Turn your thoughts right into apps.

Mckay Wrigley

106,485 Aufrufe • vor 1 Jahr

Updates to the Figma MCP server: → Generate and edit decks in Figma Slides → Build boards with data in FigJam → Roundtrip from code to canvas in Figma Make Now with custom font support and image exports.
0:25

Updates to the Figma MCP server: → Generate and edit decks in Figma Slides → Build boards with data in FigJam → Roundtrip from code to canvas in Figma Make Now with custom font support and image exports.

Figma

95,497 Aufrufe • vor 1 Monat

I just built my second app in 4 hours with Claude Code. From Figma design to fully functional. No code written. This shouldn't be possible. 😭 The first one took me a week. The second one took an afternoon. By next week I'll be shipping one before breakfast. >View in full.
2:05

I just built my second app in 4 hours with Claude Code. From Figma design to fully functional. No code written. This shouldn't be possible. 😭 The first one took me a week. The second one took an afternoon. By next week I'll be shipping one before breakfast. >View in full.

Tuki

182,385 Aufrufe • vor 4 Monaten