Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 :(...

dopabees's profile picture

patti

6,688 subscribers

17,909 görüntüleme • 8 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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.
0:37

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 görüntüleme • 1 yıl önce

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!
0:32

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 görüntüleme • 3 yıl önce

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,249 görüntüleme • 3 yıl önce

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.
0:44

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 görüntüleme • 1 yıl önce

🚨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:
0:23

🚨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 görüntüleme • 1 yıl önce

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 »
0:48

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 görüntüleme • 6 ay önce

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
0:41

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 görüntüleme • 1 yıl önce

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
0:21

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 görüntüleme • 1 yıl önce

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!
2:10

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 görüntüleme • 10 ay önce

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 görüntüleme • 5 ay önce

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
0:30

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,683 görüntüleme • 1 yıl önce

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
0:58

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,892 görüntüleme • 1 yıl önce

I installed a new Visual Studio Code extension to help me write code. But this extension doesn't get in your way. It doesn't try to write code for you. It only gives you hints and recommendations about your code. I like that. Like a second pair of eyes, looking over my shoulder and telling me how I can do things better. The extension is Traycer. You can install it directly from inside Visual Studio Code. It's free forever for anyone working on open-source projects (and if you aren't, you can use it for free until the end of June.) I recorded a super-duper-quick video to show you how this extension works. I know code generation is a huge thing, but I really appreciate tools that help me do what I do better. Thanks to the Traycer team for helping me with the extension and collaborating with me on this post!
2:56

I installed a new Visual Studio Code extension to help me write code. But this extension doesn't get in your way. It doesn't try to write code for you. It only gives you hints and recommendations about your code. I like that. Like a second pair of eyes, looking over my shoulder and telling me how I can do things better. The extension is Traycer. You can install it directly from inside Visual Studio Code. It's free forever for anyone working on open-source projects (and if you aren't, you can use it for free until the end of June.) I recorded a super-duper-quick video to show you how this extension works. I know code generation is a huge thing, but I really appreciate tools that help me do what I do better. Thanks to the Traycer team for helping me with the extension and collaborating with me on this post!

Santiago

101,068 görüntüleme • 2 yıl önce

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.
2:13

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,745 görüntüleme • 2 yıl önce

🎨 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 👉
1:23

🎨 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

179,614 görüntüleme • 2 ay önce

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!
0:20

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

✨ 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)
0:55

✨ 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

277,278 görüntüleme • 5 ay önce

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 →
0:51

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,684 görüntüleme • 1 yıl önce

🙌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!
1:54

🙌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 görüntüleme • 1 yıl önce