What can you do with Anima and Figma?
Export Figma design to working HTML and CSS code
Export HTML, CSS, React, Vue (+Sass) code via plugin, web app or Google Chrome extension.
Let’s Get Started
First, install the Anima plugin for Figma from your Anima account.
You can also download the plugin within Figma!
Step 1: Creating a High-fidelity Prototype
Your Figma links work in Anima!
Figma links between artboards
Figma external links
With breakpoints, you can share a single link that works for all screen sizes, mobile, tablet, or desktop.
It is super easy to define breakpoints!
Click Responsive tab > Breakpoints (+)
Select all the artboards that represent the same webpage
Click Sync or Preview in Browser
You will be able to see the result when you change the browser width after using Preview in Browser.
Embedded videos, GIFs, or Lottie in your prototype are a great way to grab attention.
Create a Rectangle with the video / GIF position, and select it
Click Anima Panel > Media (+)
Paste your Video/GIF URL in the modal window.
Choose the Video settings (Auto Play, Loop, No Controls, Cover).
Need to upload a file? Here is how you do it on our web app.
Hover Effect & Entrance Animation
Choose the layer/group you want to add the animation to.
Click the Hover effect or the Entrance Animation (+) button.
A modal window with preset animations will pop up.
Choose one! You can even customize the CSS values.
Live Forms: Text Input Fields & Submit Buttons
Create a live form composed of Text Inputs & a Submit Button.
First, let’s create Text Fields:
Select a text layer
Click Text Input (+)
Select text input type and change a text for a placeholder (if needed).
Next, create a Submit Button:
Select the shape, text, or group you wish to make a button
Click Submit button (+) and choose the right settings
Now you can choose how you want to get form submissions — By email, in a spreadsheet, or both. You can also select a success page or a failure page that visitors are redirected to after submitting.
Now, this is a cool one.
You can embed any code snippet into a layer, an artboard, or the whole website.
For example, you can easily connect a Google map to your contact page or add a chatbot to your support page. You can even add an analytics tool to your website. Like Google Analytics, Fullstory, or a Facebook pixel.
If you’re adding a map or anything that needs a frame, create a Rectangle layer for it.
Click the Embed code (+), and paste the code snippet for a layer, frame, or project.
Anima's Widget Library holds a collection of interactive components that already contain code snippets inside of them. The Widget Library currently consists of the Material Design Library, Google Maps and soon we'll release Bootstrap as well.
Step 2: Preview in Browser & Collaborate
Time to see it come to life!
Hit Preview in Browser or Sync (the file will be synced to your Anima project without being previewed), and see your design live in the browser.
❗️As soon as your file is synced to your project in your Anima web app, you can share it with your team, stakeholders, and clients, and collaborate with comments.
Step 3: Export Code
Take it to the next level, and hand off code to engineers.
Click the Get Code tab in your Anima plugin and choose the code you need.
Choose Export Options and Code settings in your web app and click Export.
❗️Very important, the design must be Synced to the Anima Project before other team members can export it as code from the web app.
There is an excellent option for developers and others who do not have access to the design document or design tool to export the code.👌
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.
Interested in code export? Read about the all-new Auto Flexbox.
You can also host your website with us, no developers are needed.