Happy to announce: Anima’s new blog is live

Anima was created by designers, developers, and product managers, who understand the struggles that come with the handoff process. Instead of seeing ideas materialize, too much time is spent explaining every step to one another.

Save valuable time. Get React code directly from Figma in just one click.

Overview ☝️

💻Developers: get code from Figma

3 reason to use the Chrome extension 🔥

  1. Save time — stop translating UI from scratch.

Translate Sketch designs into developer-friendly React code

Overview 👇

How To Export Code ❓

Developers, now you can quickly import Sketch designs directly to Anima and get code instantly — without ever installing Sketch

Import Sketch designs directly to Anima and get React/HTML code instantly

Overview 😎

What is Sketch?

Access React code in CodeSandbox and navigate better

What is CodeSandbox ?

Get developer-friendly HTML code from your Figma design

Overview 👀

How To Export Code?

Anima for Figma is now 10x faster!

What is the difference you ask?!

Automatically generate HTML from a Sketch design


How to export code

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

Grouping with multiple-selection

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