Built with ❤️   in NYC & TLV
Code
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).
Advanced Features
Code mode has a few more great features for developers to stay in control:
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.
- Assets – Right side-bar contains all assets of the selected screen
- Mark as Component forces Anima to generate a React component for the selected element. If an element is marked as a component, then it will not be a div, an img, or any other HTML tag. Instead, it will become a custom React component. This is only relevant while viewing React code, not HTML.
The Code Panel
Path Bar allows you to navigate from the child component towards its parent and view the code of the entire component.
Compare feature 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.
HTML/React menu changes the code view from HTML to React view.
React Code Preferences allow you to choose the React syntax Functions or Classes.
CodePen button opens the selected element in CodePen.
The Code Package
- Click “Download HTML“ in the top right corner 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.
– If the design is using Anima Breakpoints, Anima will export all connected screen sizes (i.e.: Desktop, Tablet, Mobile) as one HTML and CSS file.
Export FAQ
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.