Mavi Design
Mavi Design
  • 383
  • 4 835 021
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
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)

Komentáře

  • @vamboo8918
    @vamboo8918 Před 4 hodinami

    good

  • @roomathousandyearswide

    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

  • @NellaDjunaidi
    @NellaDjunaidi Před dnem

    Not working T_T

  • @leslycracchiolo4881

    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.

  • @ommutyal8712
    @ommutyal8712 Před dnem

    Personally I think the voiceover keeps viewers engaging. Nice video as always 👍

  • @mimitoo3308
    @mimitoo3308 Před dnem

    Amazing tutorial, thank you soooo much!

  • @tramynguyen8584
    @tramynguyen8584 Před dnem

    <3

  • @leslycracchiolo4881

    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.

  • @ritikachouhan9252
    @ritikachouhan9252 Před 2 dny

    Omg I so needed this! You're a saviour ❤

  • @oakfieldphotography4255

    Incredibly complicated.

  • @Zenrzx
    @Zenrzx Před 2 dny

    thanks bro :)

  • @yuri.moiseyev
    @yuri.moiseyev Před 2 dny

    horrible video

  • @alexandramcgain3847

    2:15:54 !

  • @ArkFolio
    @ArkFolio Před 4 dny

    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?

  • @AkashM5
    @AkashM5 Před 4 dny

    In 2k24 the software change . So please make a fresher new video plz its not worth in today

  • @PatriciaBarreda-e4j

    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

  • @komsanims
    @komsanims Před 5 dny

    thanks a lot!

  • @isak1441
    @isak1441 Před 5 dny

    Where did you get these information and pictures about spacing and safe zone dimensions? Good job man!! 🫡 17:46

  • @shamshad7057
    @shamshad7057 Před 5 dny

    The best Figma tutorial. Very Helpful for beginners

  • @geeky_world
    @geeky_world Před 5 dny

    Very difficult and fast explanation 😅

  • @blaezerpiedad8597
    @blaezerpiedad8597 Před 6 dny

    thanks man

  • @slizzardshroomer9666

    Thank you for the simple explanation. It finally clicked for me. I don't know why everyone else complicates this.

  • @AskOneMarketer-llc
    @AskOneMarketer-llc Před 7 dny

    Does this tools work for Mac?

  • @andregfernandes
    @andregfernandes Před 7 dny

    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?

  • @sandraperadilla
    @sandraperadilla Před 8 dny

    Thank you! I was wondering how to do it, and I made it because of the video. :)

  • @ramanified
    @ramanified Před 8 dny

    thanks

  • @kaifabdullah8006
    @kaifabdullah8006 Před 8 dny

    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.

  • @obviouslyraar
    @obviouslyraar Před 8 dny

    didnt work on me, it goes to bookmark page 😢

  • @andresluna3688
    @andresluna3688 Před 9 dny

    Thank you so much man, it really helped me a lot

  • @katelynchandler34
    @katelynchandler34 Před 9 dny

    Thank you, so much for getting down to my level. I’m at the most basic level right now.

  • @ThuyHoangOanhNguyen-ik8oq

    Can you please give me a tutorial video? :(

  • @ronaldorochayucra854

    How can I make it slide from right to left, I can't find a guide for help...

  • @mugcarnivore2493
    @mugcarnivore2493 Před 10 dny

    But you can't put it over a design, it will not fly over it but push the design

    • @user-cm3zw9oj9z
      @user-cm3zw9oj9z Před 5 dny

      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.

    • @mugcarnivore2493
      @mugcarnivore2493 Před 5 dny

      @@user-cm3zw9oj9z thank you

  • @Ethan-D.Rincon
    @Ethan-D.Rincon Před 10 dny

    Me: only starting... Mavi: fly edit: my brain is small but still managed to do this i cant believe this

  • @Oriono
    @Oriono Před 10 dny

    hey , at 8:28 your text doesn't move but mine goes on the left ?

    • @Oriono
      @Oriono Před 10 dny

      ok i find why xD if someone has the same issue, it's because my auto layout was at the middle

  • @user-hs2ih7pk3b
    @user-hs2ih7pk3b Před 10 dny

    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.

    • @mavidesign
      @mavidesign Před 10 dny

      @@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

    • @mavidesign
      @mavidesign Před 10 dny

      @@user-hs2ih7pk3b if that’s not the case, reach out to my email

    • @user-hs2ih7pk3b
      @user-hs2ih7pk3b Před 10 dny

      @@mavidesign thanks brother, i will buy one and its look 👏

  • @peterw5407
    @peterw5407 Před 10 dny

    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.

  • @user-cm3zw9oj9z
    @user-cm3zw9oj9z Před 10 dny

    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.

  • @user-bg5rk4bj1m
    @user-bg5rk4bj1m Před 10 dny

    i'm still puzzled on how you change the size cuz when i do that all moves and spread 3:12

  • @manzoora8101
    @manzoora8101 Před 11 dny

    Great video. Thanks for sharing

  • @user-hg8tc9it9v
    @user-hg8tc9it9v Před 11 dny

    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?

  • @ANI-MOWA
    @ANI-MOWA Před 11 dny

    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.😊

  • @jonmichaelroberts
    @jonmichaelroberts Před 11 dny

    The background music and noise?? ugh.

  • @basuki094
    @basuki094 Před 11 dny

    I've finished your website design playlist. you create high-quality designs. keep going ❤

  • @aryangosai09
    @aryangosai09 Před 12 dny

    Design ASMR 💀

  • @WorldlyBuddha
    @WorldlyBuddha Před 12 dny

    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

  • @designsbyindraja4656
    @designsbyindraja4656 Před 13 dny

    awesome...

  • @apexa_sharma545
    @apexa_sharma545 Před 13 dny

    thankyou so much. it was so easy. you made it such

  • @555igor170586
    @555igor170586 Před 13 dny

    Спасибо бро!