- Anima for Adobe XD
- Install Plugin
- Create a Project
- Preview & Sync Project
- Upgrade Teams
- Sample File & Tutorials
- Anima for Adobe XD
- Set Homepage
- Hover Effects
- Entrance Animation
- Fixed Position
- Forms & Text Input
- Embed Code
- Collaborate With Teams
- Export Design to HTML
- Publish Your Website
- Manage Website
- Custom Domains
- Manage Access Levels
Built with ❤️   in NYC & TLV
Export Design to HTML
Anima enables designers to export full websites HTML & CSS, directly from an Adobe XD or Sketch App design.
Our process of transforming a design into a website involves many steps.
Basically, we’re converting Adobe XD artboards and layers into a bundle of files that includes HTML, CSS, images, and font files, ready to deploy.
Once the bundle is generated we’re doing numerous optimizations to improve the speed of the site loading time.
- Zipping text-based files
- Optimizing PNG image files
- Using Cache-Control headers for browser caching in our hosting servers
- And more!
Nevertheless, sometimes our customers are interested in exporting the package of files to host on their service or add some custom logic to it.
And while we encourage you to host it on our fast servers, whenever you want to export it — Well, that is your right.
To learn more, take a look at our guide on How to Publish a Website and Host it With Anima
There are two ways to export code:
1. Via Adobe XD:
- From the Project drop-down menu, select the Anima Project you want to export
- Click Export Code at the bottom left corner of the plugin
- Select where to save the Code package and click Save.
2. Via the Web App
- First, create a Preview in Browser by clicking the button at the bottom of the Plugin panel
- Once you open the Preview in the browser, click Sync to Project in the top right corner
- And now the Export Code button will appear
- The design must be Sync’d to the Project before it can be exported directly from the web app
- This is great for developers and others who do not have access to the design file!
The Code Package is a zip file that contains HTML files, CSS files, images and fonts.
Sample Code Package — Download
Opening the HTML files locally present the website perfectly in your browser.
If you open the files in a text editor you’ll see a well structured HTML and CSS.
In order to keep your website pixel-perfect, easily made responsive, load crazy fast, yet clean & readable — We made some choices for you about the code style. Here are some questions we get about code packs.
Developers tend to use CSS relative position, while Launchpad composes CSS with absolute position by default. The upside here is getting high fidelity, bringing your design as close as possible to pixel-perfect in browser. You’re not likely to see a line break where you didn’t expect it (relative position downside).
Breakpoints allows 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.
Breakpoints are efficient since it uses native CSS media queries. It allows the browser to skip rendering everything that isn’t relevant for the current screen size.
Another bonus, is that images are loaded only for user’s screen size, being sharp and not over sized. And, we’re loading it top to bottom for making it even more slick.
When you’re hosting your website with us, we also give you a tiny backend server to support your forms. It allows users to send to that server, and we store it 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.