![Mavi Design](/img/default-banner.jpg)
- 383
- 4 835 021
Mavi Design
Czechia
Registrace 25. 03. 2019
Straightforward, concise and understandable tutorials & courses on Figma, UX / UI, Design Theory, Photoshop, After Effects, Adobe Illustrator and digital design in general ✏️
I'm a freelance multidisciplinary designer sharing what I've learned over the past 10 years in this field:
• Digital Design
• UI Design
• UX Design
• Web Design
• Marketing, Print and Brand Design
• Motion design and video production
• Design theory and fundamental principles
• Client negotiation and communication
My goal is to help you become a better, more knowledgeable and more efficient designer.
JOIN MY DISCORD SERVER FOR FREE. Reach out to me through Instagram DMs or email to get an invite.
If you found our videos valuable and/or helpful, consider supporting the channel through a donation (link below). If you're looking to download source files / designs from our videos, visit the Mavi Design Store to purchase source files / templates starting at $1.99 😊
I'm a freelance multidisciplinary designer sharing what I've learned over the past 10 years in this field:
• Digital Design
• UI Design
• UX Design
• Web Design
• Marketing, Print and Brand Design
• Motion design and video production
• Design theory and fundamental principles
• Client negotiation and communication
My goal is to help you become a better, more knowledgeable and more efficient designer.
JOIN MY DISCORD SERVER FOR FREE. Reach out to me through Instagram DMs or email to get an invite.
If you found our videos valuable and/or helpful, consider supporting the channel through a donation (link below). If you're looking to download source files / designs from our videos, visit the Mavi Design Store to purchase source files / templates starting at $1.99 😊
ANIMATED ICON: Sync Devices (🔇 Silent Figma Tutorial)
Get the SOURCE FILES for this project ($1.99): payhip.com/b/QILqW
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
FREE MASTERCLASS: Design an App in Figma:
czcams.com/video/N-PoAGryyq4/video.html
Mobile App UI Design Playlist: czcams.com/play/PLCUPtxXqnWn3l_dNI8TekvFIYpoo_IO6h.html
FREE FIGMA COURSE / SERIES: Design a Website in Figma: czcams.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.html
In this video, we'll create an animated icon for "Sync across devices". This video is a part of the mobile app design series. We'll be using prototype features like after delay, smart animate and also components with variants to achieve the result.
--------
© 2024 Mavi Design
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
FREE MASTERCLASS: Design an App in Figma:
czcams.com/video/N-PoAGryyq4/video.html
Mobile App UI Design Playlist: czcams.com/play/PLCUPtxXqnWn3l_dNI8TekvFIYpoo_IO6h.html
FREE FIGMA COURSE / SERIES: Design a Website in Figma: czcams.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.html
In this video, we'll create an animated icon for "Sync across devices". This video is a part of the mobile app design series. We'll be using prototype features like after delay, smart animate and also components with variants to achieve the result.
--------
© 2024 Mavi Design
zhlédnutí: 305
Video
ANIMATED ICON "New Note" in Figma (🔇 Silent Tutorial)
zhlédnutí 715Před dnem
Get the SOURCE FILES for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE MASTERCLASS: Design an App in Figma: czcams.com/video/N-PoAGryyq4/video.html Mobile App UI Design Play...
BLINKING HIGHLIGHT in Figma - Tutorial
zhlédnutí 432Před 14 dny
Get the SOURCE FILES for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE MASTERCLASS: Design an App in Figma: czcams.com/video/N-PoAGryyq4/video.html Mobile App UI Design Play...
TEMPLATE For Circular Loading Animations (Figma Tutorial)
zhlédnutí 443Před 14 dny
Get the SOURCE FILES for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE MASTERCLASS: Design an App in Figma: czcams.com/video/N-PoAGryyq4/video.html Mobile App UI Design Play...
LOADING ANIMATION in Figma (Tutorial)
zhlédnutí 701Před 21 dnem
Get the SOURCE FILES for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE MASTERCLASS: Design an App in Figma: czcams.com/video/N-PoAGryyq4/video.html Mobile App UI Design Play...
CLICKABLE PIE CHART in Figma (Tutorial)
zhlédnutí 1,1KPřed 21 dnem
Get the SOURCE FILES for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE MASTERCLASS: Design an App in Figma: czcams.com/video/N-PoAGryyq4/video.html Mobile App UI Design Play...
HORIZONTAL SCROLL in Figma (Tutorial)
zhlédnutí 995Před 28 dny
Get the SOURCE FILE for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE MASTERCLASS: Design an App in Figma: czcams.com/video/N-PoAGryyq4/video.html Mobile App UI Design Playl...
Headline Too Long? Animate it - Here's How (Figma Tutorial)
zhlédnutí 536Před měsícem
Get the SOURCE FILES for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE MASTERCLASS: Design an App in Figma: czcams.com/video/N-PoAGryyq4/video.html Mobile App UI Design Play...
UPDATING LIVE Animated Indicator in Figma (Tutorial)
zhlédnutí 478Před měsícem
Get the SOURCE FILE for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE MASTERCLASS: Design an App in Figma: czcams.com/video/N-PoAGryyq4/video.html Mobile App UI Design Playl...
Animated BUTTON CLICK CONFIRMATION in Figma - Tutorial
zhlédnutí 907Před měsícem
Get the SOURCE FILE for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE FIGMA COURSE / SERIES: Design a Website in Figma: czcams.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.ht...
PROGRESSIVE BLUR in Figma - How? (Tutorial)
zhlédnutí 790Před měsícem
Get the SOURCE FILE for this project ($5.99): payhip.com/b/QILqW Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan In this video, we're going to create a progressive blur fixed header in Figma using the mobile app design te...
PRESSED DOWN Button State in Figma - How? (Tutorial)
zhlédnutí 520Před měsícem
Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE FIGMA COURSE / SERIES: Design a Website in Figma: czcams.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.html In this video I'll show you how to create a "Pressed down" but...
SHOW / HIDE TEXT IN FIGMA - Tutorial (Interactive Component Prototyping)
zhlédnutí 1,1KPřed měsícem
Visit my STORE: bit.ly/mavi-design-store Explore Mavi Design COURSES : bit.ly/mavi-design-courses Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan FREE FIGMA COURSE / SERIES: Design a Website in Figma: czcams.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.html In this video I'm going to show you how you can create a show ...
"Sustainable Fashion" Social Media Banner (Figma Tutorial + Source File)
zhlédnutí 2KPřed 5 měsíci
"Sustainable Fashion" Social Media Banner (Figma Tutorial Source File)
I Made The "Home" Icon More Realistic (Figma Tutorial + Source File)
zhlédnutí 978Před 6 měsíci
I Made The "Home" Icon More Realistic (Figma Tutorial Source File)
How To Design This Banner Ad in Figma (Tutorial + Source File)
zhlédnutí 1KPřed 6 měsíci
How To Design This Banner Ad in Figma (Tutorial Source File)
Let’s Design A Banner Ad For Your Design Agency (Figma Tutorial + Source File)
zhlédnutí 767Před 6 měsíci
Let’s Design A Banner Ad For Your Design Agency (Figma Tutorial Source File)
A Search Icon, But Make It Complicated (Figma Tutorial + Source File)
zhlédnutí 683Před 6 měsíci
A Search Icon, But Make It Complicated (Figma Tutorial Source File)
Animations in Figma are Simpler Than You Think
zhlédnutí 1,2KPřed 6 měsíci
Animations in Figma are Simpler Than You Think
Design an App from Scratch in Figma (Tutorial)
zhlédnutí 26KPřed 7 měsíci
Design an App from Scratch in Figma (Tutorial)
How to Combine Figma and Google Slides to Design Professional Presentations (Extremely Simple)
zhlédnutí 5KPřed 9 měsíci
How to Combine Figma and Google Slides to Design Professional Presentations (Extremely Simple)
Create an ADD TO FAVORITES Interactive Component in Figma (Tutorial)
zhlédnutí 3,9KPřed 9 měsíci
Create an ADD TO FAVORITES Interactive Component in Figma (Tutorial)
Create a CHECKBOX DROPDOWN MENU in Figma (Tutorial)
zhlédnutí 8KPřed 9 měsíci
Create a CHECKBOX DROPDOWN MENU in Figma (Tutorial)
Creating a Photorealistic AirPods Illustration in Figma - Voiceless Tutorial (Source File Available)
zhlédnutí 2,4KPřed 10 měsíci
Creating a Photorealistic AirPods Illustration in Figma - Voiceless Tutorial (Source File Available)
Redesigning Random Icons For No Reason (Figma)
zhlédnutí 1,2KPřed 10 měsíci
Redesigning Random Icons For No Reason (Figma)
Is Digital & UX Design Becoming Increasingly "BORING"? And Why? [Well Designed ep.03]
zhlédnutí 1,4KPřed 10 měsíci
Is Digital & UX Design Becoming Increasingly "BORING"? And Why? [Well Designed ep.03]
What's the FASTEST Way To Improve as a Designer? [Well Designed ep.02]
zhlédnutí 856Před 10 měsíci
What's the FASTEST Way To Improve as a Designer? [Well Designed ep.02]
What is Good Design? [Well Designed ep.01]
zhlédnutí 1,1KPřed 10 měsíci
What is Good Design? [Well Designed ep.01]
This Design Technique Will Instantly Put You Ahead of 95% of Designers
zhlédnutí 3,7KPřed rokem
This Design Technique Will Instantly Put You Ahead of 95% of Designers
How To Make Boring Stuff Look Interesting (Figma #ux #ui #course)
zhlédnutí 2,9KPřed rokem
How To Make Boring Stuff Look Interesting (Figma #ux #ui #course)
good
Thank you, but even at 1.75x speed it felt too slow and long winded. You could assume that most of us understand how to make chevrons and so on, just stick to the interaction we are here for. I appreciate none the less
Not working T_T
I don't see to have the ability to set the animation for the cursor. I can only select "Instant", "Dissolve", and "Smart Animate". There are no other options for adding the delay.
Nevermind - you need to change from On Click to After Delay.
Personally I think the voiceover keeps viewers engaging. Nice video as always 👍
Amazing tutorial, thank you soooo much!
<3
Thanks for the video! I'm unsure how you were able to change the frame size for the list of options without moving the text as well. Every time I try the text stays centered and doesn't align left.
Omg I so needed this! You're a saviour ❤
Incredibly complicated.
thanks bro :)
horrible video
2:15:54 !
Thank you for the teaching. After clicking, it expands to the right side, which make it goes out of frame. Not able to open it on left side. Can you please help on that?
In 2k24 the software change . So please make a fresher new video plz its not worth in today
I started with figma literally yesterday and this was really really helpfull!! Thank u very much! I almost nail it but whe I ran the prototype I don´t know why I can just swipe between image 1 and 2 or when I reach the last image it wont go back... I have to figure it out what I did wrong! XD
thanks a lot!
Where did you get these information and pictures about spacing and safe zone dimensions? Good job man!! 🫡 17:46
The best Figma tutorial. Very Helpful for beginners
Very difficult and fast explanation 😅
thanks man
Thank you for the simple explanation. It finally clicked for me. I don't know why everyone else complicates this.
Does this tools work for Mac?
Hello That is a great tutorial. For example, in the video it is shown a list of 5 checkboxes. If the first option in the list was "add friend" instead of one checkbox and the user clicked there, I need it to open an overlay. I couldnt find a way to make it work. Would anyone know if there is a way to make it work?
Thank you! I was wondering how to do it, and I made it because of the video. :)
thanks
hey, I want to open a new page with a button and it should automatically scroll to a certain section of that new page. Could you plz guide how to do that.
didnt work on me, it goes to bookmark page 😢
Thank you so much man, it really helped me a lot
Thank you, so much for getting down to my level. I’m at the most basic level right now.
Can you please give me a tutorial video? :(
How can I make it slide from right to left, I can't find a guide for help...
But you can't put it over a design, it will not fly over it but push the design
I had the same issue and solved like that: you should shorten the main frame as the size of the device , turn clip content (for example 844 for phone) and mark for the frame " vertical scroll" position. Check in prototype and you see that you can see the content below the accordion , after it opens. First of all be sure that you have all the sections in one auto layout frame.
@@user-cm3zw9oj9z thank you
Me: only starting... Mavi: fly edit: my brain is small but still managed to do this i cant believe this
hey , at 8:28 your text doesn't move but mine goes on the left ?
ok i find why xD if someone has the same issue, it's because my auto layout was at the middle
Bro, I'm going to buy your design, but I have a question. If I buy it now, how will I get the updates since you update it every week? Will I get the updated version? I hope you understand. My English is weak.
@@user-hs2ih7pk3b I think you’ll get access to your own profile within my store, which means lifetime access to the product including future updates
@@user-hs2ih7pk3b if that’s not the case, reach out to my email
@@mavidesign thanks brother, i will buy one and its look 👏
Component sets are exactly what I needed! I don't know why Figma buries the documentation on this so far away. I have 100s of icons in an Icon focussed UI. I wasn't interested in creating a component for each icon and then creating variants for that. With component sets, it took me a day to what would take weeks with default components.
Thank you! Could you please make also a tutorial how to apply FAQ accordion correctly in design? , I am in a trouble about it , i mean, when it opens and content inside is long than the main frame, the part of footer below (footer) get down and doesnot appear in prototype mode.
i'm still puzzled on how you change the size cuz when i do that all moves and spread 3:12
Great video. Thanks for sharing
Hi! Your video is very helpful, although I keep having the same problem. The swiping works only between 1 and 2 image. I swipe right, it works, then i swipe right again and it returns to the first image. What am I missing?
But how did you do that "Figma tip no.1" opening or intro whatever it may be I want to know how you did it.😊
After Effects :)
@@mavidesign oooo ok 😅
The background music and noise?? ugh.
I've finished your website design playlist. you create high-quality designs. keep going ❤
Design ASMR 💀
I know I am late to the party, but I think it will be better if you add this video to the playlist. Love your work, I am a loyal fan now
awesome...
thankyou so much. it was so easy. you made it such
Спасибо бро!