Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Holy crap, I got html to Figma working. This is about 1082 lines of code translating tailwind+html into figma console js commands. So we got accurate Figma layers, outlines, texts, nested groups and pure SVG icons. All these designs are made in Aura then exported to Figma.

Meng To

171,970 subscribers

71,217 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie Bildung

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Meng To

Meng Tovor 1 Jahr

Update is live on Available to Pro users (sorry, gotta pay the bills). This is about 90% accuracy. Just missing auto layout (coming), and complex things like bg blur. But everything you see on the site has been rendered in the demo with that level. It's AMAZING for icons, graphs, texts, colors and perfectly nested thanks to how clean AI is at generating html.

Profilbild von tkmadeit

tkmadeitvor 1 Jahr

did you have to give it latest Figma plugin api docs to get it to work or was the llm good enough to figure it out on its own?

Profilbild von Meng To

Meng Tovor 1 Jahr

LLM was able to figure it out, but after many many trial and errors.

Profilbild von …

…vor 1 Jahr

Would you be able to guide us on how to set this up? I’m currently working on designing my website and would really appreciate your help. Big fan of your work!

Profilbild von Meng To

Meng Tovor 1 Jahr

This is a Pro feature on Aura. Do you mean setting up an account and generating designs + export to Figma?

Profilbild von Alfon

Alfonvor 1 Jahr

Woww niceee!!

Profilbild von Samuel Ekpe

Samuel Ekpevor 1 Jahr

Nice

Profilbild von Masum

Masumvor 1 Jahr

You're cooking!!!

Profilbild von Aaron Delasy

Aaron Delasyvor 1 Jahr

that's cool, too bad it relies on internal Figma functions which might change OR might become private and entire feature of HTML to Figma would become broken. perhaps creating a plugin instead would improve the UX and chances of this feature surviving major Figma updates

Profilbild von Meng To

Meng Tovor 1 Jahr

It’s using the plugin api. That’s how plugin control internal tools. Nothing custom about this.

Ähnliche 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 Aufrufe • vor 1 Jahr

Figma to AI back to Figma This is a great loop for design explorations and gain back full control of the results. You can ask Aura to create new components, icons, graphics and entire screens based on existing design systems. All fully layered, nested and based on your prompt.

Figma to AI back to Figma This is a great loop for design explorations and gain back full control of the results. You can ask Aura to create new components, icons, graphics and entire screens based on existing design systems. All fully layered, nested and based on your prompt.

Meng To

75,662 Aufrufe • vor 1 Jahr

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

We just pushed a major update to Figma Connect. The level of fidelity on complex files is something never seen before. This video is real. 500+ complex layers, effects, SVGs, turned into real code in seconds. Comment your hardest Figma file and I'll convert it to code.

We just pushed a major update to Figma Connect. The level of fidelity on complex files is something never seen before. This video is real. 500+ complex layers, effects, SVGs, turned into real code in seconds. Comment your hardest Figma file and I'll convert it to code.

Pietro Schirano

38,754 Aufrufe • vor 5 Monaten

Excited to share Stippling Figma plugin ✨ I made this plugin to quickly generate halftone or stippling dots from any selected image or frame directly within figma. See how easy it is to create these cool designs now! All results in vector.

Excited to share Stippling Figma plugin ✨ I made this plugin to quickly generate halftone or stippling dots from any selected image or frame directly within figma. See how easy it is to create these cool designs now! All results in vector.

vijay verma

87,236 Aufrufe • vor 2 Jahren

Working on a vector map data importer for Figma. Zoom and pan to a geographic area & the plugin imports layers into the Figma document for easy editing & styling. Labels, buildings, roads, water, land are all included as separate groups. Who would be interested in using this?

Working on a vector map data importer for Figma. Zoom and pan to a geographic area & the plugin imports layers into the Figma document for easy editing & styling. Labels, buildings, roads, water, land are all included as separate groups. Who would be interested in using this?

Dylan Babbs

91,173 Aufrufe • vor 3 Jahren

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,942 Aufrufe • vor 1 Monat

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

