- Anima for Adobe XD
- Install Plugin
- Create a Project
- Preview & Sync Project
- Upgrade Teams
- Sample File & Tutorials
- Anima for Adobe XD
- Responsive Design
- Set Homepage
- Hover Effects
- Entrance Animation
- Fixed Position
- Forms & Text Input
- Embed Code
- Breakpoints Viewport
- Share Prototype
- Manage Access Levels
- Publish Website
- Custom Domains
- Project Settings
Built with ❤️   in NYC & TLV
Collaborators can view the HTML, CSS, and React code of the elements of the prototype and can download* the entire project as a code package containing all HTML, CSS, and assets in a zip file.
Downloading Code requires a Pro plan
- Open the prototype screen you want to view the code for
- Select Code mode at the top bar of the Omni view
- Select any element in the prototype and the code will appear in the Elements panel. Use the Path bar on the code panel to navigate to the parent of the selected element
- Use the drop-down menu to switch between HTML and React code
- Optional – Click the red Download Code button to export the entire project as a code package (Requires Pro plan).
Code mode has a few more great features for developers to stay in control:
- Assets – Right side-bar contains all assets of the selected screen
Overrides – Select any element and add override its HTML tags and CSS properties. The changes are applied immediately, just like on Chrome Inspect Tool
The difference between Anima Overrides and Chrome Inspect Tool is that overrides done in Anima are saved, and Chrome overrides disappear after refreshing the page.
- Compare – Allows you to match a snapshot of the original design that was synced from either Sketch, Figma or Adobe XD with the Anima’s results.
- Click “Download Code“ to download the entire Anima project as a Code Package .
- The code package is a zip file that contains all the HTML files, CSS files, and assets of the entire Anima project.
- Download the sample Code Package and run it locally to preview it 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.
Why Absolute Positioning?
Developers tend to use CSS relative position, while Anima 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).
Why did my Forms break?
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.