Mavi Design
Mavi Design
  • 372
  • 4 463 428
PRESSED DOWN Button State in Figma – How? (Tutorial)
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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.html
In this video I'll show you how to create a "Pressed down" button state using interactive components.
--------
© 2024 Mavi Design
Переглядів: 195

Відео

SHOW / HIDE TEXT IN FIGMA - Tutorial (Interactive Component Prototyping)
Переглядів 60416 годин тому
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: ua-cam.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)
Переглядів 1,9 тис.4 місяці тому
Get the SOURCE FILES for this project ($1.99): payhip.com/b/3p5h1 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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.h...
I Made The "Home" Icon More Realistic (Figma Tutorial + Source File)
Переглядів 8804 місяці тому
Get the SOURCE FILES for this project ($1.99): payhip.com/b/a8fjD 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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.h...
How To Design This Banner Ad in Figma (Tutorial + Source File)
Переглядів 8934 місяці тому
Get the SOURCE FILES for this project ($1.99): payhip.com/b/OYZ6P 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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.h...
Let’s Design A Banner Ad For Your Design Agency (Figma Tutorial + Source File)
Переглядів 6134 місяці тому
Get the SOURCE FILES for this project ($1.99): payhip.com/b/zMdKq 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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.h...
A Search Icon, But Make It Complicated (Figma Tutorial + Source File)
Переглядів 6344 місяці тому
Get the SOURCE FILES for this project ($1.99): payhip.com/b/bnLGO 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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.h...
Animations in Figma are Simpler Than You Think
Переглядів 1,1 тис.4 місяці тому
Get the SOURCE FILES for this project ($1.99): payhip.com/b/c51xv 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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.h...
Design an App from Scratch in Figma (Tutorial)
Переглядів 19 тис.6 місяців тому
Get the SOURCE FILE for this project ($5.99): payhip.com/b/QILqW Explore Mavi Design COURSES : bit.ly/mavi-design-courses Visit my STORE: bit.ly/mavi-design-store Get FIGMA for FREE: bit.ly/get-started-with-figma Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan Welcome to the Figma mobile app design masterclass. In this 5-hour deep dive FREE course, we're going to exp...
How to Combine Figma and Google Slides to Design Professional Presentations (Extremely Simple)
Переглядів 4,7 тис.7 місяців тому
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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.html In this video I'm going to show you how I combine / integrate ...
Create an ADD TO FAVORITES Interactive Component in Figma (Tutorial)
Переглядів 3,5 тис.7 місяців тому
Get the SOURCE FILES for this project ($1.99): payhip.com/b/eyUhC 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: ua-cam.com/play/PLCUPtxXqnWn0AMIjZmNdkrzWVjLHOW2NT.h...
Create a CHECKBOX DROPDOWN MENU in Figma (Tutorial)
Переглядів 7 тис.8 місяців тому
Create a CHECKBOX DROPDOWN MENU in Figma (Tutorial)
Creating a Photorealistic AirPods Illustration in Figma - Voiceless Tutorial (Source File Available)
Переглядів 2,3 тис.8 місяців тому
Creating a Photorealistic AirPods Illustration in Figma - Voiceless Tutorial (Source File Available)
Redesigning Random Icons For No Reason (Figma)
Переглядів 1,1 тис.9 місяців тому
Redesigning Random Icons For No Reason (Figma)
Is Digital & UX Design Becoming Increasingly "BORING"? And Why? [Well Designed ep.03]
Переглядів 1,3 тис.9 місяців тому
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]
Переглядів 8129 місяців тому
What's the FASTEST Way To Improve as a Designer? [Well Designed ep.02]
What is Good Design? [Well Designed ep.01]
Переглядів 1 тис.9 місяців тому
What is Good Design? [Well Designed ep.01]
This Design Technique Will Instantly Put You Ahead of 95% of Designers
Переглядів 3,6 тис.10 місяців тому
This Design Technique Will Instantly Put You Ahead of 95% of Designers
How To Make Boring Stuff Look Interesting (Figma #ux #ui #course)
Переглядів 2,9 тис.11 місяців тому
How To Make Boring Stuff Look Interesting (Figma #ux #ui #course)
SET VARIABLE and CONDITIONAL in Figma: The SIMPLEST EXPLANATION Using an Example
Переглядів 11 тис.11 місяців тому
SET VARIABLE and CONDITIONAL in Figma: The SIMPLEST EXPLANATION Using an Example
Responsifying an ENTIRE PAGE in Figma - Design a Website ep.32 - #free #ux #ui #course
Переглядів 10 тис.11 місяців тому
Responsifying an ENTIRE PAGE in Figma - Design a Website ep.32 - #free #ux #ui #course
Can You Make a RESPONSIVE HEADER in Figma? - Design a Website ep.31 - #free #ux #ui #course
Переглядів 27 тис.11 місяців тому
Can You Make a RESPONSIVE HEADER in Figma? - Design a Website ep.31 - #free #ux #ui #course
WEB DESIGN IN FIGMA ep.30: Making The Footer RESPONSIVE - Free UX/UI Course
Переглядів 7 тис.11 місяців тому
WEB DESIGN IN FIGMA ep.30: Making The Footer RESPONSIVE - Free UX/UI Course
VARIABLES IN FIGMA - Effortless Consistency in Your Design Projects #config2023
Переглядів 14 тис.11 місяців тому
VARIABLES IN FIGMA - Effortless Consistency in Your Design Projects #config2023
RESPONSIVE FIGMA AUTO LAYOUT - The Gamechanger Figma Feature is Here #config2023
Переглядів 31 тис.11 місяців тому
RESPONSIVE FIGMA AUTO LAYOUT - The Gamechanger Figma Feature is Here #config2023
INTERACTIVE COMPONENTS in FIGMA - What They Are & How To Use Them (Tutorial)
Переглядів 1,8 тис.Рік тому
INTERACTIVE COMPONENTS in FIGMA - What They Are & How To Use Them (Tutorial)
ORGANIZE YOUR VARIANTS in Figma: A Simple Technique
Переглядів 2 тис.Рік тому
ORGANIZE YOUR VARIANTS in Figma: A Simple Technique
RENAMING LAYERS in Figma: A Few Quick Tips
Переглядів 3,4 тис.Рік тому
RENAMING LAYERS in Figma: A Few Quick Tips
WEB DESIGN IN FIGMA ep. 29: Color Tokens + CTA Section Redesign - Free UX / UI Course
Переглядів 3,1 тис.Рік тому
WEB DESIGN IN FIGMA ep. 29: Color Tokens CTA Section Redesign - Free UX / UI Course
Watch This To Finally Understand FRAME CONSTRAINTS in Figma
Переглядів 19 тис.Рік тому
Watch This To Finally Understand FRAME CONSTRAINTS in Figma

КОМЕНТАРІ

  • @Elle-Tech
    @Elle-Tech Годину тому

    You see those panels on the left and right? If I turn the UI off they go away but so does the top nav and then I can only move about the page. Is it possible to move the left or right panel out of the way or shrink it / make it thinner without losing the top nav elements?

  • @TerraTechTales
    @TerraTechTales Годину тому

    When I try to duplicate/ use an istance of the 1st option of the component it duplicates direcly into a componet (4 purple circles icon on the layers menu) and does not turn into an option (empty purple diamond) as shown in the video. WHY!? Can someone explain or help? Thank you

  • @AnumA.Nafees
    @AnumA.Nafees 5 годин тому

    i was struggling with auto layout but after watching this tutorial now i am able to make responsive design

  • @makomakomako100
    @makomakomako100 8 годин тому

    Thank you for video, it was amazing! Only problem i have is that such blinking cursor is not working with a open overlay keyboard. It’s just stopping blinking when the keyboard is jumping up 😅😢😢

  • @najwanaura7171
    @najwanaura7171 10 годин тому

    really helpful, thanks!

  • @SanskritSatsang
    @SanskritSatsang 13 годин тому

    I am unable to see fill container option in my figma design @mavi Design please help

  • @vamboo8918
    @vamboo8918 2 дні тому

    thanks

  • @khanhvybella8151
    @khanhvybella8151 2 дні тому

    thank you so much!! <3

  • @vamboo8918
    @vamboo8918 2 дні тому

    thanks

  •  2 дні тому

    its hard in figma😐😐. but easy in coding using html css js 😇😇

  • @TamannaTalan
    @TamannaTalan 2 дні тому

    Great explanation thankyou 😊

  • @DuongNguyen-ju1nl
    @DuongNguyen-ju1nl 2 дні тому

    very helpful thank you sir!!!

  • @nikhilkhanal3792
    @nikhilkhanal3792 2 дні тому

    This shyte still aint working. Dimag ka bhosda ho gaya

  • @vigneshKrishnamoorthyRules
    @vigneshKrishnamoorthyRules 3 дні тому

    Thank you so much

  • @ZeroNine-MT09
    @ZeroNine-MT09 3 дні тому

    I am truly humbled and overjoyed by your extraordinary kindness and generosity. Your selfless actions have left an indelible mark on my heart, and I am forever indebted to you for your unwavering support and compassion. Words simply cannot capture the depth of my gratitude. You have gone above and beyond, demonstrating an unparalleled level of thoughtfulness and care that has profoundly touched my life. I am in awe of your remarkable spirit and your ability to make such a meaningful difference. Please know that your incredible gesture will never be forgotten. You are a true inspiration, a shining example of the best that humanity has to offer. I am eternally grateful to have you in my life, and I can only hope to one day repay the kindness you have so graciously bestowed upon me. Thank you, from the bottom of my heart, for being such an amazing and remarkable person. You are a true blessing, and I am forever grateful. With the utmost respect and appreciation.

  • @nomoremrniceguy007
    @nomoremrniceguy007 3 дні тому

    I must be an idiot because as a new figma user I have no clue what you just did. You have completely different menus with things like auto layout. I just have no clue what you did because you didn't talk. Glad everyone else got it.

  • @MohilWankar
    @MohilWankar 4 дні тому

    this tutorial was my first app design in my UI Jounrey. Thanks a lot for this in-depth tutorial loved your presentation and design thinking. 🥰

  • @vamboo8918
    @vamboo8918 4 дні тому

    Thanks

  • @Pawlkoko
    @Pawlkoko 4 дні тому

    Great video, slowly explained for dumb dumbs like me, thanks!

  • @AnjarSariPratiwi-xx5vi
    @AnjarSariPratiwi-xx5vi 4 дні тому

    Thank you so much for the tutorial. This is so helpful 😄

  • @Jko_lomba
    @Jko_lomba 5 днів тому

    so fast bro calm down Im new at this

  • @rajthedev
    @rajthedev 6 днів тому

    I understand it now. Thanks!

  • @LenaPrisovskaya
    @LenaPrisovskaya 6 днів тому

    Thank you!

  • @adaziaswonderland4481
    @adaziaswonderland4481 6 днів тому

    This is very helpful however you moved very fast. Maybe slow down next time for beginners

  • @Mandoovlog
    @Mandoovlog 7 днів тому

    thank you for your tutorial!

  • @popescumuguraurelian956
    @popescumuguraurelian956 7 днів тому

    Instead of -1080-1080-1080 you can simply write -1080*3

  • @arielcopo479
    @arielcopo479 7 днів тому

    Try to scroll down, let see if your navigation will stay on fix position or it will scroll down.

  • @roxanneyap3166
    @roxanneyap3166 8 днів тому

    holy, just save my life

  • @user-zj5bx1ze7q
    @user-zj5bx1ze7q 8 днів тому

    9:17

  • @SadatAhmad-to8wg
    @SadatAhmad-to8wg 8 днів тому

    figma file not working

  • @danielacantu6456
    @danielacantu6456 8 днів тому

    My loading wheel is not rotating when I test in in prototype.. any help?

  • @antaris03
    @antaris03 9 днів тому

    By far the best and most useful tutorial for building a real flexible menu. Zhank you so much.

  • @Sara-k-r-216
    @Sara-k-r-216 9 днів тому

    Hi! This was very helpful, it did move a little fast but if I put it in a slower speed I was able to follow better. I do have one problem... now that I am using this menu for an actual navigation, I can't have more than one click instance for the options. For example, Option 1 is set to go to the view on click, but I also need it to navigate to a page. Is there a way to bypass this?

  • @WarrenWintersUI
    @WarrenWintersUI 9 днів тому

    Why is this so painful!? It's been part of the web for over a decade.

  • @doxican
    @doxican 9 днів тому

    29min for what should be 2min

  • @kelvinjr4854
    @kelvinjr4854 9 днів тому

    This channel is the best channel everrrr 😩

  • @fabsync
    @fabsync 9 днів тому

    The best tutorial on the subject! The real deal!!

  • @michaelsmilas2220
    @michaelsmilas2220 9 днів тому

    thank you so much, I've been struggling for hours to wrap up a mobile web design because I couldn't figure out how to make a menu that's actually functional

  • @OsmanSandhu
    @OsmanSandhu 11 днів тому

    in my figma there is no spacing mode in advance layout... how can i fix it ?

  • @nightlaw_1
    @nightlaw_1 11 днів тому

    Thank you! Gave me information that a paid course couldn't!

  • @ZyanneMinorMelville
    @ZyanneMinorMelville 11 днів тому

    Every time i add auto layout to the small label and the top line vector, my vector ALWAYS moves and I'm following everything in the video!😭 how do i fix?

  • @alexblaze4050
    @alexblaze4050 11 днів тому

    Thank you so much! I made a button of Spotify 🤍🤍

  • @FreightWatchInfo
    @FreightWatchInfo 11 днів тому

    I love how you constantly go back and explain how and why you do the auto lay out, and re-explain the necessity to do so on multiple elements. You definitely speak in a way where it seems you understand the questions that the audience will have. Great work, I know its not easy to make these videos, but, a year later, it is helping me

  • @storymaxart
    @storymaxart 12 днів тому

    This is such a clear video The only thing that could be better is a bit of a pause when explaining, but hey, we have yt so I could just rewind. I learned so much!

  • @vamboo8918
    @vamboo8918 12 днів тому

    thanks

  • @abelidume6607
    @abelidume6607 12 днів тому

    Super helpful, man. Thanks!

  • @adeadkid
    @adeadkid 12 днів тому

    Figma balls

    • @mavidesign
      @mavidesign 12 днів тому

      Lmaooooo

    • @adeadkid
      @adeadkid 12 днів тому

      @@mavidesign anyway thx to you I get to keep up my lie on my resume

  • @Mahor74
    @Mahor74 13 днів тому

    thanks mr I'm gonna

  • @rochellewilbers7911
    @rochellewilbers7911 13 днів тому

    I cannot find the 'content' option in the design bar that's referred to before creating a variant? I've tried Google search with no luck. anyone have any idea or similar issues?

  • @monikabenesova2387
    @monikabenesova2387 14 днів тому

    Can anyone explain why my sections shrink together when I use global autolayout? I`m clueless

    • @monikabenesova2387
      @monikabenesova2387 14 днів тому

      also my header dissapeared, there`s only the frame but no logo etc