Тёмный

Figma Smart Animate | Animation Tutorial with Tab Bar 

Angela Design
Подписаться 46 тыс.
Просмотров 30 тыс.
50% 1

Figma Overlay Tutorial: • Figma Tutorial Overlay
Figma Components Tutorial: • Figma Components Tutorial
In this video I go over how to animate a tab bar with Smart Animate. I show you the entire Figma tutorial, where I go over the designs and then use the prototype mode to make the design interactive. I use Smart Animate to create a seamless transition between the frames.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
In this video I show you:
0:00 -Intro
0:59 - How to add interactivity to your Figma prototype
3:14 - Figma Smart Animate
3:52 - Page Transitions with Smart Animate
6:53 - Opacity Transitions with Smart Animate
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

Наука

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

 

13 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 47   
@belminbicevic3976
@belminbicevic3976 7 месяцев назад
You just answered my question and pain that i had for like a month. Thank you so much
@annarykalova36
@annarykalova36 3 года назад
I was struggling with this for ages. Thank you for the help!
@adelinevania445
@adelinevania445 2 года назад
thank you very much, everything is on point and exactly what I was searching for!
@plotsmoke997
@plotsmoke997 2 года назад
So rare to find the exact answer to a question. This is gold.
@rania9500
@rania9500 2 года назад
thsis is the first video i watched from your channel and i really like your teaching style ! keep going you are amazing
@emisas
@emisas 2 месяца назад
Excellent Angela!
@restuaverian4183
@restuaverian4183 3 года назад
Thanks for your help ! Amazing tutorial
@awwyis2516
@awwyis2516 2 года назад
This is so helpful! Thank you! 😄
@hisako1357
@hisako1357 2 года назад
Awesome!That's a big help for me!Thank you!
@chrischeung8893
@chrischeung8893 2 года назад
That was excellent. Thank you!
@sitorvantos
@sitorvantos 3 года назад
I found your channel this morning and I binge watched some tutorials and tried to learn with you. You and your videos are amazing, keep up with the good work and THANK YOU SO MUCH
@angeladesign737
@angeladesign737 3 года назад
I'm so happy they have been helpful! Thanks Vitor!
@Heartgroove
@Heartgroove 3 года назад
Ohhh thanks a lot! I have been looking for this during 3 hours, you saved me a lot of time :D
@angeladesign737
@angeladesign737 3 года назад
Happy it was helpful!
@geryardmon7523
@geryardmon7523 3 года назад
Awesome!!! Thank you @Angela Delise. Your videos are short and quite focused on the subject. You are giving us an interesting base that is delightful and fluid that grows and makes us improve along this journey with you.
@angeladesign737
@angeladesign737 3 года назад
Thank you so much Gery!
@francosalina9373
@francosalina9373 2 года назад
Awesome! thanks youu
@k-techdev8992
@k-techdev8992 3 года назад
great video as always, am learning a lot; thank you so much
@angeladesign737
@angeladesign737 3 года назад
Happy it was helpful!
@vu8860
@vu8860 2 года назад
Your tutorial is very helpful. Besides, i love your voice :v
@DrawBioMed
@DrawBioMed 3 года назад
Amazing tutorial. Thank you!
@angeladesign737
@angeladesign737 3 года назад
Glad it was helpful!
@damarisvicencio7420
@damarisvicencio7420 17 дней назад
THANK YOU
@rmla6036
@rmla6036 2 года назад
Nice work
@priyamithaayusafitri9867
@priyamithaayusafitri9867 2 года назад
Aaaa thank you, pls gimme some tutorial about auto layout
@scooperr76
@scooperr76 3 года назад
Thanks!
@angeladesign737
@angeladesign737 3 года назад
Happy it was helpful!
@RohitSharma-cw2ii
@RohitSharma-cw2ii 3 года назад
You deserve more subscriber
@angeladesign737
@angeladesign737 3 года назад
Thanks!
@EPSTomcat11
@EPSTomcat11 3 года назад
Very well explained, thank you! Could you do a video on constraints and auto layout, it’s a bit confusing to get right...
@angeladesign737
@angeladesign737 3 года назад
Great suggestion, thank you!
@GalaxyCookies76
@GalaxyCookies76 2 года назад
please make one tutorial to create a Navigation bar horizantal slider for the desktop application.
@marcosansalone
@marcosansalone Год назад
This is what I have been doing but when you share the project, the stakeholders are able to move between pages with keyboard arrows and this can create confusion for who is going to see the pages.
@nigbinedion
@nigbinedion 3 года назад
Hey Angela, thanks for this. Wanted to find out; if you have multiple tabs (say 8/9) would you need to create 8 different artboards for each state? Or can you create just the content and have them overlay/replace each other on the same artboard?
@oleksandrashumakova1320
@oleksandrashumakova1320 2 года назад
Very good question. It should be made via interactive components
@MilanB
@MilanB 3 года назад
Could you create an example of multiple interactions in figma. They introduced it as a new feature recently. Thanks 👍
@angeladesign737
@angeladesign737 3 года назад
Yes! Thanks for the video suggestion :)
@jizan8344
@jizan8344 3 года назад
First comment 😍
@angeladesign737
@angeladesign737 3 года назад
🎉 Thanks Jizan!
@diiclae9733
@diiclae9733 2 года назад
can i use this animation in the actual app, will it translate ? or is it just for show?
@28adventures82
@28adventures82 3 года назад
I'm trying to prototype my drop up menu to animate moving up from the menu bar and having some trouble. I tried your steps but still getting stuck. It doesn't animate properly.
@newmediatalks5302
@newmediatalks5302 3 года назад
please can you make a video on collapse and expand drop down menus that are not overlay
@angeladesign737
@angeladesign737 3 года назад
Great topic suggestion! Thanks!
@batata_dog
@batata_dog 2 года назад
I used the smart animate, but it moves the rest of the tab bar options and it doesn't do it statically like in the video 😕
@DrMarvinLara
@DrMarvinLara 3 года назад
Why is my solid red colour at the top flashing when I do this??
@ben-cb5er
@ben-cb5er 3 года назад
const awesomeVideo = 'Angela Delise'
@angeladesign737
@angeladesign737 3 года назад
Thanks!
Далее
ЛУЧШИЙ ПОДАРОК  @mozabrick #shorts
00:40
Просмотров 1,1 млн
Accordion Animation | Figma Interactive Components
7:35
10 tips to work 10x faster in Figma
18:54
Просмотров 408 тыс.
[Part 1] Smart Animate Tutorial
10:26
Просмотров 157 тыс.
If I started UI/UX Design in 2024, I'd Do This!
8:22
Просмотров 210 тыс.
Acer Predator Тараканьи Бега!
1:00
Просмотров 448 тыс.