From Figma to CODE with Anima - Crash Course

- 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! Let’s get started! #anima #figma #designtocode - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: My personal FB account: Coursetro FB: Coursetro’s Twitter: Join my Discord! ^-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, , Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website . Come to my discord server or add me on social media and say Hi!