From Figma to CODE with Anima - Crash Course
Вставка
- Опубліковано 6 лип 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.
Does it turn the web elements into 'viewports' like ionic or are they simply native html/css that's responsive?
Anima. Enema is something else. 😄
Yup wanted to correct him myself too 😂
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
Would this also work for something like parallax animation?
very cool stuff! thank you
Curious what size artboards you use for each device here?
How the find them button works? Where did you add the on click function?
Does Anima has git integration? Is there a way to export your code as a pull request from Anima?
very helpful tutes, thanks for sharing!
Agree!
As allways very nice 👍
Can the code be exported to a system like Bravo App?
I got 100% clean HTML and CSS code using Anima... neat plugin.
Mind Blown
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 ?
I don't understand how to change font in a "select" field. plese help :(
Thank you!
This prototype works on MAZE?
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?
wwwouuuww thats what I've been loogking for!
So happy we found each other!
It would be good if you shared the Fimga designs so that people can follow while watching.
Omg i wanna use this soon
Great idea! Send us a message if you need any help :)
Hi there i cant seem to link pages on new update
Nicest one in these IT world
Nice video
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
Hello,
I can't get these smooth transitions between breakpoints ua-cam.com/video/HpCqc5S27xc/v-deo.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!
As allways very nice 👍 but figma in this channel looks like being the main priority 😂
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 has evolvedved to app maker which is really awesome 😃
App, software, product, you name it!
Anima looks greate but it's so expensive!
I swear, every time Gary says Anima, I hear enema. Anyone else with me? (Love the video)!
yess
I've used Enema, it helps my flow work very well!!!
Glad you’ve had a taste of it.
To quote that South Park episode "They taking taking our jobs".
Never! We're just here supporting your product dreams (and timelines)
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?
nice, if only it was free like figma
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
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
I think I prefer webflow 🤓
We love Webflow😊
Does webflow offer React and Vue?
@@pragatheshravi Only HTML, CSS, and JavaScript
First like
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.
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.