Тёмный

How to ANIMATE your dashboard with FIGMA? 

Future Moose
Подписаться 600
Просмотров 22 тыс.
50% 1

In this tutorial I will show you how to animate a dashboard with Figma’s smart animation feature, faster!
🔴 Subscribe to FUTURE MOOSE Here: bit.ly/31WE2Sy
📒 Show Notes and Resources 📒
Figma has recently introduced this awesome new feature called Smart Animation that allows you to bring your designs to life faster and easier. In this video I will help you take an existing design, (I used a web application dashboard in my example), and animate it faster using Figma. Watch me put together this interactive prototype in Figma and learn a few tips and tricks that will speed up your animation workflow with Figma.
Let me know if you want to see me animate also a Website Landing Page or a Mobile App Screen and I will do a tutorial on that if I reach 1,000 likes for this video - so give it a LIKE right now!
QUESTION - Have a question about Figma Animation, Dashboards Design, UI/UX Design, Product Design, or Anything Else? Post in comments section of this video!
DISCLAIMER: This video and description contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission.
Figma is free to use. Sign up here: bit.ly/2lJFbO9
Speed up your workflow with the dashboard UI kit I used in this video - it was made by Saas Design, and it’s called “Figma SaaS Dashboard Design System” - you can find it here: gumroad.com/a/...
About This Video:
In this video Adrian Sule from Future Moose shows how to animate a dashboard using Figma, faster!
FOLLOW ME:
Twitter: / thefuturemoose
Instagram: / futuremoose
Facebook: theFutur...
#SmartAnimate #Figma #UIAnimation #FutureMoose

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

 

