Learn more about UI design: shiftnudge.com Figma File: www.figma.com/community/file/... Say hi! / mds / mds 00:00 Intro 01:44 Rant 02:56 Tutorial 14:55 Outro 15:52 Random
Пікірлер: 205
@UvePortillo3 жыл бұрын
Put it all in this channel Matt, your content is always awesome, well edited and very instructive :) Thanks!
@LazarusStr Жыл бұрын
This was interesting to watch! I'm still learning the power that Figma holds. Although I'll admit I will have to repeat it a few more times to have it sink in. Your explanation was fun to watch! Appreciate you taking the time to create this 🙏🏾
@Mortres3 жыл бұрын
Awesome video, thank you. And I'm all in for the renovation videos/vlogs. Keep 'em coming.
@eliasaderemi89632 жыл бұрын
OMG thank you for this video. I've searched for a multi-component function like this for days. Thank you so much.
@yagozardo3 жыл бұрын
It is so fun to watch your videos MDS! You're the best at teaching complex stuff but doing it enjoyable. Thank you for sharing this!
@yagozardo3 жыл бұрын
And Yeah, please share more vlogs with us!
@mdsnotavailable3 жыл бұрын
🙌
@its.akbibyan3 жыл бұрын
Love watching this video. The way you showed how interactive components work seems much easier to learn. Please make some more videos on how to improve and scale the designs.👍
@alialkofee13 жыл бұрын
And yes I would love to see some vlogs and other types of videos from time to time..
@mdsnotavailable3 жыл бұрын
👍👍
@thekuzicartoon2 жыл бұрын
FINALLY! Someone that does a video for advanced tips and tricks! There is such a bombardment of tutorials out there - most of which are aimed at the noobie. It is really like finding a needle in a haystack for more advanced technique tutes. Awesome job, you found an untapped niche! I hope to see many more like this.
@mdsnotavailable2 жыл бұрын
😊 Thanks Karen!
@thekuzicartoon2 жыл бұрын
@@mdsnotavailable 😊 Hey there. Just thought of something maybe you can help out with ... In Figma, is there a way to click on something to make it animate THEN click on it again to make it stop animating? Kinda of a toggle-ish type thing except the toggle is between animated state and non-animated state. Make sense? For example, make an item spin (like a record). Click on it, it spins. Click on it again, it stops spinning. I am sure there is at the very least a hack... I haven't found anything out there, so it would be a good video!
@mdsnotavailable2 жыл бұрын
@@thekuzicartoon You can't pause an animation, but you can kind of fake it by having a set of animated objects and a set of static objects, with a click toggling back and forth between those sets. Here's a quick example: www.figma.com/file/H1FFlmURSQP5rSLD2jvBto/Untitled?node-id=0%3A1
@thekuzicartoon2 жыл бұрын
@@mdsnotavailable That was great! With a few tweaks and trial and error, I got exactly what I needed. Thanks so much!
@anasmohaideen3 жыл бұрын
This is super helpful! Also, I loved the Random in the end!
@garyvoigt3213 жыл бұрын
Stop apologizing for your genius! This was such a rad tutorial. Thank you.
@mdsnotavailable3 жыл бұрын
lol, thanks!
@alialkofee13 жыл бұрын
This is brilliant!! Keep up the awesome work!
@blinn40x2 жыл бұрын
THANKS SO MUCH FOR THIS - currently staring at a massive UX challenge & this helps immensely
@Pennymobs3 жыл бұрын
Hey Matt! I definitely want to see your home studio video and how your are building it. Those projects are so exciting!
@arsenberezovskiy2 жыл бұрын
Dude, thank you for these videos! So cool. Keep posting
@mustis1382 жыл бұрын
This is great! I enjoy the fact you say this is not the only way to do it but probably the fastest way, and no need for apologizing man, it makes you humble! Thanks a lot.
@AI-rn1yz2 жыл бұрын
I have to admit, this is one of the best explanations in YT tutorial I have ever seen. A bloody sub! Edit: Thanks for highlighted comment.
@thaomynguyennguyen41442 жыл бұрын
Love to watch your video!
@remusb3 жыл бұрын
Really nice tricks! 👏 Thanks for sharing and keep them coming
@ducthien2442 жыл бұрын
So much PRO tips. Wait for your next video. BTW, love your voice!
@kingjamesofengland2 жыл бұрын
Just want to say THANKS for this video! This technique cut down my linking time for a percentage slider down to 10% the amount of work. This rocks!!
@mdsnotavailable2 жыл бұрын
Awesome. Glad it helped!
@helgasonb3 жыл бұрын
Great video and yes video about your home studio renovation interesting.
@Ki-Lessons2 жыл бұрын
Nicely done! I like that you reiterate gestures, shortcuts, etc.
@mdsnotavailable2 жыл бұрын
Thanks Reichart!
@Ki-Lessons2 жыл бұрын
@@mdsnotavailable I don't make videos, unless I'm annoyed, or representing info. But you might appreciate this early Figma video I made (which had to be made back then sadly) kzfaq.info/get/bejne/hOBnitpi2K3IdXk.html&ab_channel=ReichartVonWolfsheild Firma is getting better and better, which is rare in software these days.
@rajamanikandanselvaraj9242 жыл бұрын
Excellent work... thank you very much....
@nr3792 жыл бұрын
This is the best tutorial i've ever seen in a long time
@ivondarmanto6769 Жыл бұрын
This is so nice and saves time! Thanks for sharing
@mdsnotavailable Жыл бұрын
🙌
@al1gned2 жыл бұрын
This might be another random comment around here but I've been watching a lot of design tutorials on here but not once did I try to actually apply those. Well, you sir changed this for me. Subscribed, and on my way to buy the course! Such a breath of fresh air :)
@mdsnotavailable2 жыл бұрын
not random at all =) glad you found it helpful!
@OzMoVideo2 жыл бұрын
Great video, thank you!
@itstherealwon Жыл бұрын
awesome tuts. thanks!
@robmeireles2 жыл бұрын
Very elegant solution.
@akintugay3 жыл бұрын
Great one MDS, keep it up 👍And I would love to see the office renovation video and maybe I can steal a couple of ideas for my office 🙃
@readtogether-podcast2 жыл бұрын
Amazing, thank you!
@alimakhsan3 жыл бұрын
6:57 Boom! I don't know that trick, that saves my time, thanks MDS!
@paigewalker4539 Жыл бұрын
This was amazing.
@dongnhinguyen142 жыл бұрын
So cool, many thanks
@thepositivevibesclub17292 жыл бұрын
I've never seen anybody delete variants and paste in the default component. That's absolutely brilliant and I'm gonna play around with that! Thanks for the video!
@mdsnotavailable2 жыл бұрын
🤘
@animegeek-0112 жыл бұрын
That was awesome, thanks for this tutorial.
@victornzedu1152 жыл бұрын
you’re really incredible bro!!
@jhonnafg2 жыл бұрын
This is exwctly what i need thank you!
@KD9-372 жыл бұрын
ingenius hack man! thankyou for this video !
@mohammedfahim34472 жыл бұрын
This will help a lot! Thank you so much
@kev16 Жыл бұрын
Awesome. This is a nice solution. I am looking into something similar but I would add a challenge / complexity by allow the color part to allow for users to tap multiple colors at once
@logeshwaranr53303 жыл бұрын
It's fuc*ing helpful man. This saved me a whole loooot of time 🙌
@renzoabianchi3 жыл бұрын
I'm really hyped to start Shift Nudge in a few days!!! Keep it going Matt, you're really inspiring dude. P.S.: Yes, please add the office renovation video! 💪
@mdsnotavailable3 жыл бұрын
Thanks man!
@eltonbehari96523 жыл бұрын
Great video! I love doing everything inside of Figma. Thanks for sharing. I just have one suggestion: lowering/changing that background music (kinda like a metronome, not sure though) and the keyboard sounds, as I had a hard time to follow along. I had to turn on captions and lower the volume, as the mixture of the keyboard sounds and the background music was a bit too much for me.
@mdsnotavailable3 жыл бұрын
Agreed. My dynamic mic was on the fritz so my shotgun was the only option. Definitely picks up clicks way more. The music definitely isn’t helping in retrospect. 👍
@inspectaeclectic1706 Жыл бұрын
@@mdsnotavailable It's not your clicks - it's the background track. It really steals attention from your excellent content. Dump it, girl!
@mdsnotavailable Жыл бұрын
@@inspectaeclectic1706 This video is from a year ago. I’ve repented of my past transgressions. 🙏
@SvetylekV2 жыл бұрын
It very cool! Thanks!
@NamChauNgo2 жыл бұрын
This guy is saving my life. I have to design a menu system in which it has a tons of interaction that cannot overlap each other!!!!
@wongeubing2 жыл бұрын
Awesome video! Thanks for sharing this hack. Love it.
@PixelSushiRobot3 жыл бұрын
Awesome! Learned a new trick today. Oh, and post whatever videos you like here :)
@ruonanyan48393 жыл бұрын
Thank you very much! This is incredibly useful!
@mdsnotavailable3 жыл бұрын
Glad it helps, Ruonan!
@TanvirAhmed-ur3kr2 жыл бұрын
This is a great tutorial. You are the one who has solved my problem.
@mdsnotavailable2 жыл бұрын
Glad it helped, Tanvir!
@jaylouie99502 жыл бұрын
Great video thanks man
@mdsnotavailable2 жыл бұрын
Thanks Jay!
@arff_f3 ай бұрын
Sheeesh. This manis absolutely god in this
@Grafexstudio-su4gz Жыл бұрын
I TRIED and i won !! Thank You
@CalebSchantzChristFollower3 жыл бұрын
I would love to see the renovation!
@sharikapathirana2 жыл бұрын
Amazing now I can upgrade my project Thanks a lot 🌟🌟🌟🌟🌟
@julianTrichardson Жыл бұрын
Bro blew my mind and confused me at the same time
@mdsnotavailable Жыл бұрын
😅
@julyartzo1241 Жыл бұрын
Thank you! That's WOW😧
@hellofath3 жыл бұрын
Yes would be interested in vlogs, especially on the DIY home reno topic hehe. But yeah, post whatever. :)
@fulltrucker3 жыл бұрын
Super great stuff, love it. Would be interesting to see if making a number choice could affect which colors are available to be selected. I'm thinking of a scenario where you select a t-shirt size, but not every size is available in all colors. Simple use case, more complex interaction.
@mdsnotavailable3 жыл бұрын
You totally could, but would need to combine the color and number variants and create a “super variant set” that contained all possibilities. I would probably only do this for one combination to show how it would work (to get buy in from stakeholders) and not build out every version. 👍👍
@ivanbadia32323 жыл бұрын
Shift Nudge is on my radar
@victornzedu1152 жыл бұрын
yes please you can post a vid of office renovation here it’s totally cool!!! keep everything in one place, you can create a new playlist for stuff that are not design related! okaay bye! I’m your biggest fan I guess😂❤️❤️
@stephencohay3900 Жыл бұрын
wow, very cool video, youre fire
@ChristianBaptiste3 жыл бұрын
Brilliant
@davezor212 жыл бұрын
Game changer!
@BrunoJoka3 жыл бұрын
Amazing!!!
@setherichardson3 жыл бұрын
Doesn’t matter! I know I look forward to the home studio videos!
@abderrahimanejjar912 жыл бұрын
Great way
@christophermoro1669 Жыл бұрын
This is the absolute shit!! Thanku! Been searching for hours for a tutorial on how to do this (was needing to do sizing buttons XS, S, M, L).. Mind blown.🤪🤯
@mdsnotavailable Жыл бұрын
Glad it helped!
@the_true_hier_to_the_sharingan2 жыл бұрын
I'll say you should post but not sure if you should post it on this channel coz when people search for design videos it could be that the algorithms start pushing your channel behind other design channels just coz you post fun stuff too. I don't know how yt works but I am pretty sure that with more automation yt engineers too find it hard to understand recommendation feature of yt. Btw awesome video man subscribed within 5 mins.
@atomparish3 жыл бұрын
Framer tries so hard to be a great tool. Sadly, whenever I give it a try I don't like the feel. I'm glad to see this built out in Figma.
@mdsnotavailable3 жыл бұрын
I do love their UI, but it’s definitely a different mental model for designing.
@tom70502 жыл бұрын
I dont understand this hype too ... figma is so behind sketch in features , specially for components , and the felling as you say is huggly
@amirivno98012 жыл бұрын
Yeah man do it 😂😂😂😂, goood content, keep going
@DJ-Illuminate Жыл бұрын
I avoided Figma for years and after losing my design job I finally have time to look at the tools that have come out over the last five years. When I started my job I used to have time to research and keep up. I maintained and designed websites for a company for 13 years. After five years the work load became so great I was working ten hours a day six days a week with barely time to breathe. In retrospect I should have quit but you know how it is.
@noahm3 жыл бұрын
Honestly, this would take less than 2 minutes to do once you know what you’re doing (Matt, it’d take you probably about 15 seconds without talking). Absolutely no point in changing design tools, saving time and money. Thanks for the video!
@mdsnotavailable3 жыл бұрын
Thanks for watching, Noah!
@noahm3 жыл бұрын
@@mdsnotavailable I’ve been following your content for a long time and I’ve finally signed up for the next enrolment of Shift Nudge. Thank you so much for your work Matt, all the best.
@Rodkidesings2 жыл бұрын
Awesome bro! thanks, I been looking for this, let me know if there is a new way to do it!
@sadiecetin3 жыл бұрын
Great video, I only miss the alignment on the last scene ;p
@nati_gallo2 жыл бұрын
I have been sqeezing my brain for hours on how to do this, thanks fo the video man, great stuff! I also would like to know, how could you insert a hover and click in this situation?
@CalebSylvest3 жыл бұрын
Legit!
@erfannourian6442 жыл бұрын
Nice Way
@kxp19962 жыл бұрын
In the words of Boyz II Men - "All my life, I've waited for someone like you, and I thank god that I finally found you..."
@mdsnotavailable2 жыл бұрын
That’s KC and JoJo, but I still really appreciate the sentiment. 😅👍
@enriquea308 Жыл бұрын
Awesome! can we use something like this as a color palette to change a style color in a prototype?
@ernstnext14992 жыл бұрын
Thanks so much for sharing. Love the video, but found the music slightly distracting
@ivanbadia32323 жыл бұрын
I redesigned my kitchen I used Figma to build a grid. I was able to layout my coffered ceiling an tiles perfectly. Get that sledge hammer ready.
@missy1500 Жыл бұрын
Thank you! I've been searching for a multiple choice type tutorial. How much more complicated is adding a hover state? I know radio buttons can only have 2 states. I am almost done with my bootcamp, so a baby UX designer but eager to learn. Any response would be greatly appreciated!
@mdsnotavailable Жыл бұрын
It could be done by adding additional hover state variants. 👍
@andreabettinelli2728 Жыл бұрын
Hi!! great video. I just missed at minute 12:04 when you hit "return" and all the magic happens? what you mean by hitting return?
@mdsnotavailable Жыл бұрын
Pressing the return key with a parent layer selected automatically selects all children layers
@valterfriafilho21503 жыл бұрын
Please, show us the process of the new studio
@b4sti3n77 Жыл бұрын
Hi MDS, thank you for this amazing video but I have a little quetion : I am struggling doing a full custom from scratch calendar in figma and all those connexion are insane when you have 31 days multiplied by 12 for all the connexions.. How can I do that ?
@mdsnotavailable Жыл бұрын
My first question would be to ask why you want to do that? I would ask you to consider greatly simplifying what you’re trying to create with a Figma prototype.
@herzogpablo2 жыл бұрын
Great stuff! Thanks for that! 😁 But if I want to carry the user to another screen with only the selected number and color, how can I do that? Like, the user picked 2 and yellow and clicked on "next", how can I make it display only the number 2 and the yellow color?
@mdsnotavailable2 жыл бұрын
That would be tricky. You could fake it by transitioning only some of the screen content to something different by linking it to the "next" button, but what you're asking would be much more logic based and might be too difficult.
@livsinterior Жыл бұрын
my app soft in gms doesn't soft like that it is different.please help
@Juankmc892 жыл бұрын
When I do the prototype link part it doesn't work, I don't know what I did wrong
@cristinagg21132 жыл бұрын
Awesome video! Thank you so much. I have a question and I'm really desperate with this... there is a way that I could click on a button that it's inside of a box of Interactive components, and when I click on it, navigate to another screen? For example, I'm on the web, on the Home screen, but I wanna go to a Profile screen, so I pass the mouse over the button and happen all stuff I establish on the Interactive component, but I wanna add the property that when I click on then, navigate to Profile screen. I don't know if I'm making myself clear.
@mdsnotavailable2 жыл бұрын
the short answer is: put your hover interactions in a separate component, then put those instances into a nav group component and link those instances to the pages, not the rollover ones... the long answer is: just made a video about this and should have it up later today. =)
@cristinagg21132 жыл бұрын
@@mdsnotavailable niiiiiiiiice! I'll be waiting for the video! Because I think I'm doing something wrong :(
What is this wild music? It sounds like a brain at work
@nikhildhaka49122 жыл бұрын
I want to learner, How will be make this prototype ?
@NamChauNgo2 жыл бұрын
Thanks for the video. So if I wanna do the first interaction is hover and the second is click, what should I do then?
@mdsnotavailable2 жыл бұрын
Add two interactions with different triggers
@Xianalin2 жыл бұрын
Hi, MDS, this video is sooo great!!! But one thing I still don't understand is the prototype. When I click number one, why the number one show up in the blue circle, not the number two or three. My confusion is number one is connected to the component which contained 1, 2, 3, and why only number one shows up?
@mdsnotavailable2 жыл бұрын
Thanks! I'd recommend digging into the Figma file provided and inspecting how it's setup.
@andrewstrasser2 ай бұрын
i desperately need to know if there's an update to this entire thing by using the new variables stuff
@mdsnotavailable2 ай бұрын
I'm 95% sure there is, but I haven't explored it yet.
@eslamnssar93582 жыл бұрын
love the video! hate the backgorund noise.
@eslamnssar93582 жыл бұрын
it's literally making me nervous
@mdsnotavailable2 жыл бұрын
You and every other commentor 😅
@Ganito552 жыл бұрын
I worked with Figma & Adobe XD, Xd wins in every area for me.
@mdsnotavailable2 жыл бұрын
XD is great!
@jordanr67572 жыл бұрын
If I want to learn elite UI design. I come here.
@shahbazmulla4893 жыл бұрын
hii MDS this trick didn't work figma didn't show change to option while connecting one component to another component plz help me !
@mdsnotavailable3 жыл бұрын
Make sure you're enrolled in the Figma Beta program first as it's currently a beta feature. More info on how to do that here: kzfaq.info/get/bejne/qdKdf9yS1NKqZWQ.html
@SebastianKaye3 жыл бұрын
Love it! Would it be possible to apply this to an overlay?
@mdsnotavailable3 жыл бұрын
Not sure, but worth a try!
@SebastianKaye3 жыл бұрын
@@mdsnotavailable Will let you know how I get on with that :) - plus, I cannot seem to make an interactive link (in Prototyping mode) from one variant set to another variant set, like you did in your video... Figma only allows me to make interactive links between the individual elements within each set, and not the set itself.... Is this feature only available in some special beta mode? or am I missing a trick here?