What can you do with Anima and Figma?

Step 1: Creating a High-fidelity Prototype or Website:

Step 2: Preview in Browser & Collaborate

Step 3: Export Code

What can you do with Anima and Figma?

  1. Create prototypes that feel real
    Check out articles about how to add: Videos, GIFs and Lotties, Live forms, embed code, Google maps, Material Design widgets and much more!

  2. Publish your Figma design as a live website
    Use Anima's Publiclink or connect your domain and go live in minutes.

  3. 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

Breakpoints

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.

Videos, GIFs & Lottie

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).

  • Click Save

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.

Embed Code

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.

Material Design Library

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.

Here is the Guide and FAQ about how you can use the Widget Library to make your design even more live!

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.👌

  1. Once the design is Synced to the Project, click Export Code in the top right corner.

  2. Select where the Code Package will be saved and click Save.

Interested in code export? Read about the all-new Auto Flexbox.

Need Hosting?

You can also host your website with us, no developers are needed.


Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?