Figma to functional: AI-powered iteration with Anima’s Playground
An AI-assistant that enhances your designs without taking away your creative control
Though I hate to say it, there are limitations to designs and prototypes created in Figma.
A designer knows what the end-product should look like, but developers might have to make guesses on what is intended in small nuances the design missed (like how many milliseconds a micro-interaction should be). Or when we test designs with participants, the Figma prototype might not fully represent a live website because not all interactions are prototyped (or it’s just buggy).
That’s where low-code and no-code tools come into play.
These tools give UX designers the power to interact with realistic, live previews of their working designs so they can rapidly iterate and get feedback from both stakeholders and users (all without using developer resources).
There are quite a few tools with this functionality, like Lovable and Anima, but Anima has really begun to change the game of how UX designers can generate and iterate on coded design with their new Playground feature.
Anima is already a staple in Figma’s design workflow — they have over a million Figma plug-in users and even helped Figma create their infamous dev mode. But the new Playground feature uses an AI-assistant to make design and code changes without having to make a single update in the Figma file.
Let’s check out this new feature and how designers can use an AI-assistant to power and enhance their designs without losing creative control (or feeling replaced).
Designer’s guide to Anima Playground
1. Prep Figma design
Before you can run the Anima plug-in, your Figma designs should be at a level of detail and fidelity you’re happy with before generating code for a live preview. But even if it’s not 100% ready, the Playground feature can help it get there (as we’ll soon see).
Here are some quick best practices to prepare your Figma work for Anima:
- Name your Figma layers: Anima retains the layer names so this helps keep things tidy and clean once you move over to code
- Create frames: Frames help Anima organize and understand relationships between elements, but don’t overdo it (too many nested frames can complicate the code)
- Add auto-layout: After creating frames, add auto-layout to the frames so Anima knows what position elements should be constrained to and how the frame should respond when the screen size changes
- Use components: Anima detects reused components in a design, and the Playground feature can change all components from one prompt (I used Carbon Design System for my designs, but you can also use a custom design system)
2. Run Anima plug-in in Figma
After your designs are prepped and ready, it’s time to run the Anima plug-in for Figma. In this step, you need to open Anima in Figma, specify the frame you want to generate code for, and select the javascript framework for your project.
Note: I am using a “Pro” plan in Anima, so my plug-in’s interface may look slightly different from yours if you have a different plan.
How to steps:
- Press ⌘+K or select “Actions” from the bottom toolbar in Figma (if using UI3) to open Figma plug-ins
- Search and select “Anima” → Select “Run”
- Select the primary frame (in the “Component code inspect” view) then Anima will automatically start generating code
- Once code is generated, select the dropdown containing the javascript frameworks (on the right of the Figma frame name selected)
- Select “React,” “Vue,” or “HTML” (this determines your selection options; I chose “React” for my designs)
- Select a UI library (I chose Shadcn) → Select “Javascript” or “Typescript” (I chose “Typescript”)
- Select “Yes” or “No” if Anima needs to generate a theme for your designs (I chose “Yes”)
- The default styling for my selection is “Tailwind CSS” (the selection options differ depending on your previous selections)
3. Open and iterate in Anima Playground
Alright, now the Figma designs are prepped and set up in Anima, it’s time to open the designs in Anima Playground.
Note: The Playground feature is available on all Anima plans (even the free plan, but with limitations).
How to steps:
- With the primary screen selected in the Anima plug-in, select “Open in Playground” (if this button is disabled, the code is still actively being generated)
- Anima opens in your default browser; a new “chat” appears in the left panel, and the code and preview in the main view
- In the bottom-right corner, select the Figma icon in the chat feature → Select “Pair with Figma” in the modal that appears (this is optional, but will add an additional tab in Anima so you can directly compare the Figma designs to the preview)
Note: Each time you select “Open in Playground” in Figma, a new file and chat is made in Anima — accessible by the panel icon button in the top-left corner
Once the preview is ready in Anima, you can start making code and design changes in the left panel’s AI chat. You can ask the AI-assiatnt to “make the tab items work” or even “change the header color to HEX value #EBF2FF.”
The initial preview Anima generated from my Figma designs contained some interaction, but not all elements were interactive yet (like the header tabs). So I asked the AI-assistant for alterations.
- I asked the AI-assistant, “Make the header items and the document items interactive,” and the chat immediately began to update the code
- The AI-assistant responded with, “I’ll make the header items and document items interactive while preserving all existing styling and functionality”
- Then I asked the AI-assistant, “Make the hover state for the header items and document items have a dark-grey border”
- The AI-assistant responded with, “I’ll update the hover states to use a dark grey border for both header and document items”
Note: If you don’t like the changes, you can revert to a previous version using the undo button in the AI-chat (but this deletes the current version).
Lastly, you can check to make sure the designs are responding as intended with a tablet and mobile view.
If they aren’t responsive, the AI-assistant can make the breakpoints for you — just ask it to “make the design responsive for tablet and mobile screens.” If you added frames and auto-layout in Figma, this should be doable for the Playground feature.
How to steps:
- In the Anima Playground’s preview section, select “Switch to device mode” on the right above the preview
- To see the responsiveness, select “Full screen” to be taken to a new view to actively adjust the screen’s width
- Ask the AI-assistant for additional adjustments to the breakpoints (if needed)
4. Export code
Once you’re happy with the preview of the designs in Anima, it’s time to export and share the code.
Anima gives you three ways to do this:
- Push directly to GitHub: Anima gives you the option to connect your GitHub through your settings or you can select “Push to GitHub” in the top-right corner of your project in Playground to specify the repository name
- Download the code: Next to the “Push to GitHub” button is the “Download code” button, which allows you to download a zip file to run elsewhere
- Share with collaborators: Depending on your Anima plan, you can share the project with teammates by adding them as a contributor or viewer (done in the Anima app)
5. Alternative method: Customize with AI
If you prefer to tailor and download your design’s code directly from Figma, you can use Anima’s “Customize with AI” feature.
Note: This isn’t mandatory to use for Anima Playground — just another option to customize your design’s code, but directly in Figma.
In the bottom-right corner of the Anima’s Figma plug-in, there’s a purple button that says, “Add prompt” with a sparkle icon. After selecting this button, you get the option to toggle on “Customize with AI” to use custom requests or presets.
The presets allow you to select how you want the design to respond and interact (like enabling “make it work”) so you have a functional preview of the design. You can also add code samples and custom instructions (I.E., specifying an interaction you want a button to have).
The “Customize with AI” feature allows you to use AI to change and iterate the code, so you can directly download from Figma and run it elsewhere.
The new Playground feature in Anima is showing us a potential future of designing with AI. I can use the AI-assistant to make live updates to code (even multiple changes at the same time) if I want to explore a new color or interaction pattern — all without asking a developer for help.
While using this feature, I didn’t feel my role as a designer was being replaced by the AI-assistant — it felt more like my collaborative partner.
Not only that, it provides proactive help when needed, such as a terminal error. As a designer, I have no idea how to fix that kind of error message (I was scared), but the AI-assistant gave me a prompt to “Try to fix,” and I selected the prompt with no hesitation.
Anima’s launch of the Playground feature gives us a new way to change our design workflow to incorporate AI. These workflow changes will accelerate design explorations, stakeholder feedback, and testing cycles — benefitting product development and the overall user experience.
