Website Animations Using ONLY Figma

Подписаться 823 тыс.

Просмотров 271 тыс.

50% 1

Build alongside Ran by downloading the starter file here 👉 bit.ly/3n7hcVs
Master Figma for web design with our latest in-depth course 👉 bit.ly/3TpzgtG
Need a new Figma account? 👉 psxid.figma.com/s8z3306bhq0h
The goal today is to create fancy preloading animation and hero animation for our Figma Website. This will help you impress your clients and also prepare for when you're going to hand off or develop this website yourself so you understand what kind of animations and interactions you want to use. Figma does it all, no After Effects or other design software is needed, not even plugins. Let's get started.
📽️ CHAPTERS
00:00 - Intro
00:24 - Component variants Technique
02:30 - Reveal Animation
09:04 - Preloading Animation
14:30 - Final Thoughts
⬇ Would you like to see other Figma related videos? Let us know in the comments. ⬇
Don't forget to subscribe to our channel for more Design Content. Click here 👉 bit.ly/33byV7L
📱 Find us on SOCIAL MEDIA
Ran's Instagram 👉 / ransegall
Ran's X (Twitter) 👉 / ransegall
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's TikTok 👉 / fluxacademy
Thanks for watching our video!
#Figma #WebDesign #FluxAcademy

Опубликовано:

6 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 159

@DanialJaveed Год назад

Flux Academy always coming in with the gold stuff. Thanks for this, GREAT starting point for more complex animations which I can already imagine doing. Like for example, putting more variants in the loading bar, making it look like it is actually loading instead of just going through. Animating the illustrated elements as well, and then the icons, etc. Thank you again!

@rtubiras644 Год назад

I would like you to know that the way you explain is very easy to understand and follow. Really appreciate your hard work here. Thank you so much!

@christianeholden Год назад

thanks so much for this! started using Figma transitioning from XD and still learning how best to navigate with components quickly. That replace function is new and saves time!

@felipecuenca2811 Год назад

Amazing tutorial, I had been having trouble understanding the logic behind the animations, but no more! Thanks a lot!

@callu6528 Год назад

This is gold. Can't thank you enough, you're bringing my designs to a new level

@IsionIndustries 2 года назад

I’ve been using Figma since the beginning of this year and I have to say I really enjoy using it so far. I haven’t done any prototyping work yet but I have been using After Effects only for 9 years. I’m so used to animating keyframes on a timeline so this will take some getting used to

@minnow1337 Год назад

It seems to me like when it cones to prototyping figma just isnt the right tool for the job.

@juanpablocervantes5875 Год назад

@@minnow1337 How so? What do you use?

@SonySteals Год назад

Great! As much as I do not believe you can somehow teach people how to pick fonts - your figma tutorials are the top notch youtube tutorials.

@SonySteals Год назад

Let me explain my bias - I have spent 20 years watching and talking to plethora of typeface designers allover the world. You cannot teach this to someone who just started his / her adventure with fonts. You have to become a god damn wikipedia to be able to work with typefaces without a doubt.

@rowdyleon318 9 месяцев назад

Oh my god, this video was an eye-opener. Never knew this was possible. Thank you so much for sharing.

@scribbling.panda_ 3 месяца назад

WOW! That was really cool. Loved how you have explained such complex animations in such an easy way!!!!

@ui.debbie Год назад

Of all the animation tutorials, this is packed full Thank you

@Ex3c. 2 года назад

Thank you so much. You posted this video at the right time!!!

@roryflorensa Год назад

it's gonna make my design to be another next level. thank you so much

@SnehaMohandas-ed5fd Год назад

I loved this, Taught me a lot! Thank you so much!

@designbymohsen Год назад

Great tutorial as usual. Thank you 😊

@InkiestOfInks 7 месяцев назад

literally awesome and helpful. this is my first time using figma. i’m trying to make a fun and interesting portfolio and this simple video is a game changer!! when i got it to work the first time i felt so accomplished!! thank you so much

@TheCreativeDad Год назад

Amazing video man, very insightfull. Thanks for sharing

@ramazanguler6066 2 года назад

best technic for animation in Figma, thank you very much for good lesson

@jammidugenoak Год назад

you are very good @ explaining and demonstrating - big thank you

@joninsust 2 года назад

This is the best tutorial you ever made here 🙌🏼

@levifreeman 2 года назад

mind blown.

@gabrielburgos2533 9 месяцев назад

Love Figma more and more every day, great great vid

@uxalok Год назад

There is one more easier approach to mask! - just turn the text container into frame (with clip content enabled) And in 1st state drag the text down/up and in next state center it again ❤️

@yushangyang303 Год назад

It works! thx

@Someone26809 Месяц назад

I loved it...This was everything I needed..

@spoolaye 2 года назад

Nice! Thanks for new information for me!

@Djsign_official Год назад

This is great, thank you!

@mounabouhjira5628 Год назад

Nice video i really enjoy. It's gonna help me a lot

