Тёмный

10 EASY Figma Animations for Beginners In 1 HOUR 🔥| Figma Smart Animate Tutorial 

Saptarshi Prakash
Подписаться 104 тыс.
Просмотров 125 тыс.
50% 1

Your Figma Designs are as good as dead without animations!
Here are 10 easy-to-implement Figma animations that are perfect for beginners. These animations not only add a touch of magic to your designs but also draw inspiration from your favorite websites!
We'll be creating easy and elegant button, text & sweet mesh gradient animations, all within Figma, no After Effects needed! Whether you're a seasoned designer looking for fresh ideas or just starting your design journey, these animations will spark your creativity and elevate your day-to-day projects.
Fire up your Figma Screens and try to follow along!
Make sure to leave a LIKE, and SUBSCRIBE for the latest insights on UX design, UI revamps, and more!
Share your thoughts in the comments below! 📩
Join my community: nas.io/sapta
Join my Instagram broadcast channel to never miss an update: ig.me/j/AbadG67M--mvwepf/
Get on a call with me: topmate.io/sapta
Buy me a coffee: www.buymeacoffee.com/saptarshipr
-----------------------------------------------
😃 ABOUT ME
This is Saptarshi (a.k.a. Sapta), an engineer turned self-taught Product Designer based out of Bangalore, India. I have worked with some of the very well known startups of India and learned anything and everything that is needed to create amazing experiences for the users. I'm also an active speaker, teacher and community builder, and have delivered over 60 talks, workshops and webinars on design. In this channel, I post videos with tips, strategies, tutorials and general gyaan to scale your career in Design. If you are into it, you may want to subscribe and hit the bell icon to that you don't miss out :)
-----------------------------------------------
💻 📷 🎤 MY GEAR
My Desk: bengaluru.featherlitestore.co...
Sony A7iv: amzn.to/3KQZ0LM (Primary camera)
Samyang 24-70mm F2.8 lens: amzn.to/3qDYHx0
Sony a6300: amzn.to/3gIx0v1 (Secondary Camera)
Sigma 16mm F1.4 lens: amzn.to/38DFPRR
Sony 50mm F1.8 lens: amzn.to/3rufcaB
Samson G-Track Pro condenser mic: amzn.to/37Rixsw
Rode Wireless Go 2 : amzn.to/3KQXBU0
Boya Lavalier Mic: amzn.to/2M0MZI7
Godox SL60w light : amzn.to/3HgSU3O
Godox SB-UE 80cm softbox : amzn.to/3GdNq8h
DIGITEK DTR 500 BH (60 Inch) Tripod: amzn.to/39d1m48
-----------------------------------------------
📖 CHAPTERS
00:00 Intro
00:52 FIgma Animation #1
03:52 FIgma Animation #2
06:58 FIgma Animation #3
10:47 FIgma Animation #4
19:42 FIgma Animation #5
26:25 FIgma Animation #6
32:26 FIgma Animation #7
38:39 FIgma Animation #8
45:16 FIgma Animation #9
52:41 FIgma Animation #10
57:18 Outro
-----------------------------------------------
📲 SOCIALS
Instagram: / saptarshiux
Twitter: / saptarshipr
Dribbble: dribbble.com/saptarshipr
LinkedIn: / saptarshipr
Medium: / saptarshipr
-----------------------------------------------
🎶 MUSIC
The jingles and the background score is composed by Sargam Prakash, an awesome designer and musician. Do check out his channel.
Sargam Prakash: / sargampr
-----------------------------------------------
🌟 TAGS
ui,ux,product design,ui design,ux design,uiux design,figma basics,figma tutorial for beginners,figma,figma tutorial,figma animations tutorial,figma 2023,figma tutorial web design,figma button animation,figma text animation,smart animate figma,figma smart animate,how to use smart animate in figma,user experience,saptarshi prakash,sapta,swiggy design,10 EASY Figma Animations for BEGINNERS!,Figma Smart Animate Tutorial Under 60 Minutes,figma full course
-----------------------------------------------
🌟 HASHTAGS
#uiux #design #uxdesign

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

 

