From Figma to CODE with Anima - Crash Course

-- Today, we're going to check out Anima. Anima allows you to transform your designs created in Figma, Adobe XD and Sketch, into developer-friendly code across standard HTML/CSS, React and Vue. It's all responsive, too! In this video, we're going to take a project I designed with 4 different screen sizes, and use Anima to export it to a Vue project with just a few clicks.

0:00 - Introduction
0:51 - Project Overview
1:42 - Constraints and Resizing
2:25 - Importing your designs into Anima
3:05 - Previewing the Design in the Anima Browser
3:30 - Sync'ing the Project
4:40 - Adding a Hover State to a Button
6:00 - Making a Functioning Textfield
6:57 - Submitting a Form
8:20 - Making the Side Nav Animate
9:45 - Exporting Code
10:44 - Viewing the Exported Code
11:34 - The Code Viewer & Style Guide
12:42 - Collaboration
13:38 - Final Thoughts

Check out Anima!

Let's get started!

#anima #figma #designtocode

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

Who here has used Anima, and how does it integrate with your workflow???

[AdrianRosarioPR]

I would love to see a non sponsors video where you go through the code and see if it's quality code. I remember you did something like that on another video back in the day.

[scottonanski]

The fact that Figma hasn't bothered to ship a native feature like this kinda sketch.

[vladimirpetroski]

I swear, every time Gary says Anima, I hear enema. Anyone else with me? (Love the video)!

[maitrishah]

But this is a coded prototype, as in we clicked through the screens but didn't actually perform a search function...can Anima generate code for that too?

[maxpalmer]

thanks, answered lots of my questions there! subscribed!

[ShopperPlug]

I got 100% clean HTML and CSS code using Anima... neat plugin.

[tolgadur]

It would be good if you shared the Fimga designs so that people can follow while watching.

[AnimaApp]

Great video, Gary! Super clear and easy to follow 💪

[chantingdroneflutes]

I've used Enema, it helps my flow work very well!!!

[maskman]

Anima has evolvedved to app maker which is really awesome 😃

[feliperojas]

How can i do slider photos there? Thanks

[yishanlu]

How the find them button works? Where did you add the on click function?

[smtylmz]

wwwouuuww thats what I've been loogking for!

[satori_stuff]

I don't understand how to change font in a "select" field. plese help :(

[laurentdashwood]

i'm doing some integration with sass and i was wondering if it is better to code it from scratch or use a tool such as anima ?

[shoebMohammad]

very helpful tutes, thanks for sharing!

[Ninjajitsu]

Hi there i cant seem to link pages on new update

[RD-jrnv]

Seems good! I do prefer fluid layouts as opposed to fixed layout changes at breakpoints. Can’t help but feel i’d end up spending more time hacking what it produces as opposed to just writing from scratch. It will Definitely have it’s uses for smaller less complex projects though

[xSalamz]

To quote that South Park episode "They taking taking our jobs".