👉Become a Figma Expert & Master and End-to-end UI Design Process in 8 hours with me 👉 www.thedesignership.com/courses/the-ultimate-figma-masterclass (5,200+ students)
In programming, there is a principle called "DRY" which stands for "Don't Repeat Yourself". Even though we're talking about design here, I think the DRY principle very much applies. If you ever find yourself repeating the same task over and over, you can almost always abstract that task into a reusable form, like a component, and have a single place with which to make changes. 👍
Yes „a lazy programmer is a good programmer - because he never does things twice.“ DRY absolutely applies to design as well. Figma is a great place for this.
@@mirrorlax7113 No, he means that when you copy the instance (with the links done), select all the pages, and then hit cmd-v (paste), you will have all the instances on those pages in one go. Instead of "Select page, cmd-v, select other page, cmd-v, etc." it will be "Shift-select page, page page, cmd-v".
Awesome. I use this method almost on every interactive components I have on my UI really saves time. Thanks @Mizko for always giving the best resources.
I accidentally did this when i was making a prototype for my ux google certificate 😂 now i know what i was doing. Thanks for sharing this
6 месяцев назад+1
I've been lazy for the past 30 years but I go bored designing UI's since I am a backend/AI guy. Now with Figma and your tutos I want to be lazy with UI's again! Thanks a lot
Hi, thank you. To improve the effeciency a little bit further after creating the navigation component, I use to select all frames at once an paste at once the nav to all. than you are close to @ 100% efficiency. Bye
I’m slowly getting adjusted to working with animations in Figma. Coming from After Effects Figma is quite different but thanks for the tip! This will come in handy once I get more familiar with Figma
I want to learn animations and prototyping in Figma so that I don't have to rely on another software like After Effects. What resources did you find to be most helpful and quick?
The issue is that the component needs to be on the same page as the frames your linking to, while most people will probably use a separate page for all their components. Furthermore, when you are designing for a responsive UI, this also leads to problems because the component might be reused in multiple screen sizes, while the linking to other pages will be dependent on the screen size (ex. you'll want to link from mobile-landing page to mobile-contact-page, while you'd want to link from desktop-landing-page to desktop-contact-page).
Nice tutorial. I already knew this but it is nice to see anyway. I have been lately using component states to create expanding and collapsing accordions.
Thanks for the tutorial, you saved a lot of time. Also i tried adding hover and pressed state for the menus, it worked. Thanks again man, keep posting..
Thank you for the great tutorial! I realised straight away when I couldn't just do a component and link the prototype once that I was doing too much work. I wish that you didn't have to create the component and THEN paste it back into your design. If you have a component already in your designs, you then have to go and delete it out and then put it back in again after you've done the prototype linking. Just a little annoying when you think you've already done things the smart way but you haven't.
Man your earn a subscriber.. yesterday i was trying to do the same way.. but my approach was different, i was experimenting on component page.. Thank Miz
lol I actually figured this out on my first day of learning figma and have been doing it like that ever since... seemed like the ONLY correct way to prototype.
Awesome trick! Also, you might consider getting a pop filter, it will definitely be a great addition to your already good quality mic. Keep up the good work!
![[#2024MAMA] G-DRAGON - 무제(Untitled, 2014)+POWER+HOME SWEET HOME+뱅뱅뱅+FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/Ox29z5Nf1Uk/mqdefault.jpg)
👉Become a Figma Expert & Master and End-to-end UI Design Process in 8 hours with me 👉
www.thedesignership.com/courses/the-ultimate-figma-masterclass (5,200+ students)
In programming, there is a principle called "DRY" which stands for "Don't Repeat Yourself". Even though we're talking about design here, I think the DRY principle very much applies. If you ever find yourself repeating the same task over and over, you can almost always abstract that task into a reusable form, like a component, and have a single place with which to make changes. 👍
Yes „a lazy programmer is a good programmer - because he never does things twice.“ DRY absolutely applies to design as well. Figma is a great place for this.
Thatss a freaking great term sir, thank you. I'm gonna passionately use it, even in out of context situations, for the rest of my life!
Excellent analogy, thank you for that! Also I feel like with the age of computers, anything that can be automated, should be automated. Simple.
Great video
Makes sense to me why figma feels more like coding than designing, it is made with a mental model of a Corder
You are basically describing how programming in React JavaScript works. This is awesome
Exactly! Similar to React and Vue, components are self contained :)
Thank you for tat information. I'll remember that when I get into React
It is also faster to click all the pages and paste the component at the same time. (After placing it on the first page and copying it from there.)
Ha! Jima, I also noticed that there is this space for improvement. I guess we are even much more lazier than MIizko is 🤪😜
Thanks for that tip!
Yes but this does not address if the linking needs to be changed... you'd have to do it to each page... unless it was an instance of a component.
thanks dawg
@@mirrorlax7113 No, he means that when you copy the instance (with the links done), select all the pages, and then hit cmd-v (paste), you will have all the instances on those pages in one go. Instead of "Select page, cmd-v, select other page, cmd-v, etc." it will be "Shift-select page, page page, cmd-v".
Omg, you saved my arse for future projects. I recently worked on an online editor prototype and manually did 1000+ prototype links
Great video. As a dev I’m trying to learn figma and upskill my design. This video has saved me hours for future projects. Thank you!
Dude, the answer was components, and literally that's what I was learning/practicing today. I'm on the right path. Thank you, Mizko!
Awesome. I use this method almost on every interactive components I have on my UI really saves time. Thanks @Mizko for always giving the best resources.
Spent 5 minutes watching this vid, saved hours on my prototype. Thanks Miz, might just hop on the design ship.
I accidentally did this when i was making a prototype for my ux google certificate 😂 now i know what i was doing. Thanks for sharing this
I've been lazy for the past 30 years but I go bored designing UI's since I am a backend/AI guy. Now with Figma and your tutos I want to be lazy with UI's again! Thanks a lot
Im not kidding. This saved me probably hours of my life and I am so grateful. Blessings to you, Mizko! lol
This is exactly what I needed, got 170 screens on a mobile app with the same menu! Subscribed!
I adore you!!! I knew something like this was possible but didn't really know how to approach it. Amazing video as usual!!! Sincerely, Lazy Lexi
Haha Lazy Lexi!
Savior. Watched five other tutorials that claimed to show this, but they don't do it right. You're the man.
The way my prof is teaching this is infuriating… this video saved me SO MUCH TIME
Hi, thank you. To improve the effeciency a little bit further after creating the navigation component, I use to select all frames at once an paste at once the nav to all. than you are close to @ 100% efficiency. Bye
Just tried this and it worked. Thank you for helping me save time 😁😁
Madness, thank you buddy. Do you have a set of video like this ? Tips on Figma ? Short and straight to the point
I’m slowly getting adjusted to working with animations in Figma. Coming from After Effects Figma is quite different but thanks for the tip! This will come in handy once I get more familiar with Figma
I want to learn animations and prototyping in Figma so that I don't have to rely on another software like After Effects. What resources did you find to be most helpful and quick?
Because AE is a raw-power animation software. Figma has only one aim: designing for the web, so it's based off of web development principles
Amazing tip, it took me only few seconds to make all connections in my prototype. Thank you!
The issue is that the component needs to be on the same page as the frames your linking to, while most people will probably use a separate page for all their components. Furthermore, when you are designing for a responsive UI, this also leads to problems because the component might be reused in multiple screen sizes, while the linking to other pages will be dependent on the screen size (ex. you'll want to link from mobile-landing page to mobile-contact-page, while you'd want to link from desktop-landing-page to desktop-contact-page).
Nice tutorial. I already knew this but it is nice to see anyway. I have been lately using component states to create expanding and collapsing accordions.
Exactly what I was looking for. A lazy smart way.
Already knew this trick and it was so effective made me do my designs much faster
Thank you bro really saved my time
keep sharing more videos like those 5min with a lot of benifits
This simple tip deserved a sub. Had to hit that button.
Thanks for the tutorial, you saved a lot of time. Also i tried adding hover and pressed state for the menus, it worked. Thanks again man, keep posting..
Love this. Didn’t know we can do that with components.
Bro, i just saved so many hours of work, thank you !
Thank you Mizko 🔥
Can’t wait for your next course.
It's coming :)
Lazy?? NO. Eficient! Great video. Thankfuly I had figured out this work process even before watching it.
Thank you for the great tutorial! I realised straight away when I couldn't just do a component and link the prototype once that I was doing too much work. I wish that you didn't have to create the component and THEN paste it back into your design. If you have a component already in your designs, you then have to go and delete it out and then put it back in again after you've done the prototype linking. Just a little annoying when you think you've already done things the smart way but you haven't.
Mizko You're the STAR!!!!! 🌟 THANK YOU :)
that might save a lot of time and effort for my lil project. Thanks mate!
Yep... Have done this for website navigation menu. Dont know how i become up with it but yeah i have used it some time ago. And will keep up using it😁
I'm going to use that extra free time to go bask in the undeserved glory of looking like a design genius to my colleagues. Thank you.
This guy is on another level 🫡
thank you so much mate made me complete my assignment 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Great as always, love your content Mizko!
Learning the true power of components is like that first time you successfully climb the snowy mountain in Skyrim, and learn to use the shout.
Mad to think some people didn't do it that way before...
You’re Awesome! Just what I was looking for 🙏
You nailed it as usual my guy 👊🏽👊🏽
Nice one, short, simple, to the point. My kinda tutorial!👌
1st statement made my day 😅😅
OMG! What a time saver! Thank you for sharing this!
Don't prototype in the frame, but connect the components first and then copy them to the frame.
Thanks for sharing. Mizko
Man your earn a subscriber.. yesterday i was trying to do the same way.. but my approach was different, i was experimenting on component page..
Thank Miz
can u do basic codibg skills that ux designers shud be aware of videos
OMG I'm a beginner but im so happy I learned it now
Gold.....absolute gold, good work homie!
Awesome trick! Thank you Mizko🥰
If your MAIN COMPONENT is on another FIGMA doc from the SCREENS pages, then how would this work?
My all time shortcut😂, and I am using the section tool too. Which is lazy time saving 😅
Ty I got my first divine because of you
lol I actually figured this out on my first day of learning figma and have been doing it like that ever since... seemed like the ONLY correct way to prototype.
Good job buddy. You are one of the best
Thank you! Glad you found it useful.
Hay Mizko!
You just revealed my design secrets! 😁
Thanks for the neat trick man, love it.❤
Just when i needed it. Merci beaucoup.
Very smart. Thanks Mizko!
This is clutch! Thank you!
Great Tutorial. Thanks!
@2:28 if anyone wants to skip unecessary part
Thank you very much ! So appreciate that!
I use PowerPoint before when creating prototypes... It's good I found Figma
Awesome trick!
Also, you might consider getting a pop filter, it will definitely be a great addition to your already good quality mic.
Keep up the good work!
it will work in some perticular scenarios
This trick can only be used for important components or sections, not for all pages
exactly what i needed. thanks!
Great tips!
Thanks Joilton!
谢谢！ 我先在使用你的video学习
You are amazing!!! Thanks for the video!
Hahahaha I've done that to a tab bar a while ago hahahaha fantastic
There is a tactical reason that I'm sub'd to you.
This is great, man!
Hey thanks so much for this.. My links look like the London underground 👍😊
I will try this method out, cheers from a newbie to figma
I must say, that I discovered smart components very late while working with Figma - like 1 year after they introduced it :D
Mindblowing! 👏👏
I did not know that components save prototype links wtf... I would have done that from day1 :O Thanks!
Still helpful 1 yr later. Ty.
Great video and insights as always. Looking forward to your next one.
🤙🏼
TY!
Too Lazy to type full form
@@uxalok This was so good 😂So good, I'm pinning it.
Look at you now!! You making ui tuts on youtube. Keep up mann
@@bagzbaggyking 😁Thnx Baggy.
My content is more active then me. On Instagram
@@uxalok nice to see you here bro
Mind blowing! Thank you so much for this tip.
Ahhh. So lazy. So correct! Great trick my man 🔥
Very Nice and useful information 👍
THANK YOU holy sh this was too hard to find
Very useful tutorial!
This is very helpful thank you
great thanks for that! Very clear and articulate!
Great video - thanks much.
YOU ARE AMAZING.
Just simply put the code, it works! thanks!
Well done, and love the accent!
You save my day!
thanks
Used that method half year ago, in mobile app ui. Still unemployed for 9 months ;)
Easy, useful!
The sidebar behaves like a nav bar, make it a component seems pretty initiative
thank you, vicky prasetyo!