How Designers Built a Working Figma Plugin in 48 Hours (with AI)
Can designers really build a working Figma plugin in 48 hours? Christoph Hellmuth (NordVPN), Raquel Pereira (Nokia) and Casandra Sandu (Trackunit) walk through exactly how their team of 10 designers built Swap Wizard during the Into Design Systems AI Hackathon, won first place out of 150 designers and shipped a real plugin that solves component library migrations in Figma.
You’ll see the full process: how they scoped the problem, planned before prompting, used Cursor’s Plan, Agent, Ask and Debug modes, set up GitHub for async collaboration across time zones, built a landing page with Lovable, and refactored 4,000 lines of AI-generated spaghetti into a production-ready codebase. They also share the free Figma Plugin Developer Skill that saves you tokens and prevents the most common plugin bugs from day one.
This session was presented at the AI Conference for Designers 2026 by Into Design Systems.
Get all 15+ hours of recordings from the AI Conference for Designers: https://www.intodesignsystems.com/
⏱ Chapters 00:00 Intro: Can designers ship a Figma plugin in 48 hours? 01:15 Meet the Swap Wizard team (10 designers, never met before) 02:30 The problem: Why Figma library swaps break 03:45 Live demo: Swapping libraries and reattaching detached components 06:30 The 5 tools they used (Figma, Cursor, GitHub, Lovable, Claude) 07:45 Step 1: Plan before you prompt 09:30 Technical research before writing any code 11:15 Setting up GitHub for 10 designers across time zones 12:30 Git for designers: 6 concepts you actually need 14:00 Prompting tips: Clarity, Context, Constraints 16:15 How AI tokens and pricing actually work 18:30 Cursor modes explained: Agent, Plan, Ask, Debug 21:00 Walkthrough: Using Plan mode to scope a plugin 23:30 Debug mode in action (finding bugs without guessing) 26:00 Vibe debugging: What to do when AI goes in circles 27:45 AI Skills: Turning your agent into a subject matter expert 29:30 Free Figma Plugin Developer Skill (link below) 31:00 Refactoring 4,000 lines of AI-generated code 33:00 Vibe marketing: Building the landing page in Lovable 34:30 Publishing your plugin to the Figma Community 35:30 6 takeaways to ship your own plugin 37:00 Q&A: Detached components, UI design, hackathon advice
🔗 Links Mentioned Swap Wizard plugin: https://www.figma.com/community/plugin/1609887873208346705/swapwizard Into Design Systems: https://www.intodesignsystems.com/
💡 Key Points
• Every minute you spend planning before prompting saves an hour of debugging later. The team spent the first few hours of a 48-hour hackathon not writing any code.
• A vague prompt cost them $9 over two minutes with low precision. A clear, structured prompt with the right model did the same task in seconds for almost nothing. 500x cheaper.
• Use the right Cursor mode for the job: Plan mode to scope, Agent mode to build, Ask mode to learn, Debug mode to fix root causes instead of guessing.
• Designers are already great at spotting problems. Identifying the bug is 80% of the work. AI just needs the right context, screenshots and logs to fix it.
• AI Skills work like Legos. They’re modular, plug-and-play and turn your generalist agent into a domain expert. But always read a skill before installing it. Prompt injection is real.
• You don’t need engineering skills to ship. You need good scope, the right tools and the discipline to commit often and roll back when things break.
🎬 Get all 15+ hours of recordings from the AI Conference for Designers, with sessions from WhatsApp, Atlassian, Miro, Figma, Nokia, NordVPN, Trackunit and more: https://www.intodesignsystems.com/
FIND INTO DESIGN SYSTEMS ON SOCIAL LinkedIn: https://www.linkedin.com/company/into-design-systems/ YouTube: https://www.youtube.com/@IntoDesignSystems
FIND THE SPEAKERS ON SOCIAL
Raquel Pereira (Lead UX Designer, Design System, Nokia) LinkedIn: https://www.linkedin.com/in/raqper/
Casandra Sandu (Design System Specialist, Trackunit) LinkedIn: https://www.linkedin.com/in/casandrasandu/
Christoph Hellmuth (Lead Product Designer, Design Systems, NordVPN) LinkedIn: https://www.linkedin.com/in/chellmuth/
#designsystems #figma #vibecoding #cursor #ai #lovable