👉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.
This is exactly what I needed, got 170 screens on a mobile app with the same menu! Subscribed!
6 месяцев назад
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
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?
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
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..
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.
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.
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!
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
thanks Mizko! However, I have an issue... If I would like to have a seperate "components" page where I have lined up my design components nice and tidy. I dont want this to spam the rest of the pages.. When doing this I cant reach the stuff that is on other pages 😔 I noticed that if I make the navigation component on the same page as the designs, I can then move this to the other component page and it still work, as long as I dont want to make any changes.. This is soo frustrating, becase I would like there to be full connectivity between pages.. If you have any tips I would be very happy to hear :)
I want to do the same thing, but I divided my project into several pages Components, cover, mobile and desktop The header is on the components page Please explain this How do you organize pages within a project and how does the prototype work in this way?
What if navigation bar is already a component and had been added in a design library how it will work like this in a prototype since it becomes an instance now
👉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!
Spent 5 minutes watching this vid, saved hours on my prototype. Thanks Miz, might just hop on the design ship.
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 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!
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
Savior. Watched five other tutorials that claimed to show this, but they don't do it right. You're the man.
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'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
Madness, thank you buddy. Do you have a set of video like this ? Tips on Figma ? Short and straight to the point
Just tried this and it worked. Thank you for helping me save time 😁😁
Amazing tip, it took me only few seconds to make all connections in my prototype. Thank you!
This simple tip deserved a sub. Had to hit that button.
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
Thank you Mizko 🔥
Can’t wait for your next course.
It's coming :)
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
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
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..
Exactly what I was looking for. A lazy smart way.
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.
This guy is on another level 🫡
You nailed it as usual my guy 👊🏽👊🏽
You’re Awesome! Just what I was looking for 🙏
Love this. Didn’t know we can do that with components.
Mizko You're the STAR!!!!! 🌟 THANK YOU :)
Bro, i just saved so many hours of work, thank you !
Great as always, love your content Mizko!
Gold.....absolute gold, good work homie!
Nice one, short, simple, to the point. My kinda tutorial!👌
that might save a lot of time and effort for my lil project. Thanks mate!
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.
The way my prof is teaching this is infuriating… this video saved me SO MUCH TIME
Awesome trick! Thank you Mizko🥰
OMG! What a time saver! Thank you for sharing this!
Very smart. Thanks Mizko!
OMG I'm a beginner but im so happy I learned it now
thank you so much mate made me complete my assignment 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
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!
Thanks for the neat trick man, love it.❤
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.
Ty I got my first divine because of you
1st statement made my day 😅😅
If your MAIN COMPONENT is on another FIGMA doc from the SCREENS pages, then how would this work?
Lazy?? NO. Eficient! Great video. Thankfuly I had figured out this work process even before watching it.
Good job buddy. You are one of the best
Thank you! Glad you found it useful.
Just when i needed it. Merci beaucoup.
This is clutch! Thank you!
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 is great, man!
Mad to think some people didn't do it that way before...
Mindblowing! 👏👏
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
Great tips!
Thanks Joilton!
Great video and insights as always. Looking forward to your next one.
🤙🏼
Great Tutorial. Thanks!
exactly what i needed. thanks!
Still helpful 1 yr later. Ty.
YOU ARE AMAZING.
Mind blowing! Thank you so much for this tip.
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😁
Don't prototype in the frame, but connect the components first and then copy them to the frame.
Thanks for sharing. Mizko
bro you saved my life
You are amazing!!! Thanks for the video!
Who's a lazy designer that Bill Gates will hire? 😅
Me. Been doing this over a year on figma. Absolute life and time saver.
Me lol I actually thought you already made it a component (I wasn't playing close attention) and you were doing extra work for no reason 🤣
Hay Mizko!
You just revealed my design secrets! 😁
Very Nice and useful information 👍
Easy, useful!
Very useful tutorial!
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
THANK YOU holy sh this was too hard to find
Great video - thanks much.
Well done, and love the accent!
Thank you very much ! So appreciate that!
I must say, that I discovered smart components very late while working with Figma - like 1 year after they introduced it :D
great thanks for that! Very clear and articulate!
it will work in some perticular scenarios
Cool tip! Thanks!
can u do basic codibg skills that ux designers shud be aware of videos
thank you, vicky prasetyo!
thanks Mizko!
However, I have an issue...
If I would like to have a seperate "components" page where I have lined up my design components nice and tidy. I dont want this to spam the rest of the pages..
When doing this I cant reach the stuff that is on other pages 😔
I noticed that if I make the navigation component on the same page as the designs, I can then move this to the other component page and it still work, as long as I dont want to make any changes..
This is soo frustrating, becase I would like there to be full connectivity between pages..
If you have any tips I would be very happy to hear :)
I'd love to know this too! Let me know if you figured this out :)
You save my day!
thanks
I want to do the same thing, but I divided my project into several pages
Components, cover, mobile and desktop
The header is on the components page
Please explain this
How do you organize pages within a project and how does the prototype work in this way?
I am also struggling with it did you find a solution? Cause I have my design system in a different page but I can't prototype well that way
Legend! Thank you
This is very helpful thank you
Thanks Mizko!!!!!!! Amazing :)
THANK YOU THANK YOU THANK YOU!!!
What if navigation bar is already a component and had been added in a design library how it will work like this in a prototype since it becomes an instance now
My all time shortcut😂, and I am using the section tool too. Which is lazy time saving 😅
lol.. you are so entertaining. Nice work!
Unfortunately the main component must be on the same page. Is there a workaround? Thanks.
exceptional, thanks
What would be the most effective way to highlight the active page link on the sidebar of the same component?
Nested properties!
Thats so awesome!! thanks