@user-fb6ld4is2i Год назад

Love this!

@aravindr4457 Год назад

Next level ❤‍🔥& Thankyou

@thevaultkeeper Год назад

Question. Is the preloader necessary? Without the preloader will there be a long delay depending on the user's loading time?

@suniljadhav1889 Год назад

Really great great tutor......Learned a lot....Thanx

@mytvwitholamide971 2 года назад

Thanks. This is great

@putrasampang5866 Год назад

Thanks for tutorials, sorry im late wathc this video, but its so amazing 🔥💪👍

@dinezra3816 11 месяцев назад

Great video! Thank you very much :) I have a question though. How can I export those animations into react? I'm familiar with the locofy plugin but it seems like it can't generate the animations from it. (it can only generate simple fade effects and such)

@thetomiwayusuff4223 2 года назад

This is awesome

@ewelinasilkowska992 Год назад

Thank you for your video!

@FlyByWheels Год назад

thankyou very much for the useful tutorial plz make these types of videos more

@raqueliatheimpatientgardne8196 Год назад

So when making these components you can use the same one for another button just changing the text BUT to keep it working you have to NOT delete the original component on the art board?

@Progettiamodivertendoci Год назад

Wow 😮 thanks you , really great this video

@0x0081 10 месяцев назад

I wonder if you can export these animations and import them into webflow or export as css/javascript for use with frameworks or vanilla

@user-rq7qg8rd6w Год назад

Short and usefull thxs

@user-rk1dp7td5y Год назад

TToTT this helps me so much thank youuuuuuuu

@KhaledMoAdel Год назад

awesome, thank you

@dredre214L Год назад

How did you get the effects chain on the left side of the setuper?

@pachiavang6039 Год назад

Thank you!

@imshinchan4800 6 месяцев назад

Top class content thanks a lot :)

@spiritualvibration362 Год назад

Awesome tutorial. Can you make one tutorial on Drag and Drop in Figma ( vertically and horizontally too) please?

@Yash-yl7vg Год назад

Hii, I understood that we can add animations to first screen but can we do it to the next slides? Bcos all the screens load at once. I hope u got my doubt 😅😅

@areta460 2 года назад

Ran, the GOAT!

@GGGG-oj3pg 6 месяцев назад

Thanks G!

@RobG-videos Год назад

You are a master! How are you using "0ms" for timing in "after delay"? When I try this, it uses 1ms instead.

@daryllee2560 Год назад

Can I ask a question about Figma Animation that has been questioned by my Dev Team.....Can the Figma Smart Animate that you show here in the video been coded for them - and where can I get that code in Figma for them please from the prototype. Thanks!: Daryl

@AsilbekNormuminov Год назад

great. thanks

@patrickyeboah570 2 года назад

You’re a Genius Ran thank you ❤️

@adeebp.i.3751 Год назад

The best 💖

@Pixelandborder 9 месяцев назад

Nice Tutorial

@kehindeadesina9324 Год назад

very helpful

@oygapparel5212 6 месяцев назад

just a few things that will also help guys. Go to F, go down to Preferences, then check CTRL + Click opens right click menu. Another Helpful Tip: Command click on mac allows to direct select similar to the direct selection tool on Illustrator. Otherwise you will have to double click every nested item which can be annoying.

@vinceandrewsotto9630 Год назад

Impressive!!!

@captainobvious4318 Год назад

hi, one question here. whats the difference between autodelay at 0s. and None?

@ladaaron7707 Год назад

hey! this is an older video and I doubt that you will see this comment but I wanted to ask if it's also possible in Figma to play videos in the background of the website without having to start the video itself?

@shawnfrank5303 2 года назад

Wonderful tutorial,. Just a question, what if I wanted to record this as a high quality video though for portfolios? Screen recording tools usually don't record at a good resolution unless there are some tools you recommend ?

@knightnxk2906 Год назад

nvidia's recording you can record at 4k and then just crop it in premiere

@imnbmusic Год назад

nice work

@Natureshoot312 11 месяцев назад

One thing I didn’t catch is that in real world project for a company should we do animation in the same file or we should do it in a separate file? Because this make the design inconsistent and developer may not catch why we put the components outside the art board.

@shanzashakeel6573 Год назад

HELLO SIR I am using Figma starter .I just want to ask Is there ant restriction not to use hover or text or picture animation because After so many trial I was unable to put hover effect on button .I am grateful If you consider it . Thank you . Best Regards Shanza

@rijaslyan6376 Месяц назад

Flux Academy is my favorite RU-vid channel it's really helps me to learn something new always thanks a lot 😍😍😍

@FluxAcademy Месяц назад

Love that, so glad that it has helped you 🙌

@LETRONZ 11 месяцев назад

What is the purpose of the load bar? Is it only cosmetic?

@webdesignlondon Год назад

Can Figma create Image and video overlays/masks I can export using shapes and frames? ... I want a white box with transparent shapes I can lay over the top of images and videos.

@enricowolff6202 Год назад