figma "god mode" just leaked.. this week i tried the future of autonomous design: claude connected directly to the figma api with full edit access.. yes it can design in figma what does it mean? you prompt, it designs. it’s like having a team of designers inside figma working with you and 10x ing your capacity why is this different? official figma ai/mcp only "reads" files to help devs. this tool (unofficial MCP) "writes" in figma to replace manual labor. hours of grinding turned into seconds of waiting imagine this: - prompt to design: generate a new screen based on your design or not - prompt to flow: generate end to end user journeys - iteration: create multiple variations in one click - design system: it can use your components to create new screens - zero click management: auto layout, component creation, deduplication handled by prompt - universal control: if you can do it in figma, it can do it for you the impact if figma officially releases this, almost every existing plugin becomes obsolete overnight it feels like figma on steroids. i’m still processing whether i feel empowered or replaced full tutorial in this article from Mark A. Cianfrani. handle with care: ai will have access to everything in figma »

figma "god mode" just leaked.. this week i tried the future of autonomous design: claude connected directly to the figma api with full edit access.. yes it can design in figma what does it mean? you prompt, it designs. it’s like having a team of designers inside figma working with you and 10x ing your capacity why is this different? official figma ai/mcp only "reads" files to help devs. this tool (unofficial MCP) "writes" in figma to replace manual labor. hours of grinding turned into seconds of waiting imagine this: - prompt to design: generate a new screen based on your design or not - prompt to flow: generate end to end user journeys - iteration: create multiple variations in one click - design system: it can use your components to create new screens - zero click management: auto layout, component creation, deduplication handled by prompt - universal control: if you can do it in figma, it can do it for you the impact if figma officially releases this, almost every existing plugin becomes obsolete overnight it feels like figma on steroids. i’m still processing whether i feel empowered or replaced full tutorial in this article from Mark A. Cianfrani. handle with care: ai will have access to everything in figma »

Aurelien

79,132 Aufrufe • vor 6 Monaten

At this point, I have become lazy af. Figma connected to Cursor via my MCP and Opus 4.6 is designing a dashboard using Shadcn design system which is in the team library. So you chat in cursor, get designs in figma. Everything is designed according to your design system. Is this the dream of a designer?

At this point, I have become lazy af. Figma connected to Cursor via my MCP and Opus 4.6 is designing a dashboard using Shadcn design system which is in the team library. So you chat in cursor, get designs in figma. Everything is designed according to your design system. Is this the dream of a designer?

AK

92,015 Aufrufe • vor 6 Monaten

Figma Buzz is here! Proud of this one. It took time, care, and a lot of iteration. We built Buzz with brand designers and marketers in mind, making it easier for both to work side by side in Figma and turn brand assets into production-ready content. It’s in open beta starting today, can’t wait for you all to try it! Also, tune in tomorrow at 12:40pm PST for our design deep dive 👀 Figma #config2025

Natasha Tenggoro

59,767 Aufrufe • vor 1 Jahr

Adobe tried to buy Figma for $20 billion in 2022. The deal collapsed. So Figma went public on the NYSE in July 2025 instead. Ticker FIG. Public company. Quarterly earnings. Wall Street pressure. You know what happens to design tools after they IPO. In March 2025, Figma raised the Professional Full seat 33%. From $15 to $20 a month. Organization seats jumped to $55. Enterprise to $90. Then they took Dev Mode, which was free during beta, and locked it behind a paid seat. Your developers now pay extra to inspect the designs your designers already paid to create. In March 2026, Figma started charging for AI credits on top. If Figma raises prices again, you pay. If Figma gets acquired, you pray. If Figma shuts down, your files die with it. Your design system. On their servers. In a proprietary format only their app can read. To draw rectangles on a screen. There is an open source design platform that runs on your hardware. Stores your files in plain SVG. Costs $0 forever for unlimited users. It is called Penpot. 45,700+ stars on GitHub. A full Figma-grade design platform built on open web standards. Vector editing. Components. Design tokens to W3C spec. Flex and Grid layouts. Real-time multiplayer. Interactive prototyping. Here's what it does: → Real-time collaboration. Live cursors. Comments in line. → Components, variants, shared libraries. → Auto layout, Flex, CSS Grid. The tool outputs production CSS, not lookalike CSS. → Interactive prototypes with overlays, animations, and flows. → Inspect tab. Free. Built in. Every developer grabs production CSS, SVG, HTML without a separate seat. → Plugin ecosystem. Figma import to migrate your files. → Self-host on Docker in one command. Your designs never leave your network. Here's the wildest part: Figma stores your designs in a proprietary format only Figma can read. Penpot files are SVG. The same format your browser has rendered for 25 years. Open them in any editor. Open them in 20 years. Nobody can lock you out. The feature Figma charges your developers extra for, Penpot gives away. Without asking permission. Figma Professional: $20/month per seat. A 10-person team: $2,400/year. Figma Organization: $55/month per Full seat. A 50-person org: $33,000/year. Penpot: $0. Unlimited users. Unlimited files. Unlimited teams. Self-hosted. Free forever. 45,700+ stars. 2,700+ forks. 250+ contributors. MPL-2.0 license. Backed by a community that believes design tools should be free. Your designs. Your files. Your standards. 100% Open Source. (Link in the comments)

