Figma
API
Web to code extension
Adobe XD
Discord
Twitter
GitHub
Two major new features for the Figma workflow: Mid-project import & Copy to Figma2 min read
Reading Time: 2 minutesThe “Vibe Coding” Shift: The way we build has changed. It used to be strict waterfall: Design → Prototype → Handoff → Build. Not anymore.
Everyone Designs, Everyone Codes: Today, developers, PMs, and founders prompt their way to new features and iterate live in the browser. Why? Because sometimes Figma just slows us down. When you’re in the flow, you don’t want a full design process – you want to see it working.
But this speed has a cost. When we bypass the design file, Figma loses its status as source of truth. It drifts. And the instinct to resist, to force everyone back through Figma first – is the wrong move. The upsides of vibe coding are too valuable.
We shouldn’t slow down builders. We should fix the workflow.
With our new Copy to Figma and Agentic mid-project import, you can now iterate back and forth fluidly. Start in Figma, vibe code in the browser, and push those changes back to Figma. You get to enjoy the best of both worlds, using whichever tool is most useful for the task at hand, without ever losing sync.
#1 Introducing: Copy to Figma
Start anywhere—a Figma design, a prompt, a cloned website. Vibe code on it in Playground. Add features, tweak layouts, connect a database. And when you’re ready? You can simply Copy to Figma. It renders your code—auto-layout ready—back into your design.
#2 Introducing: Agentic mid-project import
We’ve also transformed how Figma context enters your existing Playground projects. Instead of starting fresh each time, you can now pull Figma designs directly into existing projects through conversation. Just paste a Figma link in chat and tell the agent what you need.
Available import modes:
- Add Screen — Import a Figma design as a new page
- Add Mobile/Tablet/Desktop — Add responsive breakpoints; show Anima how your design should look on each screen size
- Add Component — Bring a component straight from your design system
- Add Modal — Ask for the new design to open as a pop-up dialog
- Get Inspired — Adapt your current code’s styling based on a Figma reference
- Replace/Update Design — Swap out specific elements with new designs
Why This Matters
Design and code have always been different languages. The friction between them slows teams down, creates drift, and forces painful rework.
With bidirectional Figma integration, Anima becomes the bridge – not just translating design to code, but keeping both in sync throughout your entire workflow.
Start in Figma. Iterate in Playground. Push back to Figma. Repeat.
The loop is closed.