11 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 98   
@raheelpasha4251
@raheelpasha4251 4 месяца назад
One of the best transition videos I have seen of Figma.. he's such a pro that I can't find him making any errors like many amateurs.. !!
@noormerchant911
@noormerchant911 7 месяцев назад
Interaction is delightful candies for users when used with relevance & it helps users in their experience. All the animations you showed are really great & have pushed me to try something more of my own.
@jayribagchi2182
@jayribagchi2182 8 месяцев назад
Thanksss a ton for these awesome tutorials! Please keep them coming!!
@GeekManTech
@GeekManTech 6 месяцев назад
That Glass Effect was Amazing
@Pratyushz
@Pratyushz 8 месяцев назад
Thoroughly enjoyed this tutorial. Thanks, gonna try these now :D
@aosis
@aosis 2 месяца назад
I liked this video a lot as it teaches some really good concepts. Only issue I found was the demo should be shown first and then its solution. It would help not only to excite the designer to make something new but also help some amateur one to try out making himself first and if stuck, see the solution.
@shashwatmanjul5119
@shashwatmanjul5119 7 месяцев назад
This tut is really good the instructions are very clear i just loved it 👍
@DavidYuan1991
@DavidYuan1991 8 месяцев назад
Thank you! I've finally found a way to make animations after figma changed the "after delay trigger" that only apply to top-level frames.
@andres1814ap
@andres1814ap 3 месяца назад
Amazing course! Thank you!
@prafulsutar.uxd.
@prafulsutar.uxd. 2 месяца назад
Exceptionally, your tutorials are informative and concise. The trippy one was the best animation of the lot. Thanks Sapta! See you in the next one soon.
@RahulVerma-uq5mr
@RahulVerma-uq5mr 8 месяцев назад
Amazing tutorial Sapta thanks
@abhinav8385
@abhinav8385 8 месяцев назад
The quality of your videos... 😍
@saptarshipr
@saptarshipr 8 месяцев назад
Thanks a lot 😃
@minakshipandey404
@minakshipandey404 20 дней назад
You are Amazing 😍 Love it Sapta, Thanks for the details.
@saintMaryscricket
@saintMaryscricket 29 дней назад
Outstanding !! One the best video of figma animation
@mohitvamsi10
@mohitvamsi10 8 месяцев назад
I thoroughly enjoyed this tutorial! Thank you for sharing such easy to follow methods ✨
@saptarshipr
@saptarshipr 8 месяцев назад
Your most welcome 😀🙏
@user-fh3vr8wo4v
@user-fh3vr8wo4v 3 месяца назад
@@saptarshipr Hi sir how to edit animation Explained video, like youtube creators please help me sir....i am a new youtuber my video editing like youtube creators please
@palaparthiprakash
@palaparthiprakash 8 месяцев назад
Quite informative .. keep it up 👍
@geekthegeek730
@geekthegeek730 4 месяца назад
just wow! I learned a lot
@abhichatterjee9064
@abhichatterjee9064 8 месяцев назад
Thank you very much Sapta for this kind of video....need more videos on Protopie Animation
@ceejayviii
@ceejayviii 2 месяца назад
Bro the heart animation was sick💯👌
@shilpichakraborty5421
@shilpichakraborty5421 8 месяцев назад
Amazing!
@RahulKumar-sw9gg
@RahulKumar-sw9gg 4 месяца назад
Awesome tutorial 😊
@graphixseeker
@graphixseeker 4 месяца назад
9th one is my favourite 🔥
@menakachandrasekhar6485
@menakachandrasekhar6485 8 месяцев назад
Simple and clear explanation! Very useful to share with my mentees. 😊
@rociotardito3385
@rociotardito3385 Месяц назад
You're the best, really. Most of the tutorials I watch are boring and I usually have to go back multiple times to understand what's being said, but you made it so well I even had fun! You're really easy to understand
@saptarshipr
@saptarshipr Месяц назад
Thank you ☺️
@yashwanthsk4612
@yashwanthsk4612 8 месяцев назад
Post more videos on animation, loved the way you explained☺
@Arjund207
@Arjund207 8 месяцев назад
Thanks for sharing this tutorial, it's very well explained. I recommend doing an hour tutorial on variables that would be helpful. Also, we can use X & Y coordinates when moving any objects for smoother animations.
@suniljadhav1889
@suniljadhav1889 7 месяцев назад
An hour tutorial on variables is really required....
@user-sm6hy1xs3n
@user-sm6hy1xs3n 4 месяца назад
very helpful Thanks :)
@user-ki8rw3er3t
@user-ki8rw3er3t 5 месяцев назад
love it bhai !!
@sanjaykumarca8592
@sanjaykumarca8592 5 месяцев назад
you killed it bro, learnt many things in 58 min I feel
@anukrititripathi152
@anukrititripathi152 4 месяца назад
Thankyou so much!
@usamamunir4415
@usamamunir4415 5 месяцев назад
thanks for making this
@uifry
@uifry 8 месяцев назад
Well Explained.
@navalsharma375
@navalsharma375 6 месяцев назад
a very useful tutorial for beginner like me
@hamzahassan
@hamzahassan 7 месяцев назад
Thank you so much bro
@arijay5211
@arijay5211 7 месяцев назад
thanks for sharing, you're so cool 😎 😎
@imanshahin5903
@imanshahin5903 4 месяца назад
great animation number 7
4 месяца назад
THANKS!!!! WOW
@gehadmagdyelkhouly96
@gehadmagdyelkhouly96 Месяц назад
you are prefect really thanks a lot
@akanshasdiary
@akanshasdiary 8 месяцев назад
The animations were pretty cool and well explained. Thanks Santa for this :)
@anuranmukherjee9022
@anuranmukherjee9022 8 месяцев назад
Yeah, Sapta is almost a Santu for designers like us! 😄
@MobileMonk
@MobileMonk 8 месяцев назад
Really Loved your Explanation on the animations...But how do you handover animations to developers?
@SisiBisi-zh1cj
@SisiBisi-zh1cj Месяц назад
Thank you so much
@buttercup9700
@buttercup9700 8 месяцев назад
Amazing content and the presentation:)I was trying to follow along but for the first animation I used Auto layout and it seems the animation did not work well.And then tried exactly like yours :Group then frame and then it worked.Is there any reason behind it?.
@lionelmourya
@lionelmourya 4 месяца назад
Thank you it was very helpful. Please upload these type of simple tings then slowly slowly upgrading to pro
@user-xo1yl7im1z
@user-xo1yl7im1z 7 дней назад
Thanks à lot
@rajeshphotography3670
@rajeshphotography3670 6 месяцев назад
Thanks alot
@jhonsnow534
@jhonsnow534 7 месяцев назад
Bro im learning web dev but i can't understand backend part So im thinking UX UI + frontend part for good salary Is this good ? Help me
@keysangyonthan
@keysangyonthan 8 месяцев назад
that rupee symbol search XD
@saptarshipr
@saptarshipr 8 месяцев назад
The struggle is real 🤣
@Stressgaming2002
@Stressgaming2002 8 месяцев назад
can you do a step by step i.e what buttons are you pressing for which operation
@paavamkutty
@paavamkutty 6 месяцев назад
The 7th one can be done in an easier way by using horizontal scrolling action.
@hiuchichan7061
@hiuchichan7061 4 месяца назад
0 degrees, 120 degrees and 240 degrees will make it easier to set up a rotation animation. Especially easier for someone with OCD.
@vmartme
@vmartme 5 месяцев назад
Thanks Friend! it's there any way to make figma typewriter animation?
@EmilyByrne2023
@EmilyByrne2023 2 месяца назад
Great, great video! It would have been helpful if you had played the animation at the beginning of each segment so viewers know whether it's useful to them before going through all the steps.
@rinkoizumi6411
@rinkoizumi6411 3 месяца назад
That parallax XD I imagine how my friend feel frustating while coding it
@user-ng4vb8iq5h
@user-ng4vb8iq5h 3 месяца назад
Hey Saptarshi! When you create one instance of it on the Preview panel, it does not animate, for me. What am I missing? Do you use alt to copy it? Is this preview panel just a frame? Any information would be awesome!
@tanyamishra8768
@tanyamishra8768 2 месяца назад
Preview panel is just a frame, correct. You can just use Copy and Paste, that also works. Alt also works.
@himankgupta325
@himankgupta325 8 месяцев назад
5TH ANIMATION IS SLIGHTLY COMPLICATED HEY SAPTARSHI CAN YOU PLEASE MAKE A WHOLE VIDEO ON HOW TO USE THE ANGLE IN FIGMA SO THAT THIS CONFUSION CAN BE RESOLVED FOR FOREVER BY THE WAY THIS IS SECOND VIDEO WHICH I WATCH AT YOUR CHANNEL AND YOUR VIDEOS ARE QUITE INTERISTING THAT'S WHY I BECOME STUDENT OF YOU. THANKS FOR SUCH DEEP AND QUALITY CONTENT. I UNDERSTOOD ALL 4 ANIMATION BUT I AM FACING PROBLEM IN THE 5TH ANIMATION I DO ALL THING BUT MY LOADER IS NOT ROTATING
@samandysimeon2991
@samandysimeon2991 2 месяца назад
Please, how were you able to bring the circle behind the text? I tried it and it’s going behind the text and frame.
@sumanmukherjee1641
@sumanmukherjee1641 8 месяцев назад
Hello Sapta, I would like to know how you manage your time, especially during the ongoing big Bengali Durga Puja festival. You are still uploading videos 😳, and I appreciate your dedication 👏. All your videos are very helpful, including this one. Subho Nabami.
@saptarshipr
@saptarshipr 8 месяцев назад
Thanks lot, Suman! Shubho Nobomi to you too 😀 I had shot this one before puja 😅
@sumanmukherjee1641
@sumanmukherjee1641 8 месяцев назад
Great 👍
@sumanmukherjee1641
@sumanmukherjee1641 8 месяцев назад
Are you coming today at Gachibowli (Utsav Culture Association) to watch the Chandrobindu band's performance?
@nehasalma9083
@nehasalma9083 6 месяцев назад
nice video but try to make a little basic like which key are you using. with this thankyou for the helpful video
@Dhrumin-yl4fp
@Dhrumin-yl4fp 2 месяца назад
Is there any plugins for animation bcz I have make the buttons but no effects is showing as I click on it please help me sir
@TheSAMRIDH
@TheSAMRIDH 2 месяца назад
This is an Important Video 😅
@suniljadhav1889
@suniljadhav1889 7 месяцев назад
An hour tutorial on variables is really required....
@Dhileep0382
@Dhileep0382 5 месяцев назад
Brother, in my tool, there is some changes. In animation, you use mostly on click tab but I have on tap. So are these same? And if I design a toggle button, so I select on tap for one time, so again I can't change 'on tap' for default type to prototype(reverse)....why brother?😢😢
@a.janani2038
@a.janani2038 2 месяца назад
Bro could you please tell me... what is ux...I can't understand clearly about the ux...
@sandeepsanju7350
@sandeepsanju7350 5 месяцев назад
6:42 How do i take that rectangle and put in the canvas.
@introvertedboishubham7828
@introvertedboishubham7828 4 месяца назад
figma has now been paid sir
@user-yi6zn8ek5r
@user-yi6zn8ek5r 4 месяца назад
such a great video but one thing you have to tell more detail on animation in your video you miss minors points which will be complicated to understand by begineers overall knowldege is perffect i like your way to teach like this
@vaibhavbansal007
@vaibhavbansal007 5 месяцев назад
Quick question. How are we gonna handoff it to developers??
@mahrukhimran5486
@mahrukhimran5486 Месяц назад
Did you find the answer?
@user-wr8cg4qp7m
@user-wr8cg4qp7m 4 месяца назад
how we export the gif of these component for developer
@user-bo8ll3zd9n
@user-bo8ll3zd9n 2 месяца назад
3:04 I can't have these things on my figma
@SehrishMoujahid
@SehrishMoujahid 4 месяца назад
i subscribe u
@saptarshipr
@saptarshipr 4 месяца назад
Thank you 😀
@arifsarker4620
@arifsarker4620 7 месяцев назад
Can you give me please Fig file?
@MineBeastYT
@MineBeastYT 3 месяца назад
3:38 how to do that
@Thingwithlegs
@Thingwithlegs 15 дней назад
Dear Sapta this is great but extremely difficult to engage, you overly repeat things again and again in your speech. Overall incredible work but leaving that tiny feedback. Cheers
@SezinAltugan
@SezinAltugan 2 месяца назад
That is orange not yellow. Sorry, color theory education was traumatic for me 8:36
@saptarshipr
@saptarshipr 2 месяца назад
😛😆
@user-ey6cr2ib6d
@user-ey6cr2ib6d 5 месяцев назад
Bro help me 😭
@snehankodutta971
@snehankodutta971 4 месяца назад
Not a good teacher
@soldier4082
@soldier4082 7 месяцев назад
👎👎👎
@sankar_mobile_photography6696
@sankar_mobile_photography6696 4 месяца назад
Thank Yu So much give me more knowlege
@sumanmukherjee1641
@sumanmukherjee1641 8 месяцев назад
In Gachibowli, Chondrobindu band is performing tonight. Aapni aschen ki? @saptarshi
@Bakchod_launde
@Bakchod_launde 4 месяца назад
i tried several times but cant find out how (press and hold funtion works) ? @saptarshi please help
@SheerDesigns
@SheerDesigns 3 месяца назад
Select the content, then press alt key and while holding alt drag the content... (Making copy of content )
@user-di3ne2dg7q
@user-di3ne2dg7q 7 месяцев назад
Thank you for a great tutorial!
Далее
Alisha Lehmann joins Juventus Women 🤍🖤
00:16
Просмотров 4,7 млн
100❤️
00:18
Просмотров 938 тыс.
Does size matter? BEACH EDITION
00:32
Просмотров 7 млн
ПАПА ГАМБУРГЕР
00:13
Просмотров 107 тыс.
How to Learn Complex Skills Quickly (And Forever)
17:14
If I Started UX in 2024, I'd Do This.
13:15
Просмотров 280 тыс.
Animate Text in Figma Like a Pro | Figma Tutorial
5:42
Top 2024 Web Design Trends
5:32
Просмотров 512 тыс.
Alisha Lehmann joins Juventus Women 🤍🖤
00:16
Просмотров 4,7 млн