Anima for Figma is now 10x faster!

We are excited to introduce Instant Preview in Figma, giving you the power to turn your designs into Developer-friendly code faster than ever.

Image for post
Image for post

With Anima’s new Instant Preview, you can preview your design as code right inside Figma, and instantly.

What is the difference you ask?!

Now, Anima converts your design to code and the preview shows up instantly.

It completely changes the experience of using Anima for Figma 🤗


Automatically generate HTML from a Sketch design

Image for post
Image for post

Overview

Anima allows designers to create fully responsive prototypes that look and work exactly like the finished product using their own design tools (Sketch, Adobe XD, or Figma).

Developers can export these designs as HTML & CSS, or React code, in a matter of a few clicks. Anima gives you component-based, clean code that developers love to use.

This article takes you through how to do this, what it looks like, and just how easy it is.

How to export code

There are two ways in which you can do this, either by exporting the code directly from your design tool (Sketch, Adobe XD, or…


Designing for different screen sizes is essential for creating the best user experience. In this article, we will show you how to create responsive prototypes with Figma and Anima.

Image for post
Image for post
Turn your Figma designs into responsive prototypes

Responsive prototypes in 3 steps:

  1. Apply Constraints
  2. Connect Breakpoints
  3. Share responsive prototypes

1. Apply figma’s Constraints 📌

Constraints show how elements should respond as you resize their Frames. This helps you control how your design looks across different screen sizes and devices.

How to do it? It's simple— Pinning elements!

  • Constraints relates to the containing Frame.
  • You can’t apply constraints to Groups.
  • Left / Right / Top / Bottom / Center — Will keep the layer size fixed and pin it…


Download React components; group layers; convert to image, and code quality improvements

Anima is here to help Front-end engineers deliver faster, by automating the grunt work. Teams can convert Sketch, Adobe XD, or Figma into React code, saving precious time.

In our previous blog post, we introduced Anima’s new Code mode.

We improve code quality and developer tools on Anima on a weekly basis. Check out our latest updates.

Image for post
Image for post

Grouping with multiple-selection

Have you ever received a design file that you had to convert to code, only to find out that the hierarchy in the file is not what you had in mind?

Well now you can change how elements are grouped regardless of how…


Turn Sketch, Figma, or Adobe XD into developer-friendly React.js code with Anima

Anima is here to help Front-end engineers deliver faster by automating the grunt work. Teams can convert Sketch, Adobe XD, or Figma into React code and save precious time.

Image for post
Image for post

Step 1: Sync your design


Automatically Generate HTML from an Adobe XD Design

Anima allows designers to create prototypes that feel real inside Sketch, Adobe XD, and Figma. Developers can export designs as HTML & CSS, or React code.

Image for post
Image for post


Control how your designs look across different screen sizes

Image for post
Image for post

If you’re using XD’s Responsive Resize today, you probably save a lot of time. Having a responsive behavior inside XD makes it easier to design for multiple screen sizes.

We’re thrilled to announce that with Anima for Adobe XD v1.0.7, Anima Prototypes fully support XD’s Responsive Resize. That means that viewing prototypes in the browser will now show a responsive prototype.

Using Anima, you can now create fully responsive designs that can be resized in the browser preview and in the code.


If you are not familiar with us, Anima allows designers to create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and exports them as HTML & CSS with a single click.

You can also build and host your website using Anima, and now with better SEO!

Image for post
Image for post

Why is SEO important?

SEO means optimizing your website to search engines, so it comes higher search in results and with a clearer message. An important part of this optimization is embedding snippets of code— meta tags — to the code of a website or webpage. This helps search engines better recognize what the page is about.

Based…


Export Figma to HTML in a single click

Hi Figma Designers!

We are thrilled to announce Anima for Figma 🥳

We believe that great UX makes everything better.
We want to bring a better experience to those creating it.

Meet Anima for Figma!

The Future of Product Design

With Anima, designers have the power to create real, working UI.

Need to share a live website with a client, your manager, or an investor?
Want to release a POC of a new design to promote your agenda?
Anima will translate your design to code in a single click.

Anima for Figma

Today, we’re…

Anima App

Design to development platform

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store