Adobe tried to buy Figma for $20 billion in 2022. The deal collapsed. So Figma went public on the NYSE in July 2025 instead. Ticker FIG. Public company. Quarterly earnings. Wall Street pressure. You know what happens to design tools after they IPO. In March 2025, Figma raised the Professional Full seat 33%. From $15 to $20 a month. Organization seats jumped to $55. Enterprise to $90. Then they took Dev Mode, which was free during beta, and locked it behind a paid seat. Your developers now pay extra to inspect the designs your designers already paid to create. In March 2026, Figma started charging for AI credits on top. If Figma raises prices again, you pay. If Figma gets acquired, you pray. If Figma shuts down, your files die with it. Your design system. On their servers. In a proprietary format only their app can read. To draw rectangles on a screen. There is an open source design platform that runs on your hardware. Stores your files in plain SVG. Costs $0 forever for unlimited users. It is called Penpot. 45,700+ stars on GitHub. A full Figma-grade design platform built on open web standards. Vector editing. Components. Design tokens to W3C spec. Flex and Grid layouts. Real-time multiplayer. Interactive prototyping. Here's what it does: → Real-time collaboration. Live cursors. Comments in line. → Components, variants, shared libraries. → Auto layout, Flex, CSS Grid. The tool outputs production CSS, not lookalike CSS. → Interactive prototypes with overlays, animations, and flows. → Inspect tab. Free. Built in. Every developer grabs production CSS, SVG, HTML without a separate seat. → Plugin ecosystem. Figma import to migrate your files. → Self-host on Docker in one command. Your designs never leave your network. Here's the wildest part: Figma stores your designs in a proprietary format only Figma can read. Penpot files are SVG. The same format your browser has rendered for 25 years. Open them in any editor. Open them in 20 years. Nobody can lock you out. The feature Figma charges your developers extra for, Penpot gives away. Without asking permission. Figma Professional: $20/month per seat. A 10-person team: $2,400/year. Figma Organization: $55/month per Full seat. A 50-person org: $33,000/year. Penpot: $0. Unlimited users. Unlimited files. Unlimited teams. Self-hosted. Free forever. 45,700+ stars. 2,700+ forks. 250+ contributors. MPL-2.0 license. Backed by a community that believes design tools should be free. Your designs. Your files. Your standards. 100% Open Source. (Link in the comments)

Nav Toor

216,943 Aufrufe • vor 3 Monaten

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, Preview options, advanced settings, a ton of testing and of course shipping/feedback. We're at a point where we can built our own tools to complete a workflow.

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, Preview options, advanced settings, a ton of testing and of course shipping/feedback. We're at a point where we can built our own tools to complete a workflow.

Meng To

51,659 Aufrufe • vor 1 Jahr

Just got a preview of MagicPath's new Figma integration… 2026 is about to close the entire loop on design and code. From the code quality to the pixel placement - this is the snappiest loop I’ve ever used. Not exaggerating. I think Pietro Schirano just figured it out.

Just got a preview of MagicPath's new Figma integration… 2026 is about to close the entire loop on design and code. From the code quality to the pixel placement - this is the snappiest loop I’ve ever used. Not exaggerating. I think Pietro Schirano just figured it out.

Tommy Geoco 🇺🇸

25,030 Aufrufe • vor 7 Monaten

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Been using Paper MCP with Claude Code today and I’m kind of blown away! I tested importing Figma designs, then iterating on them using live Supabase data (via MCP). It genuinely feels like a glimpse of where design is heading. would love Paper to add something like agentation from Benji Taylor, so Claude Code can target frames and layers directly.

