## Frontier: The 1st coding assistant for Front end

# Add code to your existing project

With [Frontier](/content/frontier/index.html), create code based on Figma designs, utilizing your existing code components and preferences.

## Who is it for?

###### Developers  
Seeking efficient ways to integrate new designs into ongoing projects without disrupting existing code.

###### Design teams  
Needing to ensure their visions are executed with precision within active development environments.

## Benefits

###### Reduced Development Time  
Minimizes the need for manual coding and adjustments when adding new designs to current projects.

Ensures that new code adheres to existing coding standards and components, maintaining consistency across the project.

###### Project Consistency

###### Automated Component Matching  
Convert entire Figma files into a full-fledged web application, from navigation elements to detailed component interactions.

Helps bridge the gap between designers and developers by providing an accurate translation of design specs into developer-friendly code, enhancing team collaboration and reducing miscommunications.

###### Smoother Collaboration

## Optimize your design-to-code flow

## How to use it?

###### Step 1:

Install [Frontier’s VScode extension](https://marketplace.visualstudio.com/items?itemName=AnimaApp.vscode-anima)

###### Step 2:

Paste your Figma link

###### Step 3:

Examine the code generated by Frontier, that reuses your existing components and coding standards.

###### Step 4:

Inject the code to your project, or copy & paste it to your desired location.

## Try it yourself

###### Figma file

Check out this Figma design, based on ShadCN component library.

[Try it now](/content/an?url=https://www.figma.com/community/file/1387444896274574950/anima-vscode-example-music-app-template&utm_content=trynow-frontier-figma&utm_campaign=config2024&utm_medium=website&utm_source=content/index.html)

###### Code sample

Clone the ShadCN based repository, and see Frontier’s implementation.

[Try it now](https://github.com/AnimaApp/vscode-shadcn-demo)

#### What users say

“I really like Anima because when I show Anima’s output to clients, they can already see it as a finished product, with layouts and micro-animations giving life to it. There is no need to envision anything, it is all there in front of their eyes.”

Masoud Rawahi

CEO & Founder @PhazeRo

“ I would estimate we’re cutting the time to get from the starting line to a POC or MVP by about half (50%) using code generation.”

Jeffery Mac

SVP Services & Solutions @Radiant

“The approach we’re taking right now is largely leveraging code generation (Anima) for things like usability tests or for designing new domain components.”

Lam

Director of Digital Experience @Radiant

## Try it out today

[Start free](/content/an?url=vscode:extension/animaapp.vscode-anima&fallbackUrl=https://marketplace.visualstudio.com/items?itemName=AnimaApp.vscode-anima&ssr=false#overview&mobileUrl=https://marketplace.visualstudio.com/items?itemName=AnimaApp.vscode-anima&ssr=false#overview&utm_content=trynow-frontier-cta&utm_campaign=config2024&utm_medium=website&utm_source=content/index.html)