From Figma to CODE with Anima - Crash Course
HTML-код
- Опубликовано: 2 июн 2024
- 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!
link.animaapp.com/3bPgRkz
Let's get started!
#anima #figma #designtocode
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / 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, 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! 
Хобби
Who here has used Anima, and how does it integrate with your workflow???
I did, it is paid. No free export to even test if the plugin is worth it.
@@paritoshk990 And is it actually worth it? I plan on paying for it, don't know if it's actually worth it so I can proceed with the payment.
@@jonsnowcrypto Go for their trial and see if it suits you. I didn't continue.
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.
The fact that Figma hasn't bothered to ship a native feature like this kinda sketch.
Anima. Enema is something else. 😄
Yup wanted to correct him myself too 😂
very cool stuff! thank you
Does it turn the web elements into 'viewports' like ionic or are they simply native html/css that's responsive?
Hey man great video! Quick question if I’m developing a website for people to signup and keep a profile, do you think it will be better after design it on Figma, to export to webflow or framer? Thanks
very helpful tutes, thanks for sharing!
Agree!
I got 100% clean HTML and CSS code using Anima... neat plugin.
Would this also work for something like parallax animation?
As allways very nice 👍
Mind Blown
Curious what size artboards you use for each device here?
Does Anima has git integration? Is there a way to export your code as a pull request from Anima?
Nicest one in these IT world
Omg i wanna use this soon
Great idea! Send us a message if you need any help :)
How the find them button works? Where did you add the on click function?
Thank you!
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 ?
wondering it too, anyone has the answer ?
wwwouuuww thats what I've been loogking for!
So happy we found each other!
I'm interested anima, if it's worth it then I'll invest, but I'm still not convinced...
Any video of a Real Project deployed?
It would be good if you shared the Fimga designs so that people can follow while watching.
Can the code be exported to a system like Bravo App?
I have a question. Every time I see an anima video, I only see a person working on one screen. Does anima allow you to connect different screens together so that it works like a prototype? Basically what I mean is if you click on menu bar section of your page, can you then link it to another page on your website so that it works like a real website?
an example of that was in the video when he added the search
Yup! check out the "Submitting a Form" section of the video. Specifically at 8:08 you can see the link between 2 pages.
@@AnimaApp Does anima have the ability to do drop down menu prototyping?
@@roter13 Yup! you can make drop downs in your design tool with overlay and Anima will support it
@@AnimaApp Another question. I have been working on a text field but it seems like you need to have placeholder text for this to work. Is there a way to make the text input editable without placeholder text?
Great video, Gary! Super clear and easy to follow 💪
I noticed he said that you lose the responsive resizing when exporting to React or Vue, is there a workaround for this?
@@berndo3038 no aswer
Nice video
I don't understand how to change font in a "select" field. plese help :(
Hi there i cant seem to link pages on new update
This prototype works on MAZE?
As allways very nice 👍 but figma in this channel looks like being the main priority 😂
Hello,
I can't get these smooth transitions between breakpoints ruclips.net/video/HpCqc5S27xc/видео.html , on my project it "jump" from one breakpoint to another, is there anything to activate ? Thank you.
is it for prototyping or production code too?
Both!
I've used Enema, it helps my flow work very well!!!
Glad you’ve had a taste of it.
Anima has evolvedved to app maker which is really awesome 😃
App, software, product, you name it!
If we have anima then why we should code html and css?
To make it easier and faster for you to set up your UI design. Developers should learn their HTML/CSS fundamentals, but afterwards if there are tools that can make it easier for you to build your apps, then use it! It's like asking why should we learn CSS when we can use CSS frameworks. It's because it makes our lives as developers easier.
Anima looks greate but it's so expensive!
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
If you ever give Anima a try, I'd love to hear your feedback!
exactly my thought
That's not professional
I swear, every time Gary says Anima, I hear enema. Anyone else with me? (Love the video)!
yess
Hi Gary, please after "searching" and "fetching data from database", how do I display the results using "figma design" since I don't exactly know what the user will be searching for?
Thanks for your videos, they are really helpful and I'm a huge fan.
Maybe try webflow for backend?
To quote that South Park episode "They taking taking our jobs".
Never! We're just here supporting your product dreams (and timelines)
This thing is revolutionary!.
But now people'll be talking about this thing taking over the jobs of UI/UX designers. 😂😂
Nah, this tool doesn't design the app for you, it converts it to code that developers can then use.
Just kidding😅
Designing is not coding.
yes what a funny concept. a piece of software putting people out of work. so funny. you are also just wrong
nice, if only it was free like figma
I think I prefer webflow 🤓
We love Webflow😊
Does webflow offer React and Vue?
@@pragatheshravi Only HTML, CSS, and JavaScript
What was this... you didn't dive into any of the code.
You need to name your layers nicely. Otherwise your code will look like shit.
First like
dude really showing tiny ass font on a tutorial at 720p…. You need to upload higher res for these kinds of videos, dude
Actually it is not a smart move to force a design tools to be a code. High cost to design.
careers. TNice tutorials was an amazing introduction to tNice tutorials software.