Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

This is my Figma to SwiftUI code workflow I couldn't find a good way to turn my Figma designs to Xcode so I built a plugin. It took roughly a day to create with Claude AI. A few more days to add additional features like Save file, Fast forward,... show more

Meng To

154,851 subscribers

51,659 views • 1 year ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Meng To1 year ago

The plugin mentioned is Figma to AI Code: This video is part of my SwiftUI with Claude AI course:

Howdy Im Kai1 year ago

Holy crap so cool!! Nice work! I’ve wanted to learn SwiftUI for awhile, this could be a excellent reason

Meng To1 year ago

Many designers use SwiftUI just to prototype animations or gestures. It’s that good.

مهدی احمدی1 year ago

@MattSaedi @mmnasrabadi

Jeff Amazon1 year ago

This is so cool !!! I can’t wait to see the full course !

Zephyr1 year ago

Awesome stuff. Going to try it out and give feedback tomorrow

Mohammed Zeeshan1 year ago

Awesome! Thanks for giving such gifts to the community. May i ask if the output code quality might depend on how we structure, name our designs in figma?

Meng To1 year ago

Mostly the complexity of the design. It’s best to use auto layout versus constraints. Layer names shouldn’t affect much.

Gang Rui1 year ago

Ooo finally a plugin that can accurately convert components accurately! Gona give it a try.

Meng To1 year ago

I’m totally thinking about facilitating animation generation right now. Having a preview is so useful!

Related Videos

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys

Meng To

76,017 views • 1 year ago

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

I made a plugin that turns figma designs to code using Claude AI Works with HTML, CSS, Tailwind, SwiftUI, Flutter, etc. This is production level code and you can enter custom prompts like "make it functional" or "add hover states". Oh and it's free. You can use your api keys.

Meng To

221,140 views • 1 year ago

To add onto my point. This website took ca 2 hours to design + build out with claude - and it has infinitely more opportunity (with my lacking knowledge) for growth and improvement. Built using shadcn + agentation + a bit of messing around in figma.

To add onto my point. This website took ca 2 hours to design + build out with claude - and it has infinitely more opportunity (with my lacking knowledge) for growth and improvement. Built using shadcn + agentation + a bit of messing around in figma.

kosta4a

23,323 views • 3 months ago

A good design workflow should create more clarity, not more tabs. That is why OptimAI Claw is useful. One prompt can now help automate parts of your workflow on Figma and Stitch -- from research and structure to faster execution inside the tools you already use. “Turn this idea into a clean landing page concept. Draft the layout in Figma. Generate a matching flow in Stitch.” Less switching. Less friction. More room to think. That is what agentic AI should feel like: quiet, useful, and already inside the workflow. OptimAI Claw is built for that. --- 💡Launch OptimAI Claw with Core Node v2:

A good design workflow should create more clarity, not more tabs. That is why OptimAI Claw is useful. One prompt can now help automate parts of your workflow on Figma and Stitch -- from research and structure to faster execution inside the tools you already use. “Turn this idea into a clean landing page concept. Draft the layout in Figma. Generate a matching flow in Stitch.” Less switching. Less friction. More room to think. That is what agentic AI should feel like: quiet, useful, and already inside the workflow. OptimAI Claw is built for that. --- 💡Launch OptimAI Claw with Core Node v2:

OptimAI Network

187,847 views • 2 months ago

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 views • 10 months ago

I'm really excited about our new Figma feature, variables. So, I built a new plugin I call "Find Variables" to help you find where they're being used across your design. It will be free and open source once it's published to Figma community!

I'm really excited about our new Figma feature, variables. So, I built a new plugin I call "Find Variables" to help you find where they're being used across your design. It will be free and open source once it's published to Figma community!

Daniel Destefanis

75,900 views • 3 years ago

References API can also be used to create plugins. Here is a figma plugin we built to take any two images and combine them together any way you want. We open-sourced the code.

References API can also be used to create plugins. Here is a figma plugin we built to take any two images and combine them together any way you want. We open-sourced the code.

Alejandro Matamala Ortiz

20,029 views • 1 year ago

The "Publish as App" button Figma forgot to add? WE BUILT IT!!! Stop exporting assets. Start launching applications. Connect your Figma account to CREAO and see your designs come to life with a powerful AI backend. Proof is in this video.

The "Publish as App" button Figma forgot to add? WE BUILT IT!!! Stop exporting assets. Start launching applications. Connect your Figma account to CREAO and see your designs come to life with a powerful AI backend. Proof is in this video.

Creao AI

6,344,075 views • 10 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

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 • 4 months ago

Built a new Figma plugin I call "Magic Messages". It generates entire conversations using ChatGPT and renders them using our design system at Discord. You can set a topic, # people talking, and # of messages. This way we can generate content for our designs more easily.

Built a new Figma plugin I call "Magic Messages". It generates entire conversations using ChatGPT and renders them using our design system at Discord. You can set a topic, # people talking, and # of messages. This way we can generate content for our designs more easily.

Daniel Destefanis

