Skip to main content

Anima Playground: Vibe coding for designers

Anima Playground lets you generate production-ready code from either Figma designs or any live website URL — instantly in your browser.

Leonardo Hurovich avatar
Written by Leonardo Hurovich
Updated over a week ago

Accessing Anima Playground

Visit dev.animaapp.com

Option 1: Start from a Figma design

  • Paste Your Figma Link directly: Add a link to a specific Frame, Group, or Component.

🔍 If your link doesn't include a selected frame, you’ll be prompted to choose one.

Option 2: Clone any URL

  • Paste a Public Website URL into the Playground input.

  • Anima will fetch the page and generate editable, responsive, high-quality code — layout, styles, and assets included.

Font handling 🔤

  • When importing a site, Anima checks if the original font is a Google Font. If it is — great! It will load automatically in the generated code.

  • If the font is not a Google Font: Anima uses a CSS fallback in the code (e.g., font-family: "CustomFont", sans-serif;)

  • If you have the font installed locally, you'll see it on your machine. However, note that visitors to your site will see the fallback font (e.g., the system default) unless the font file is embedded or hosted properly.

💡 Want to use a custom font? You can upload .woff or .ttf files directly through the Anima Playground chat.

Usage & Licensing Notes:

  • If you use Link-to-Code to generate code from a live website, you are responsible for ensuring you have the legal rights to use any imported content. This includes: Images, Fonts, Copy/text, Videos, or media.

Selecting Development Preferences

Anima Playground supports a range of development preferences tailored to different project needs:

React

  • UI Libraries:

    • Shadcn with Tailwind CSS for modern, customizable components.

    • MUI (Material UI):

      • Option to generate a custom MUI Theme Provider.

      • Option to use the default MUI theme.

    • AntD (Ant Design): Uses the default theme for streamlined design systems.

    • No UI Library: Generates all components locally, offering pixel-perfect designs. This option is ideal for marketing pages, landing pages, and informational sites where exact visual fidelity is prioritized over reusable functionality.

  • Code Format: Choose between .tsx (TypeScript - recommended) or .jsx (JavaScript) for React projects.

Recommendation: Using a UI library enhances code reusability and functionality, while opting out of a UI library provides better visual accuracy but less interactive functionality.

HTML

  • High Code Quality: Focuses on functional, clean, and maintainable HTML code.

  • High Fidelity: Prioritizes visual accuracy, ensuring the design matches the original Figma layout closely, with less focus on interactivity.

Generating Code

After setting your preferences:

  1. Click Generate.

  2. Anima's codegen will turn your design into code.

  3. The app will be built and run locally in your browser, displaying four main panels:

    • Code: View and edit the generated code.

    • Preview: See the live version of your app.

    • Figma (for Figma imports): See the original design provided as a reference.

    • Flow: If your Playground contains multiple screens, build and visualize multi-screen user journeys.
      ​

Did this answer your question?