Anima allows you to convert any Figma design into HTML & CSS, React or Vue.js code in a few simple steps😎 ! You have the option of downloading a code package for your entire design, a single screen, or an individual component.
❗️For starters, you'll need an Anima account (with a Pro/Business Plan if you intend to export or copy the code).
If you want to export Figma components into React.JS for free - learn how here!
Skip to a section:
Step 1 – Sync your Design to the Anima Web App
Option 1: Preview and Sync your design
The first step to using Anima is to sync your design:
Get the Anima plugin for Figma.
Open the Figma design you created using Anima (If you don't have one, here’s a Sample File).
Select the frames you want to translate into code.
Preview and Sync your Figma design to your Anima project:
Select the project from your team and click Preview at the top right corner of the plugin panel in order to preview your prototype in a separate window.
Once you’re satisfied with your preview, click Sync (at the bottom of the plugin)
or Get Code in the top right corner, in order to save your project and export your code.
Next, choose the code framework you'd like to use and select the project in your relevant team or create a new one, if you haven't already done so.
Once you choose the code framework, your project will be synced to your Anima web app account.
Step 2 – Export code from the Anima Web App
To view your design's code, open your synced project in Anima's web app and go to Code Mode.
Once in Code mode, you can select a component (selection), a screen or a full project. To change the code framework, click ⚙️ button:
Select any component to instantly inspect its associated code.
Once you’re satisfied with the code, you can export the code for the full project, the current screen, or an individual component selection by clicking ‘Download ZIP.’ You can also open a selection or a current screen in CodeSandbox: 👇
When your download is complete, unzip the file from your browser’s download bar to view the code package 🚀.
What do you get in the HTML code package?
The downloaded Code Package saves on your computer as a zip file in your selected location. Inside this zip file, you can find all of the files for your design (this includes the HTML, CSS, image, and font files).
Once the files are unzipped, you can preview them locally in the browser by double-clicking the HTML file. You’ll be able to see all of your Smart Layers and interactions, just like the final product!
❗️Note:
Each screen design gets its own HTML and CSS file.
Screens with Breakpoints share the same HTML and CSS file
What do you get in the React code package?
The code package includes all the relevant code files for your design, including individual component code.
Once unzipped, you can preview the files locally in the browser. You’ll be able to see the Smart Layers and interactions for your design, just like the actual product!
💁Want to check out the code yourself? Download our sample React code package.
What do you get in the Vue code package?
Styleguide: We created a method of generating code that removes repeating colors, text styles, and other CSS properties, they are put into reusable CSS classes and variables.
Vue code reuse: Repeating elements are detected in the DOM structure and components are automatically extracted.
Layout: We have optimized the code so that it has CSS Flexbox layout. This means that we merged layers, grouped, or ungrouped them in a way that the end results will be a clean snippet of code.
💁Read this post to learn more about Vue.js code
Bonus: Generate your components' code right inside Figma!
Now that you know how to convert your full Designs into code, you might be excited to know that there is also a way to generate your components' code right inside Figma!
Within Figma's Dev mode, you can now generate, inspect, and copy your code for free, without leaving Figma, and with read-only access. Learn how here!
❗️Please note:
When exporting the components' code from Figma's Dev mode, you will only receive the code for the specific component. Any interactions or flows, will need to be exported following the regular method through Figma's edit mode.
Get involved in our Anima Community Forum! 😎
New to Anima?
Learn More