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.
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:
Click “Preview” at the bottom of the plugin panel in order to preview your prototype in a separate window. Once you’re satisfied with your preview, click “Sync to Project” or "Get Code" in the top right corner in order to save your project and export your code.
Option 2: Choose 'Get Code' from the Plugin
You can export the code without previewing the project by clicking the "Get Code" button at the bottom of the "Get Code" tab in your plugin. Choose the code framework you'd like to use and create a new project if you don't have one.
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, select the framework you are looking for and the code will appear below
To change the code framework, click "Export Code" in the top right of your screen and select your preferred framework (⚙️ button):
Select any component to instantly inspect its associated code.
Once you’re satisfied with the code, you can 'copy' components individually, or click ‘Export Code’ at the top right corner of your window, choose whether to download the code for the full project, the current screen, or an individual component selection and click ‘Download project as ZIP.’👇
When your download is complete, unzip the file from your browser’s download bar to view the code package 🚀.
👌 You can also open the current screen or an individual component selection in CodePen:
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!
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
Get involved in our Anima Community Forum!