Anima allows designers to create fully-functional prototypes in Adobe XD 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 an Adobe XD 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 Adobe XD.
Open the XD 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 XD design to your Anima project:
Click “Preview in Browser” at the bottom of the plugin panel, which will direct you to the Anima web app. Once you’re satisfied with your preview, in the Anima web app, click “Sync to Project” in the top right corner of the screen.
Option 2: Choose 'Get Code' from the Plugin
You can export the code without previewing the project by clicking on 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!
❗️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 (see how in our Figma to React YouTube tutorial 🤓 ). 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!
New to Anima?
Learn More