Docs

Getting started

Getting Started with Anima for VS Code. Follow this step-by-step guide to efficiently integrate Anima into your development environment, enhancing your ability to convert Figma designs into React code seamlessly.

Suggest Edits
  1. Open Your Project

Start by opening the project you are currently working on in VSCode. Anima will utilize this project to learn and adapt to your coding conventions and component usage.

  1. Install Anima

Install the Anima extension from the VSCode Marketplace:

  • Navigate to the Extensions sidebar (Ctrl+Shift+X or Cmd+Shift+X).

  • Search for "Frontier by Anima: the Future of Front-end" and click Install.

  1. Initial Code and Component Scan

Once installed, Anima automatically scans your project. This initial scan helps Anima understand your project's structure, identify existing components, and detect coding patterns. You’ll receive immediate insights on component usage, redundancies, and contributions within your codebase, which can help you organize and optimize your project before moving forward.

  1. Configuration (Optional)

Anima presets its configuration based on the initial scan to align with your project's coding standards and component library. However, you can customize these settings if needed to better suit your specific requirements:

  • Navigate to the Preferences section in the Anima extension sidebar to adjust settings like frameworks, languages, and styling methods.
  1. Provide a Figma URL

To translate a specific design into code, provide the Figma URL:

  • Paste the URL into Anima's extension panel.

  1. Review Code Suggestions

Review the code suggestions generated by Anima:

  • Code Matching: Anima matches Figma components with corresponding elements in your codebase.
  • Implementation Suggestions: Receive full screen implementation suggestions that reuse existing components and adhere to your coding patterns.
  • Integration: Easily integrate these suggestions into your project to save time and maintain consistency.
    Code Review Screenshot

By following these steps, you can leverage Anima to not just translate designs into code but do so in a way that respects and utilizes your existing project structure and components efficiently. This guide is intended to help you navigate the setup process easily and start benefiting from Anima’s capabilities without delay.

Updated 17 days ago