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.

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :(... show more

patti

4,513 subscribers

16,274 views • 6 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

220,996 views • 1 year 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

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

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 views • 3 years ago

F*CK IT. IT'S NOWRUZ 🔥 My $69 Framer template. Yours FREE. 24hrs only. This SaaS template is built to convert. Zero code. Already used by startups. To claim: • Like • Retweet • Comment anything I'll DM you the discount code (must be following) Expires tmrw.

F*CK IT. IT'S NOWRUZ 🔥 My $69 Framer template. Yours FREE. 24hrs only. This SaaS template is built to convert. Zero code. Already used by startups. To claim: • Like • Retweet • Comment anything I'll DM you the discount code (must be following) Expires tmrw.

Firdavs Abdunazarov

16,736 views • 1 year ago

🚨BREAKING: You can now build full websites by just typing. It’s called Youware, and it runs on pure vibe coding. Here’s how it works (with a live demo):👇 1. Create a web page or game just by typing. You can even send a screenshot to make it live. 2. Use built-in tools like Figma, YouTube, and Notion. 3. Change a Figma design into a real website. 4. Change how the webpage looks with one click using the boost button on the profile page. 5. Easily deploy code with a link you can share. 6. Highlights: free online AI coding. Try it today:

Hasan Toor

73,516 views • 1 year ago

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

78,970 views • 5 months ago

Designed this simple Framer one-pager landing page for personal portfolio I will charge 49$ for this in marketplace But if you want it for free then: 1- Comment + Retweet + Like 2- Follow so i can DM you the link! If you want other framer or figma designs, DM me

Designed this simple Framer one-pager landing page for personal portfolio I will charge 49$ for this in marketplace But if you want it for free then: 1- Comment + Retweet + Like 2- Follow so i can DM you the link! If you want other framer or figma designs, DM me

Asad Synt

14,451 views • 1 year ago

I asked o1 to help me code the wii menu it built a react app that renders in chatgpt canvas I fed it a screenshot and it one-shotted the basic layout—even the striped background—then I kept on prompting to add animations, etc

I asked o1 to help me code the wii menu it built a react app that renders in chatgpt canvas I fed it a screenshot and it one-shotted the basic layout—even the striped background—then I kept on prompting to add animations, etc

edwin

139,305 views • 1 year ago

One Twitter DM can change your life. So I built a product to do it for you. Automatically DM: - Your followers - People who comment on a post - Your competitor's followers Reach 1000+ people on auto-pilot. Like + comment and I'll give you a code to try it for free!

One Twitter DM can change your life. So I built a product to do it for you. Automatically DM: - Your followers - People who comment on a post - Your competitor's followers Reach 1000+ people on auto-pilot. Like + comment and I'll give you a code to try it for free!

Andros

135,634 views • 9 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 • 3 months ago

Built this Self-Transformation site inspired by random video (no clue who made it) but it’s 🔥 🛠️ Tools: Figma, Framer, Spline & more... I’m giving it away to a few lucky winners 🎁 Want it? 👤 Follow (so I can DM you) ❤️ Like 💬 Comment "Want" 🔁 Repost to boost your chances

Built this Self-Transformation site inspired by random video (no clue who made it) but it’s 🔥 🛠️ Tools: Figma, Framer, Spline & more... I’m giving it away to a few lucky winners 🎁 Want it? 👤 Follow (so I can DM you) ❤️ Like 💬 Comment "Want" 🔁 Repost to boost your chances

Sameer

12,656 views • 1 year ago

My new Framer template is ready! I will charge 49$ for this in marketplace But if you want it for free then: 1- Comment + Retweet + Like 2- Follow so i can DM you the link! Here is the preview link: If you want other framer or figma designs, DM me

My new Framer template is ready! I will charge 49$ for this in marketplace But if you want it for free then: 1- Comment + Retweet + Like 2- Follow so i can DM you the link! Here is the preview link: If you want other framer or figma designs, DM me

Asad Synt

39,883 views • 1 year ago

Designing a website will never be the same again. Take a look at this quick video I recorded. I generated a complete landing page in Figma in less than 60 seconds. This is game-changer for people like me, who don't know much about design but want to create something decent with little effort. Dora is sponsoring this post. They have built something truly awesome and unique. You can try them out by going to Figma, and loading the Dora AI plugin. It's that simple. You can also click on this link to go directly to it: This will make a professional web team 10 times more efficient. I hope you enjoy it.

Designing a website will never be the same again. Take a look at this quick video I recorded. I generated a complete landing page in Figma in less than 60 seconds. This is game-changer for people like me, who don't know much about design but want to create something decent with little effort. Dora is sponsoring this post. They have built something truly awesome and unique. You can try them out by going to Figma, and loading the Dora AI plugin. It's that simple. You can also click on this link to go directly to it: This will make a professional web team 10 times more efficient. I hope you enjoy it.

Santiago

196,536 views • 1 year ago

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉

Genspark

174,132 views • 21 days ago

We’re giving away our premium Framer template, Startleap✨ Usual price is $59 but it's FREE for 24 hours 🕑 Here’s how to get it: - Like + Retweet + Comment “Startleap” - Follow (so I can send it to you) And we'll send the link + redeem code to you!

We’re giving away our premium Framer template, Startleap✨ Usual price is $59 but it's FREE for 24 hours 🕑 Here’s how to get it: - Like + Retweet + Comment “Startleap” - Follow (so I can send it to you) And we'll send the link + redeem code to you!

Skale.solutions

21,548 views • 1 year ago

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.

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 views • 1 year ago

✨ To inspire more people to go build something now that we have AI to help us (especially non-tech people, cause I still know so many who are scared of building something): I added a [ BUILD IT ] button to It's like a mini-Lovable/Replit/v0: Any idea you see you like, you can click [ BUILD IT ], and it will use Opus 4.6 to build a landing page for it And then you can download the code it generated It's not a full startup of course, but a nice preview of what it can be, to give you an idea and inspire you to build it out further The code is live streamed also so you can see it being built 😊 Ironically this itself took me 1 hour to build with AI too Completely free and I pay for the tokens (please don't abuse it :D)

✨ To inspire more people to go build something now that we have AI to help us (especially non-tech people, cause I still know so many who are scared of building something): I added a [ BUILD IT ] button to It's like a mini-Lovable/Replit/v0: Any idea you see you like, you can click [ BUILD IT ], and it will use Opus 4.6 to build a landing page for it And then you can download the code it generated It's not a full startup of course, but a nice preview of what it can be, to give you an idea and inspire you to build it out further The code is live streamed also so you can see it being built 😊 Ironically this itself took me 1 hour to build with AI too Completely free and I pay for the tokens (please don't abuse it :D)

@levelsio

276,731 views • 3 months ago

Excited to share my new Framer template ✨ Paywave: Fintech/SAAS website template built in Framer . Easily worth $1,400+ but now FREE for 48 hours To claim it, Like, RT and comment "Template" (Must be following so I can DM you) LIVE demo →

Excited to share my new Framer template ✨ Paywave: Fintech/SAAS website template built in Framer . Easily worth $1,400+ but now FREE for 48 hours To claim it, Like, RT and comment "Template" (Must be following so I can DM you) LIVE demo →

James

44,681 views • 1 year ago

🙌Meet Artifig: A Figma Plugin to Generate Figma Plugins Do you use Figma and ever feel like this: - Your mind is bursting with plugin ideas, but you can't bring them to life because you don't know how to code? - You want to focus on design, but repetitive tasks keep slowing you down? - You dream of creating custom tools for your team, but lack the time or resources? I’ve been there too. That’s why I created Artifig. ✨ What is Artifig? Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed—simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin. 🚀 Redefining Figma Plugin Development The core philosophy of Artifig is simple: Designers often have countless ideas and creative visions, but many of them remain unrealized due to a lack of technical skills. We believe designers shouldn’t be limited by their inability to code. You should focus on creating, not be held back by technical barriers or repetitive tasks. Artifig takes you directly from "description" to "implementation." 🛠️ How Does It Work? 1. Describe Your Needs: Tell Artifig what you want, like “Create a skew transformation tool for objects, supporting horizontal and vertical skew with real-time preview functionality.” 2. Generate and Run the Plugin: Artifig instantly generates the plugin and runs it right within Figma. For example, the generated plugin can apply skew transformations to objects, precisely controlled via matrix transformations, with an intuitive user experience. 3. Optimize and Iteration: Need adjustments? Simply describe them, and Artifig will Iterating the plugin step by step. 4. Share Your Creations: Publish your plugins to the Artifig community, or remix plugins shared by others to build on their ideas. No learning curve. No complex steps. It’s as simple as that. 🌟 Key Features - Zero Barrier to Entry: No coding experience needed—any Figma user can create plugins effortlessly. - Multilingual Support: Works in multiple languages, including English, Chinese, French, Japanese, and German. - What-You-See-Is-What-You-Get: Generated plugins run in real-time, so you can quickly validate and refine your ideas. - Open and Flexible: The generated plugin code is 100% yours—modify it, distribute it, even use it commercially. - Global Community: Share your plugins, explore others’ creations, and publish your plugins to the Figma community. 🎯 Why is Artifig a Game-Changer? 1. No More Repetitive Work Let AI handle the tedious, time-consuming tasks: batch renaming layers, auto-aligning elements, or applying styles in bulk. All you need to do is say, “Import a PDF and arrange each image on the canvas with 20px spacing.” 2. Quickly Bring Ideas to Life From color contrast checks to data imports and custom components, all your “what if we could” ideas can now become plugins. Just one natural language description, and Artifig makes it happen. 3. Custom Tools for Your Team Build tailored tools for your team, creating unique solutions to streamline your workflow. 4. Not Just a Tool, But a Learning Experience Artifig explains the logic behind the code it generates, helping you understand Figma APIs and JavaScript. Today, you’re a designer; tomorrow, you could also be a design engineer. 🧑‍🚀👩🏻‍💻🥷🏻 Who is Artifig For? - Beginners: No development experience needed—just describe your ideas and let Artifig do the rest. - Experts: Save time and focus on high-value tasks while Artifig handles the repetitive work. - Learners: Use Artifig as a bridge to deepen your understanding of development. - Teams: Build custom tools to enhance collaboration and efficiency. 🎉 Ready to Get Started? I believe designers’ time and focus should be spent on creating, not on wrestling with complex tools. Artifig is the first step toward realizing this vision. Try Artifig now and experience an unprecedented flow of creativity!

🙌Meet Artifig: A Figma Plugin to Generate Figma Plugins Do you use Figma and ever feel like this: - Your mind is bursting with plugin ideas, but you can't bring them to life because you don't know how to code? - You want to focus on design, but repetitive tasks keep slowing you down? - You dream of creating custom tools for your team, but lack the time or resources? I’ve been there too. That’s why I created Artifig. ✨ What is Artifig? Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed—simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin. 🚀 Redefining Figma Plugin Development The core philosophy of Artifig is simple: Designers often have countless ideas and creative visions, but many of them remain unrealized due to a lack of technical skills. We believe designers shouldn’t be limited by their inability to code. You should focus on creating, not be held back by technical barriers or repetitive tasks. Artifig takes you directly from "description" to "implementation." 🛠️ How Does It Work? 1. Describe Your Needs: Tell Artifig what you want, like “Create a skew transformation tool for objects, supporting horizontal and vertical skew with real-time preview functionality.” 2. Generate and Run the Plugin: Artifig instantly generates the plugin and runs it right within Figma. For example, the generated plugin can apply skew transformations to objects, precisely controlled via matrix transformations, with an intuitive user experience. 3. Optimize and Iteration: Need adjustments? Simply describe them, and Artifig will Iterating the plugin step by step. 4. Share Your Creations: Publish your plugins to the Artifig community, or remix plugins shared by others to build on their ideas. No learning curve. No complex steps. It’s as simple as that. 🌟 Key Features - Zero Barrier to Entry: No coding experience needed—any Figma user can create plugins effortlessly. - Multilingual Support: Works in multiple languages, including English, Chinese, French, Japanese, and German. - What-You-See-Is-What-You-Get: Generated plugins run in real-time, so you can quickly validate and refine your ideas. - Open and Flexible: The generated plugin code is 100% yours—modify it, distribute it, even use it commercially. - Global Community: Share your plugins, explore others’ creations, and publish your plugins to the Figma community. 🎯 Why is Artifig a Game-Changer? 1. No More Repetitive Work Let AI handle the tedious, time-consuming tasks: batch renaming layers, auto-aligning elements, or applying styles in bulk. All you need to do is say, “Import a PDF and arrange each image on the canvas with 20px spacing.” 2. Quickly Bring Ideas to Life From color contrast checks to data imports and custom components, all your “what if we could” ideas can now become plugins. Just one natural language description, and Artifig makes it happen. 3. Custom Tools for Your Team Build tailored tools for your team, creating unique solutions to streamline your workflow. 4. Not Just a Tool, But a Learning Experience Artifig explains the logic behind the code it generates, helping you understand Figma APIs and JavaScript. Today, you’re a designer; tomorrow, you could also be a design engineer. 🧑‍🚀👩🏻‍💻🥷🏻 Who is Artifig For? - Beginners: No development experience needed—just describe your ideas and let Artifig do the rest. - Experts: Save time and focus on high-value tasks while Artifig handles the repetitive work. - Learners: Use Artifig as a bridge to deepen your understanding of development. - Teams: Build custom tools to enhance collaboration and efficiency. 🎉 Ready to Get Started? I believe designers’ time and focus should be spent on creating, not on wrestling with complex tools. Artifig is the first step toward realizing this vision. Try Artifig now and experience an unprecedented flow of creativity!

yancymin

21,222 views • 1 year ago