8 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 49   
@futuremoose8112
@futuremoose8112 4 года назад
What will you be animating next in Figma (or any other tool) for your design projects?
@sarveshsharma9323
@sarveshsharma9323 3 года назад
I want to animate text, bar charts, pie charts, and line charts...Thanx
@logeshwaranr5330
@logeshwaranr5330 4 года назад
Fuk**g awsm dooodd!!!! I wonder why this channel is not popular yet 😾 Let me make it! Liked it! Subscribed! Gonna share! Luv frm India 😍
@RobertWildling
@RobertWildling 3 года назад
I m loosing hours just to replay the animation!!! So addictive! - Thanks for your video!
@futuremoose8112
@futuremoose8112 3 года назад
Makes my day hearing it helps out!
@resty1672
@resty1672 3 года назад
Wow very cool design and tutorial,thanks for sharing!
@remusb
@remusb 3 года назад
You should hit R to restart the prototype. Figma also says it in the bottom right corner 👌. Really nice tutorial and great energy
@siranushkhachatryan4495
@siranushkhachatryan4495 Год назад
Please make a video on how to animate light and dark mode together simply and beautiful.
@elnazmoradi7884
@elnazmoradi7884 3 года назад
Great tutorial and easy I would like working on fitness app and it animation
@choiman3715
@choiman3715 4 года назад
I keep replaying the preview too, it looks soo great and professional :) This tutorial helps me a lot! Thanks!!!!
@futuremoose8112
@futuremoose8112 4 года назад
super nice to hear bud!
@okeopeoluwa6283
@okeopeoluwa6283 3 года назад
This is really nice. hope to see more of your videos
@bizzle350
@bizzle350 4 года назад
THANK YOU so much for taking the time to do this great tutorial! Please continue to do more like these. SUBSCRIBED!
@futuremoose8112
@futuremoose8112 4 года назад
Hey thanks @Ms.A, that means a lot!
@TidjaneTall
@TidjaneTall 4 года назад
Both educative and fun to watch! Good job - looking forward to this videos series 👍
@futuremoose8112
@futuremoose8112 4 года назад
Thank you Tall, more goodness coming up!
@jamesochemem3846
@jamesochemem3846 Год назад
is fun and lovely
@swatijha26
@swatijha26 3 года назад
please make more figma videos love from India ❤❤❤
@anci.valiart
@anci.valiart 2 года назад
Great tutorial! It's very usefull, thank you very much!
@swordartdesign
@swordartdesign 4 года назад
thank you this save my life!!! Thank alot bro!!!!
@futuremoose8112
@futuremoose8112 4 года назад
thanks for that feedback, really appreciated! 👍😀
@kamsyrecreation4407
@kamsyrecreation4407 4 года назад
Super presentation 👍 👏
@futuremoose8112
@futuremoose8112 4 года назад
You're too kind!
@bizzle350
@bizzle350 4 года назад
Oh..and to your answer your question. I am working on animating both dashboard screens and landing pages for different projects at work.
@futuremoose8112
@futuremoose8112 4 года назад
Thats great to hear. And how are those animations coming along? Does Figma help a lot simplifying those transitions and smooth animations?
@bizzle350
@bizzle350 4 года назад
@@futuremoose8112 Animate provides more in Figma than before because I solely relied on Adobe XD previously. But I always loved the team commenting feature in Figma so I'm excited with the smart animate options. Do you know if Figma will allow me to do onscroll fade animations? As the user scrolls down, elements fade in and animate?
@bizzle350
@bizzle350 4 года назад
@@futuremoose8112 How can I do the scroll down animation fade like this in Figma? dribbble.com/shots/6605876-Unique-formula
@futuremoose8112
@futuremoose8112 4 года назад
@@bizzle350 that's pretty simple: as you would with a normal smart animation, by placing content of different states ie. a faded out image on frame 1 at Y position of 100px, then on frame 2 the same image you place it at opaque and on a different Y position lets say 50px, and apply a smart animate on click between the frames and the result will look as if the image is sliding up and fading in. Same as your dribbble example. The only thing you won't be able to do in Figma is to trigger that even from a mouse Scroll. But for recording a gif or a video out of the interaction it would do the same job as you saw it on dribbbble.
@roksanapatrzaek3743
@roksanapatrzaek3743 2 года назад
very helpful, thank you.
@christunnicliffe7726
@christunnicliffe7726 4 года назад
Nice tutorial thanks 👍. I'm currently trying to figure out how to animate a sticky nav that shrinks the logo and repositions the nav on scroll within Figma. Not having much luck at the moment.
@futuremoose8112
@futuremoose8112 4 года назад
If it helps, try and think of a start and end frame state of your motion - for example: in frame 1 the logo is 50px size and on frame 2 you make it 25px; then the same for your navbar, you have it at 80px height in frame 1 and you shrink it to 40px height in frame 2 - and then in prototype mode, you set the interaction mode to 'smart animation'. Try to set the event on a click, and not on a click - for animation purposes, as I think Figma doesn't handle a scroll event to trigger an animation yet. Let me know how it goes.
@asdmel5927
@asdmel5927 4 года назад
Thanks for this.
@futuremoose8112
@futuremoose8112 4 года назад
Glad it helps
@shanojsukumar
@shanojsukumar 4 года назад
Wooa! This deserve some million views
@futuremoose8112
@futuremoose8112 4 года назад
Thank you, means a lot Shanoj!
@e7r8games42
@e7r8games42 Год назад
Many thanks my friend, but I have question can I link this app with excel Microsoft???
@futuremoose8112
@futuremoose8112 Год назад
Haven't heard of it no. You could record your screen while the prototype is running with a video player, and then embed that video in a PPT deck
@Sanjeet12125
@Sanjeet12125 2 года назад
Hi make a video of scroll down of dashboard
@antischulz
@antischulz 4 года назад
Thank's man! You are from Italy or Canada? :)
@calimovebaby3752
@calimovebaby3752 4 года назад
wow i like this, keep it up🔥
@futuremoose8112
@futuremoose8112 4 года назад
Makes my day - thank you!
@candrapramudya4099
@candrapramudya4099 3 года назад
you get some sub here :D
@sarveshsharma9323
@sarveshsharma9323 3 года назад
Hi, i just wanna know...how to save the file in GIF format...
@yeaheiamahmudhridoy4590
@yeaheiamahmudhridoy4590 3 года назад
25:58 ✌
@velikicarobnjak
@velikicarobnjak 4 года назад
Is there any way to export that animation or you can just view it in prototype mode? Tnx in advance
@futuremoose8112
@futuremoose8112 4 года назад
Screen recording (like through QuickTime if you're Mac based) is your option for now.
@user-pw5bo2gs5q
@user-pw5bo2gs5q 4 года назад
А зачем нужна эта анимация? Где ее использовать? Подскажите,пожалуйста ❤️
@futuremoose8112
@futuremoose8112 4 года назад
The purpose or UI of the dashboard used in this video itself, is just a dummy POC to have something to play with when demoing these tips and tricks around animating dashboards faster. You can find and use the actual UI kit I used for the dashboard UI in the video description.
@christophevanengelen
@christophevanengelen 3 года назад
when I see so much enthusiasm for a crappy anim, I miss the Flash.
Далее
Naming Things in Figma: My Best Tips & Tricks
27:45
Просмотров 54 тыс.
Первый день школы Катя vs Макс
19:37
2024 UI/UX Design Crash Course in Figma
1:09:35
Просмотров 117 тыс.
Prototyping animations with Figma
16:54
Просмотров 55 тыс.
10 tips to work 10x faster in Figma
18:54
Просмотров 410 тыс.
Design animated slides on Figma | Beginner tutorial
14:51
How to use Figma Styles & Libraries?
1:10:38
Просмотров 72 тыс.
How to Design a SICK Dashboard UI in Figma
35:37
Просмотров 225 тыс.