正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

For years, everyone in design tooling worked on Figma to Code. The holy grail. But Figma has their own special data format. And LLMs know React well. Watch how our customers use the Magic Patterns MCP to go roundtrip: design <> code. Never been more clear to me this... show more

Alex Danilowicz

7,313 subscribers

32,431 次观看 • 4 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

For years, the design industry has talked about "design vs code" And tools (including Figma!) have forced a choice. But this is a false debate. Code isn't the opposite of design. Code is a material for design. So we're bringing code to the Figma canvas with Code Layers.

For years, the design industry has talked about "design vs code" And tools (including Figma!) have forced a choice. But this is a false debate. Code isn't the opposite of design. Code is a material for design. So we're bringing code to the Figma canvas with Code Layers.

Dylan Field

96,314 次观看 • 1 个月前

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

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 次观看 • 4 个月前

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 😁

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,524 次观看 • 5 个月前

This is how a top designer uses Figma MCP + Cursor to build an AI design system Designers working on design systems should copy this AI workflow to free up precious engineering bandwidth 👀 Watch the full video on Sneak Peek: Elad Mizrahi shows how monday.com design team uses Figma MCP + Cursor to build their design system 👇

This is how a top designer uses Figma MCP + Cursor to build an AI design system Designers working on design systems should copy this AI workflow to free up precious engineering bandwidth 👀 Watch the full video on Sneak Peek: Elad Mizrahi shows how monday.com design team uses Figma MCP + Cursor to build their design system 👇

Jayneil Dalal

89,610 次观看 • 5 个月前

This is how the Intercom design team uses AI to prototype directly in code Designers using AI tools should copy this AI workflow to ship faster 👀 Watch the full video on Sneak Peek: Domingo Widen shows how Intercom design team uses Figma Code Connect + Claude to design directly in code 👇

This is how the Intercom design team uses AI to prototype directly in code Designers using AI tools should copy this AI workflow to ship faster 👀 Watch the full video on Sneak Peek: Domingo Widen shows how Intercom design team uses Figma Code Connect + Claude to design directly in code 👇

Jayneil Dalal

54,117 次观看 • 5 个月前

This is how a top designer uses Figma variable modes to manage a design system for 50+ sports brands Designers should copy this workflow to scale their Figma design systems 👀 Watch the full video on Sneak Peek: Cornelius Hegeman shows how the Jump design team built a Figma design system to manage 50+ brands 👇

This is how a top designer uses Figma variable modes to manage a design system for 50+ sports brands Designers should copy this workflow to scale their Figma design systems 👀 Watch the full video on Sneak Peek: Cornelius Hegeman shows how the Jump design team built a Figma design system to manage 50+ brands 👇

Jayneil Dalal

29,057 次观看 • 5 个月前

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.

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,326,426 次观看 • 5 个月前

This design manager vibe coded a Figma plugin with Claude Code in 40 mins to save $2000 per project Every designer should take an inspiration from this and leverage AI to automate boring parts of their design work 👀 Watch the full interview on Sneak Peek: Hammed shows how the Jump design team uses Claude to create custom Figma plugins 👇

This design manager vibe coded a Figma plugin with Claude Code in 40 mins to save $2000 per project Every designer should take an inspiration from this and leverage AI to automate boring parts of their design work 👀 Watch the full interview on Sneak Peek: Hammed shows how the Jump design team uses Claude to create custom Figma plugins 👇

Jayneil Dalal

66,181 次观看 • 9 个月前

This is how a top designer uses Figma MCP + Cursor Every designer should copy this workflow to get 90% of the design prototype ready super quick 👀 Watch the full interview on Sneak Peek: Jeff JB shows how the Webflow design team uses Figma MCP + Cursor 👇

This is how a top designer uses Figma MCP + Cursor Every designer should copy this workflow to get 90% of the design prototype ready super quick 👀 Watch the full interview on Sneak Peek: Jeff JB shows how the Webflow design team uses Figma MCP + Cursor 👇

Jayneil Dalal

42,082 次观看 • 8 个月前

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

We've been ramping up usage of AI tools on our design team at Coinbase 🛡️ Two examples: 1. Write a text prompt and get a figma mockup as a starting point for your design 2. Click a button and turn any figma design into front-end code The front-end code it generates adheres to our design system, and is trained on our library of UIs Shout out to 🛡️ tali krakowsky apel🛡️ Blair McKee and the team pushing this forward.

Brian Armstrong

520,431 次观看 • 2 年前

This is how OpenAI and Figma design. I got a masterclass from OpenAI's Ed Bayes and Figma's guiseiz: 1:33 - Code vs canvas 6:00 - When to use which 10:06 - Live demo 13:01 - Figma MCP 33:13 - Adoption roadmap 43:29 - Roles blurring

This is how OpenAI and Figma design. I got a masterclass from OpenAI's Ed Bayes and Figma's guiseiz: 1:33 - Code vs canvas 6:00 - When to use which 10:06 - Live demo 13:01 - Figma MCP 33:13 - Adoption roadmap 43:29 - Roles blurring

