Anima allows designers to create Responsive and Interactive websites right inside Sketch, and export full HTML & CSS, ready for deploy.
Overview & Requirements
In this article, we will go over everything you need to export your design to an HTML code package and how it works.
To achieve this you will need:
- A design made in Sketch, Adobe XD, or Figma using Anima.
- Download Anima plugin for Sketch, Anima for Adobe XD, or Anima for Figma
- An Anima account with a Pro Plan
How To Export Code
The code can be exported directly inside Sketch, Adobe XD, or directly from Anima’s web app (Figma user).
OPTION 1 – Export Code directly from the design tool:
Figma users can export code from the web app (in-app button coming soon)
OPTION 2 – Export code via Anima’s Web App (and Figma Users)
This is an excellent option for developers and others who do not have access to the design document or design tool.
⚠️ Very important, the design must be Synced to the Anima Project before other team members can export it as code from the web app. ⚠️
- Once the design is Synced to the Project, click Export Code in the top right corner.
- Select where the Code Package will be saved and click Save.
What is Inside The Code Package?
Now the code has been exported as a Code Package in a zip file that contains the HTML files, CSS files, images, and fonts.
Want to see what it looks like? Download sample Code Package.
Once the files are unzipped, they can be previewed locally in the browser with all its Smart Layers and interactions just like a live website!
If you open the files in a text editor you’ll see a well-structured HTML and CSS:
- Each screen design gets it’s own HTML and CSS file.
- Screens with Breakpoints share the same HTML and CSS file
Export Code F.A.Q.
Absolute and Relative Positioning
By default, Anima uses
position:absolute in order to generate pixel-perfect prototypes. Turn on Auto-flexbox to get
Anima Auto-Flexbox is an automatic process that aims to replicate the thought process that developers do.
We used algorithms from the Computer Vision world and built an automated solution that takes any design, and applies Flexbox layout to it.
When the content of the title increases, it pushes the content below it instead of overlapping it.
Is the Code Responsive?
Yes! If you applied Adobe XD’s Responsive Resize to your design, the exported code, and preview in the browser, will be responsive. Learn how it works.
Design with Responsive Resizing previewed on Anima
How do Breakpoints work?
Breakpoints allow you to create an artboard for each screen width — for example, Mobile, Tablet, and Desktop. When generating code, Anima makes a single HTML file and a corresponding single CSS file from these artboards.
Desktop, Tablet, and Mobile Breakpoints
Breakpoints are efficient since it uses native CSS media queries. It allows the browser to display only the screen design that fits the current browser window size.
Another bonus is that images are loaded only for the user’s screen size, being sharp and not oversized. And, we’re loading it top to bottom for making it even slicker.
All Breakpoints in one CSS file
Hosting a Website with Forms
When you’re hosting your website on Anima, we also give you a tiny backend server to support your forms. It allows form submissions to be sent to that server and stored for you.
This server-side code cannot be simply exported and included in the code package, as it needs to run on a server rather than on the browser (which is called client-side code).
Therefore, when exporting code with forms, you’ll have to implement your own server to capture form submissions and store your data.