Docs
Start typing to search…

Getting Started

Anima Playground is designed to seamlessly convert your designs into live web applications. Whether you're a designer, developer, founder, or a citizen developer, Anima Playground empowers you to generate, preview, and edit code effortlessly, streamlining the transition from design to production-ready code.

Accessing Anima Playground

  1. Visit dev.animaapp.com.

  2. Paste Your Figma Link: On the main screen, paste a Figma link to a specific asset (frame, group, or component).

    • Note: If you paste a link without a specific selection (referred to as a Figma node), a modal will prompt you to select a specific frame.

  3. If you are already in Figma, you can simply open the “Anima - Figma to Code” plugin , select a Frame or a component, and “Prompt in Playground.”

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.

  1. 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: See the original design provided as a reference.

Updated 3 months ago