Aakash Gupta

182,054 次观看 • 3 个月前

My workflow now: - Design the first path in Figma - Hook up Claude Code to Figma MCP - Prompt: "Build this with Tailwind + Shadcn" - Then generate design system docs + demo page Side note: So many cool products being built, but I'm irrationally happy about a tabletop RPG scene manager.

My workflow now: - Design the first path in Figma - Hook up Claude Code to Figma MCP - Prompt: "Build this with Tailwind + Shadcn" - Then generate design system docs + demo page Side note: So many cool products being built, but I'm irrationally happy about a tabletop RPG scene manager.

Tommy Geoco 🇺🇸

59,278 次观看 • 9 个月前

This is how a designer at Slack organizes their design iterations in Figma Every designer should copy this approach and keep a daily log of their design iterations. Doesn't have to be super structured but just date and name for each design iteration Biggest benefit I see for using this approach is building trust with your design manager and stakeholders as they can go into your Figma file and visualize your progress/efforts Also scares away micro managers😉 👀 Watch the full interview on Sneak Peek: andrew gosine 🌲 shows how he organizes design iterations for Slack in Figma 👇

This is how a designer at Slack organizes their design iterations in Figma Every designer should copy this approach and keep a daily log of their design iterations. Doesn't have to be super structured but just date and name for each design iteration Biggest benefit I see for using this approach is building trust with your design manager and stakeholders as they can go into your Figma file and visualize your progress/efforts Also scares away micro managers😉 👀 Watch the full interview on Sneak Peek: andrew gosine 🌲 shows how he organizes design iterations for Slack in Figma 👇

Jayneil Dalal

120,695 次观看 • 11 个月前

This is how a designer at Figma designed AI features for Figma Slides The amount of design iterations and the attention to details is mind blowing Natasha Tenggoro shows she designed the AI features for Figma Slides in Figma 👇

This is how a designer at Figma designed AI features for Figma Slides The amount of design iterations and the attention to details is mind blowing Natasha Tenggoro shows she designed the AI features for Figma Slides in Figma 👇

Jayneil Dalal

20,714 次观看 • 1 年前

This is how the entire Firefox design team work out of just 1 Figma file 🤯 It solves the biggest issue on design teams - what is everyone working on? I have worked on design teams where designers had no clue what others were working on This approach also eliminates the need for weekly 1 hour standups where everyone has to present what they are working on 👀 Watch the full interview on Sneak Peek: topotropic 👉🏻 @topotropic@publicidentity.net shows how Firefox 🔥 design team works out of a single Figma file👇

This is how the entire Firefox design team work out of just 1 Figma file 🤯 It solves the biggest issue on design teams - what is everyone working on? I have worked on design teams where designers had no clue what others were working on This approach also eliminates the need for weekly 1 hour standups where everyone has to present what they are working on 👀 Watch the full interview on Sneak Peek: topotropic 👉🏻 @[email protected] shows how Firefox 🔥 design team works out of a single Figma file👇

Jayneil Dalal

19,965 次观看 • 10 个月前

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

Tommy Geoco

22,905 次观看 • 9 个月前

Back next week with 5 more features on Figma Slides, but for now have fun with these → View layers in Design mode in grid view → Keyboard shortcut to toggle on Design mode (⇧ + D) to access your fave Figma features → Add template text styles in Design mode → Click the right arrow to advance slides AND play videos → Create and save your Grid styles

Back next week with 5 more features on Figma Slides, but for now have fun with these → View layers in Design mode in grid view → Keyboard shortcut to toggle on Design mode (⇧ + D) to access your fave Figma features → Add template text styles in Design mode → Click the right arrow to advance slides AND play videos → Create and save your Grid styles

Figma

124,675 次观看 • 2 年前

The Figma MCP is insanely good. First time I used it felt like AGI. Feed designs to the MCP, done. It reads frames, components, variables, layout, and generates close to pixel perfect code. I one-shotted my design in this 150 second video with Devin.

The Figma MCP is insanely good. First time I used it felt like AGI. Feed designs to the MCP, done. It reads frames, components, variables, layout, and generates close to pixel perfect code. I one-shotted my design in this 150 second video with Devin.

nader dabit

119,262 次观看 • 5 个月前

Been quietly building Aaru's new design system and porting it into code over the past week. Components built on Base UI, one at a time, all living in our own custom "storybook". Started with the Figma tokens, ended up fine-tuning everything in code, as colours and type just render differently in the browser. Now testing patterns and moving into layouts. Honestly the biggest unlock for design handover I've had in years. Next up: documenting each component's usage for agent use. Recommendations welcome.

Been quietly building Aaru's new design system and porting it into code over the past week. Components built on Base UI, one at a time, all living in our own custom "storybook". Started with the Figma tokens, ended up fine-tuning everything in code, as colours and type just render differently in the browser. Now testing patterns and moving into layouts. Honestly the biggest unlock for design handover I've had in years. Next up: documenting each component's usage for agent use. Recommendations welcome.

Muharrem Şenyıl

43,924 次观看 • 10 天前