Getting Started

Accessing Anima Playground

1. Visit dev.animaapp.com.

   

Option 1: Start from a Figma Design

1. 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.

2. Or From the Figma Plugin: Open the “Anima – Figma to Code” plugin, select a Frame or Component, and click Prompt in Playground

   
   

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:

1. 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.
  Opting out of a UI library provides better visual accuracy but less interactive functionality.

2. 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 three main panels:
   • Code Panel: View and edit the generated code.
   • Preview Panel: See the live version of your app.
   • Figma Panel(for Figma imports): See the original design provided as a reference.
   • Flow map: If your playground contains multiple screens, build and visualize multi-screen user journeys.