From Figma to CODE with Anima - Crash Course

2 Views
Published
https://link.animaapp.com/3bPgRkz - Check out Anima Now!
-- 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!
https://link.animaapp.com/3bPgRkz

Let's get started!

#anima #figma #designtocode

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

Subscribe for NEW VIDEOS!

Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

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

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!
Category
Web design
Be the first to comment