- 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!
1 view
17
2
2 months ago 00:14:08 7
I use Drag and Drop to build modern Python Apps
2 months ago 00:02:14 1
Half-Life 3: White Sands - Kleiner is Back
3 months ago 00:28:25 1
The AC6 Kits Are Finally Here, And They Are AWESOME! | 30MM STEEL HAZE REVIEW
3 months ago 09:39:18 1
Build, Test, Deploy A Frontend Ecommerce App with Nextjs, React from Scratch (2024)
4 months ago 00:07:01 11
Top 5 UX/UI Design Tips and Tricks Every Designer Needs to Know About, part 1
5 months ago 01:20:04 3
392: PHPlight Delay
5 months ago 00:04:14 1
Meditation UI Design with Flutter: Complete App Design #1
5 months ago 00:56:56 1
Figma for Edu: Config for Edu 2024 recap
5 months ago 01:23:01 1
New Website Upgrades To Make More Money
5 months ago 00:12:57 1
Learn web development as an absolute beginner
5 months ago 03:07:31 17
Learn Web Design For Beginners - Full Course (2024)
5 months ago 00:43:08 1
The Impact of Figma AI on the Future of Product Design
6 months ago 01:07:48 4
Build a Real-Time Web App with Laravel Reverb - COMPLETE TUTORIAL (Laravel, Livewire, Alpine & more)
6 months ago 00:05:16 1
Photoshop Tutorial - Create 3D Scene from a Single Photo
6 months ago 00:28:46 35
Убогий Яндекс Маркет
6 months ago 00:06:15 1
1:12 Scale Miniature Plates and Saucers | Air Dry Clay Tutorial
6 months ago 00:03:23 1
figma Cú Chulainn VS Body-kun (Stop-Motion)
6 months ago 00:01:16 1
figma Kasumi from Dead or Alive (Stop-motion) Part2
6 months ago 00:01:19 1
figma Kasumi from Dead or Alive (Stop-motion) Part1