130,028 views • 3 years ago

Claude Cowork is like Claude Code but for your entire life It's going to be the biggest AI tool of 2026 I figured out a workflow that saves me 5+ hours a day and it's so simple even a non tech nerd can do it Here's my complete breakdown you can steal today:

Claude Cowork is like Claude Code but for your entire life It's going to be the biggest AI tool of 2026 I figured out a workflow that saves me 5+ hours a day and it's so simple even a non tech nerd can do it Here's my complete breakdown you can steal today:

Alex Finn

407,739 views • 6 months ago

I haven't opened Xcode in WEEKS 👀 ive made a ton of changes to my coding workflow and added a few things that help me move 5x faster made a little video going over everything and ill cover why i still use both claude code AND cursor 😮‍💨

I haven't opened Xcode in WEEKS 👀 ive made a ton of changes to my coding workflow and added a few things that help me move 5x faster made a little video going over everything and ill cover why i still use both claude code AND cursor 😮‍💨

Chris Raroque

13,568 views • 2 months ago

I built a Nous Research Hermes workflow that my team at Box uses to track AI trends. Every day at 7am, it researches what's happening across the AI ecosystem and generates a brief for our team. We use it to identify: • AI trends worth paying attention to • Open source projects gaining momentum • New tools developers are adopting • Content opportunities to work on next I've been building agentic workflows for months, and this is one I've actually integrated into my team's daily workflow. Here's how I built it:

I built a Nous Research Hermes workflow that my team at Box uses to track AI trends. Every day at 7am, it researches what's happening across the AI ecosystem and generates a brief for our team. We use it to identify: • AI trends worth paying attention to • Open source projects gaining momentum • New tools developers are adopting • Content opportunities to work on next I've been building agentic workflows for months, and this is one I've actually integrated into my team's daily workflow. Here's how I built it:

Chris Kim

78,552 views • 1 month ago

Aesthetron AI is now live in Figma community! New users can now get 100 credits for free. Here's a simple demo of using Aesthetron AI and Figma native image generation to create a product card UI. Built with Figma AI SDK Polar

Aesthetron AI is now live in Figma community! New users can now get 100 credits for free. Here's a simple demo of using Aesthetron AI and Figma native image generation to create a product card UI. Built with Figma AI SDK Polar

Joshua Guo

17,024 views • 7 months ago

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 views • 10 months ago

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,460 views • 2 years ago

A few weeks ago, I shared a Shopify store I built with v0 that you can explore like a game. People asked how I built it, so I recorded a demo to teach you how to build your own. I'd love to see what you create!

A few weeks ago, I shared a Shopify store I built with v0 that you can explore like a game. People asked how I built it, so I recorded a demo to teach you how to build your own. I'd love to see what you create!

Esteban Suárez

20,080 views • 1 month ago

Used OpenCode this afternoon to help me add features to a Figma plugin that didn't quite do what I needed it to ✨ The speed and DX flow between my IDE and terminal was sweet 👌

Used OpenCode this afternoon to help me add features to a Figma plugin that didn't quite do what I needed it to ✨ The speed and DX flow between my IDE and terminal was sweet 👌

David Hill

13,090 views • 10 months ago

Prompt builder to generate designs with live preview Remix from 780+ templates, iterate quickly and bring your UI code to cursor or figma. I took 7 days to completely recode everything from Swift to React. 50k lines of code. With AI, the platform code is almost irrelevant since you transfer everything. What a time to be alive.

Prompt builder to generate designs with live preview Remix from 780+ templates, iterate quickly and bring your UI code to cursor or figma. I took 7 days to completely recode everything from Swift to React. 50k lines of code. With AI, the platform code is almost irrelevant since you transfer everything. What a time to be alive.

Meng To

57,371 views • 1 year ago

Don't ask: "How can I add AI?" Instead ask: "How can AI make this better." Take running a meeting: During a brainstorming meeting, it sucks to... - Create a brainstorming template from scratch - Group 100+ virtual sticky notes manually That's why Figma built their first gen AI feature in FigJam to let anyone: - Generate a personalized FigJam template - Sort and summarize 100+ ideas quickly Here's my new interview with Yuhki Yamashita (CPO Figma) on how Figma: 1. Encourages PMs and designers to love their craft 2. Built FigJam AI to solve real problems 3. Plans to make design accessible to everyone 📌 Check out the interview below:

Don't ask: "How can I add AI?" Instead ask: "How can AI make this better." Take running a meeting: During a brainstorming meeting, it sucks to... - Create a brainstorming template from scratch - Group 100+ virtual sticky notes manually That's why Figma built their first gen AI feature in FigJam to let anyone: - Generate a personalized FigJam template - Sort and summarize 100+ ideas quickly Here's my new interview with Yuhki Yamashita (CPO Figma) on how Figma: 1. Encourages PMs and designers to love their craft 2. Built FigJam AI to solve real problems 3. Plans to make design accessible to everyone 📌 Check out the interview below:

Peter Yang

48,812 views • 2 years ago