Hey Ran, great tutorial! I have tried all these animations out, they work very well but how can you then export your animations made in Figma to HTML?

@minnow1337 Год назад

You can generate css natively but for html exports you will probably need a plugin

@pouyapj1jan122 Год назад

here is what you looking for, amigo :) --> ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kxW62eMsw0k.html&pp=ygUwZnJlZSBmaWdtYSBwbHVpbiB0byBleHBvcnQgZm9nbWEgaW50byBIVE1MICYgQ1NT. love from Iran ❤

@mahdialhassani6371 Год назад

Why did my components and all that turn invisible? When I want to export them over webflow they are still invisible? Do you know what I should do to make them visible and still have their transition function?

@compositestudios1204 2 года назад

Yo are so brilliant

@AndrewMcSpadden 9 месяцев назад

Is it possible to set up tokens for easily applying animations?

@ReactiveGaming7 11 месяцев назад

After making animation in figma just like these, how do I use them in WordPress

@minouxchat486 11 месяцев назад

Awesome tutorials! Are the resources still available? The link is gone. Thanks!

@user-mq1jb6zg1m 11 месяцев назад

After creating a website animation in Figma what is the best approach to then bring that into a website platform like Wordpress or would that have to be done in a different software? Thank you :)

@Xgil2Play 3 месяца назад

I have the same question

@bigman7856 Год назад

this does not seem to work for me. I tried doing exactly this with a dropdown component upon clicking. When I select change to, it only gives me the option to select the original component. I looked up this problem, but nobody seems to know what's wrong.

@DanielJimenez-tp8bc 11 месяцев назад

are you masking the rectangle? or the words? sooo confused

@nathan-sg7cu 11 месяцев назад

How do you export this though?

@shadrachemmanuel5355 6 месяцев назад

❤❤🎉 Great job, I must commend. But, how do you export the animation from figma?

@pablohanmaaa 2 года назад

Hi I tried to download your free courses to check the content. But it seems doesn't respond and just pulling me back upwards (on the site).

@linmei2765 Год назад

How to change your change your channel rack from Dub back to the original channel rack you have

@jonsnow4770 Год назад

How can you reliably and accurately export Figma into Html and Css without using webflow?

@flaviusneagos597 Год назад

My first ti ever gettin on soft soft was in 17 man it a whole year to use to soft soft

@ChotaJoker 2 года назад

Sir , can you please add keyboard buttons on display

@francescathegreat1 2 года назад

This is pretty cool. How does this compare to using Squarespace and using light coding which is what I do.

@testy8736 2 года назад

Bro, why wouldn't you use Invision which is much better... ?

@BhuminPatel-jy9gk Год назад

How to convert this animated website into code? I am trying to convert animated websites using locofy, but when I am running, the animation is not working.

@H2M3041 Год назад

how do you use that animation made in figma on your website, can you export it?

@enricowolff6202 Год назад

Good question. I also would like to know how you can export your animation made in Figma to HTML?

@priyankanalavade7106 Год назад

Why this effect appears after restarting preview

@asm1114 Год назад

Thank you for the effort, but I have a prob, I do apply the same thing with the animation but it doesn’t work for me

@Rose-ve4bf Год назад

I had the same. Try pressing R on your keyboard whilst you are in preview (play')

@Ralphhy 5 месяцев назад

I just want text to come from the bottom of the screen when the mouse hovers over it. I don’t understand.

@dannygaming9643 Год назад

Not working for me 😢😭

@damjanklincarevski1240 2 года назад

🤘🤘🤘

@pouyapj1jan122 Год назад

Thank you bro. You are awesome. It would also be really nice if you write the shortcuts for each work plan in the annotation or make them visual so it's easier to follow, amigo. love from Iran ❤ Do not mix government policies with people's responsibilities, we are all human beings and long live humanity. The media is also an instrument of government manipulation.

@BigKurcaci 2 года назад

👌🏼

@___moss Год назад

Any idea why my prototype arrows go straight down instead of with a curve from the right?

@EmmaQUB Год назад

Maybe you don't use the same version of Figma, maybe your variants are not spaced the same amount of pixels, maybe something else. But my guess is: it is purely how Figma draws the arrow that represents your transition, not a sign something is wrong with your transition. As long as your transition's settings are correct (source, destination, delay, type of animation...) everything should work fine.

@mahdialhassani6371 Год назад

@@EmmaQUB this is my problem too, but when i start to play it wont work? Its weird

@rebell570 Год назад

All this animating in Figma is great and all, but what happens to it when you try and turn it into an actual, fully functioning website? I've seen a lot of plug-ins and other services that claim to convert Figma designs to websites, except that many of them say nothing (or very little) about preserving animations? It would really suck having to recreate all these cool animations after exporting. That would be like giving yourself twice the work! Am I missing something?

@YasinSil Год назад

Hello. Now I want to know the answer to this question. Did you learn? What's the point if you can't export all these beautiful animations? I can also make animation with premiere pro :)