Gon

72,847 Aufrufe • vor 5 Monaten

Prototyping can be fun in Figma and a nightmare when you are new to it. As a self-taught designer, I had to figure everything out the hard way. I thought I had seen it all when I was learning Adobe Photoshop back then in 2012. I discovered Figma four years ago and decided to explore the tool since I had been using Adobe XD and Sketch to create some mockups. When I discovered Figma, I created the prototype I shared in my last post just because it popped into my head when I was in the bathroom 😂. I rushed out and decided to try it immediately, more like a freestyle thing and was never intended to be a real product but could be modified into becoming one if the need arises. But many misunderstood the point, which was using the video to convey a message to other young designers never to skip the process, else you will create the wrong MVP. Another design made with love in Figma #figma #uxdesign #uidesign

Prototyping can be fun in Figma and a nightmare when you are new to it. As a self-taught designer, I had to figure everything out the hard way. I thought I had seen it all when I was learning Adobe Photoshop back then in 2012. I discovered Figma four years ago and decided to explore the tool since I had been using Adobe XD and Sketch to create some mockups. When I discovered Figma, I created the prototype I shared in my last post just because it popped into my head when I was in the bathroom 😂. I rushed out and decided to try it immediately, more like a freestyle thing and was never intended to be a real product but could be modified into becoming one if the need arises. But many misunderstood the point, which was using the video to convey a message to other young designers never to skip the process, else you will create the wrong MVP. Another design made with love in Figma #figma #uxdesign #uidesign

designwithkingsley

52,597 Aufrufe • vor 1 Jahr

Get my collection of 14 fully editable Landing Pages in Figma! For FREE ⭐ Designs worth over $20,000 Here's how to grab them: 1. Follow me (so I can DM you) 2. Like this tweet 3. Comment “DM” below 4. RT is appreciated Here's what you'll get: - 14 editable Figma landing page designs - Suitable for beginners and mid-level designers seeking inspiration - Perfect for SaaS, FinTech, AI, Freelancers, and Agencies

Get my collection of 14 fully editable Landing Pages in Figma! For FREE ⭐ Designs worth over $20,000 Here's how to grab them: 1. Follow me (so I can DM you) 2. Like this tweet 3. Comment “DM” below 4. RT is appreciated Here's what you'll get: - 14 editable Figma landing page designs - Suitable for beginners and mid-level designers seeking inspiration - Perfect for SaaS, FinTech, AI, Freelancers, and Agencies

David ✷

96,552 Aufrufe • vor 2 Jahren

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

I used Figma Make to build the most delightful link library and book cover configurator ever vibecoded. For the Contra x Figma Makeathon, I decided to build an app to turn my 47 open tabs into a beautiful book. Then I put it on a shelf for the whole internet to browse. It's called Stash For each collection, you have the opportunity to design the best cover ever using the in-app configurator. It has pencils, markers, stamps, graffiti... The entire thing is made in Figma, including stamps, illustrations, and graffiti artworks. I think this is my best public work so far and I hope it lets me leave a mark on the internet.

I used Figma Make to build the most delightful link library and book cover configurator ever vibecoded. For the Contra x Figma Makeathon, I decided to build an app to turn my 47 open tabs into a beautiful book. Then I put it on a shelf for the whole internet to browse. It's called Stash For each collection, you have the opportunity to design the best cover ever using the in-app configurator. It has pencils, markers, stamps, graffiti... The entire thing is made in Figma, including stamps, illustrations, and graffiti artworks. I think this is my best public work so far and I hope it lets me leave a mark on the internet.

Noman

30,679 Aufrufe • vor 5 Monaten

This is the prompt builder I wish I had when I started vibe coding I did over 10,000 prompts and I put all my knowledge of UI into this builder. It has all the layout, color, typography and animation styles you can think of. It can even input html, figma url and adapt from hundreds of templates to create the perfect UI for you. Perfect for beginners and design explorations.

This is the prompt builder I wish I had when I started vibe coding I did over 10,000 prompts and I put all my knowledge of UI into this builder. It has all the layout, color, typography and animation styles you can think of. It can even input html, figma url and adapt from hundreds of templates to create the perfect UI for you. Perfect for beginners and design explorations.

Meng To

126,497 Aufrufe • vor 1 Jahr