Anima allows designers to create fully-functional prototypes in Sketch and developers to export those prototypes as HTML & CSS, as well as React and Vue.js code. You have the option of downloading a code package for your entire design, a single screen, or an individual component.
❗️To convert a Sketch design into code, you will need an Anima account (with a Pro/Business Plan if you intend to export or copy the code).
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 Sketch.
Open the Figma design you created using Anima (If you don't have one, here’s a Sample File).
Select the artboards you want to translate into code.
Preview and Sync your Sketch design to your Anima project
Option 2: Sync your design without previewing
You can sync the design to your Anima account without previewing it, by clicking Sync next to Specs in the Export tab of the plugin:
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:
You can export the HTML code package directly from the plugin: select the artboards and click Export next to Code:
Choose the destination for the package and save it in your device:
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
❗️Please note:
Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.
Get involved in our Anima Community Forum!
New to Anima?
Learn More