Getting Started

Welcome to Frontier, our VSCode extension! This guide will help you navigate the setup process easily and start benefiting from Anima’s capabilities without delay.

• Open VSCode and click the Extensions icon or press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).

• Search for "Frontier" in the Extensions view.

  

• You will find the extension under “Frontier: Figma to React, leveraging your own design system and components”.

  

• After installation, Frontier’s icon will appear on the VSCode’s sidebar.

• After installing the extension, open Frontier by clicking the icon on the sidebar.

  

• If you don’t have an account yet, you can click on “Sign up for free”, you can find instructions on how to create an account here

  

• Next, we need to integrate Anima with Figma. Click the “Open” button in order to open a browser window, then click “Integrate Anima with Figma" - This is a crucial step to ensure Frontier integrates successfully with Figma and Anima, please do not skip!

  

  

• In the next screen, access is needed from Figma. Click the “Allow access” button to proceed

  

• After a brief loading screen, you should see one more confirmation screen, and the authorization process has been successfully completed.

• Lastly, click the “Back to VS Code” button, and you’ll be taken back to your code editor, where you should see Frontier open in the left panel

  

After the installation is complete, we can now begin integrating Frontier to our project!

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.

2. Initial Code and Component Scan

   • Once you’ve clicked on the Frontier icon, you will notice a sidebar appear, this side bar is divided in multiple sections: Components, Preferences and Provide a Figma URL. 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.

3. 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. You can navigate to the Preferences section on the Anima extension sidebar to adjust settings like frameworks, languages and styling methods.

4. Provide a Figma URL

   • You can also provide a Figma URL to translate a specific design into code, you can paste it under the “Provide a Figma URL section” on the extension’s sidebar

     

5. Review Code Suggestions

   • Once the translation is done, a new window should appear. This window will contain 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

       

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.