The CORRECT (and lazy) way to prototype | Figma Tutorial

My Ultimate Figma Design Masterclass (3,000+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko

[@Mizko]

👉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)

[@kevinrobertandrews]

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

[@mistermotoki]

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.

[@melkor66]

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!

[@railpressureflip]

Excellent analogy, thank you for that! Also I feel like with the age of computers, anything that can be automated, should be automated. Simple.

[@traviswettroth4391]

Great video

[@SA-cb2it]

Makes sense to me why figma feels more like coding than designing, it is made with a mental model of a Corder

[@Andy-si1pl]

You are basically describing how programming in React JavaScript works. This is awesome

[@Mizko]

Exactly! Similar to React and Vue, components are self contained :)

[@thefanboy3285]

Thank you for tat information. I'll remember that when I get into React

[@femoskeydev]

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.

[@nimawheeler]

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

[@justynalitwinska6996]

Ha! Jima, I also noticed that there is this space for improvement. I guess we are even much more lazier than MIizko is 🤪😜

[@nobody-bt7mu]

Thanks for that tip!

[@mirrorlax7113]

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.

[@JoJoboiWav]

thanks dawg

[@BaukeSchildt]

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

[@hamzajamal2047]

Omg, you saved my arse for future projects. I recently worked on an online editor prototype and manually did 1000+ prototype links

[@MarcelQT]

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!

[@djisraelmix323]

Dude, the answer was components, and literally that's what I was learning/practicing today. I'm on the right path. Thank you, Mizko!

[@itefai1105]

Great as always, love your content Mizko!

[@esinkovits]

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.

[@Ravikiranks12]

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

[@muhammadbacar6051]

Already knew this trick and it was so effective made me do my designs much faster

[@masonguillory3790]

Spent 5 minutes watching this vid, saved hours on my prototype. Thanks Miz, might just hop on the design ship.

[@IsionIndustries]

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

[@shinkuro6331]

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?

[@alxmtncstudio2066]

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

[@TheKarishma89]

Amazing tip, it took me only few seconds to make all connections in my prototype. Thank you!

[@lexib9516]

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

[@Mizko]

Haha Lazy Lexi!

[@bluerhinoo]

Thank you Mizko 🔥 Can’t wait for your next course.

[@Mizko]

It's coming :)

[@Gearyco]

Savior. Watched five other tutorials that claimed to show this, but they don't do it right. You're the man.

[@jackwarner7827]

This is exactly what I needed, got 170 screens on a mobile app with the same menu! Subscribed!

[@rachelmoldovan8214]

Im not kidding. This saved me probably hours of my life and I am so grateful. Blessings to you, Mizko! lol

[@shereedillon743]

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.

[@jun6575]

You’re Awesome! Just what I was looking for 🙏

[@njengathegeek]

You nailed it as usual my guy 👊🏽👊🏽

[@jusren]

OMG! What a time saver! Thank you for sharing this!

[@rupaliandhale4524]

Awesome trick! Thank you Mizko🥰

[@thijsbaarda]

Nice one, short, simple, to the point. My kinda tutorial!👌

[@daliovic24]

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!

[@PauloHenriqueGuedesTecladista]

Mind blowing! Thank you so much for this tip.

[@MohitKhare]

Thanks for the neat trick man, love it.❤

[@inertingd373]

Madness, thank you buddy. Do you have a set of video like this ? Tips on Figma ? Short and straight to the point

[@lotfisouki1709]

Thank you bro really saved my time keep sharing more videos like those 5min with a lot of benifits

[@yamiben64]

that might save a lot of time and effort for my lil project. Thanks mate!

[@krypt0n54]

Great video and insights as always. Looking forward to your next one.

[@Mizko]

🤙🏼

[@mathias-ux]

Gold.....absolute gold, good work homie!

[@abubalo]

This simple tip deserved a sub. Had to hit that button.

[@aliemarah]

Very smart. Thanks Mizko!

[@TheTimeCapsule00]

Mizko You're the STAR!!!!! 🌟 THANK YOU :)

[@rumanaislam4758]

This guy is on another level 🫡

[@deazlyinc5437]

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

[@colbysandaidensgamingchann6599]

great thanks for that! Very clear and articulate!

[@empowerthecurious]

This is clutch! Thank you!

[@jazzthedragon]

Great Tutorial. Thanks!

[@coreydixon3194]

This is great, man!

[@neoshung3656]

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

[@ayambaasong4425]

Just when i needed it. Merci beaucoup.

[@WindowFilms.2.0]

thank you so much mate made me complete my assignment 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@AdCha7]

Bro, i just saved so many hours of work, thank you !

[@PolymathMuse]

Mindblowing! 👏👏

[@anastasiya5388]

Thanks! But how about projects, where you should use one component for many different types of screens? Does it mean, that every time when I have to use main component, I have to relink it again?

[@MarkWhiteartist]

Love this. Didn’t know we can do that with components.

[@user-jz7fo4pr8y]

Hi Mizko! If we wanted to add a selected state to the categories, is there a way to do that while also keeping the links?

[@BenoNetto]

Cool tip! Thanks!

[@RLNDcaST]

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😁

[@maaxsandher]

You are amazing!!! Thanks for the video!

[@hanabadz]

exactly what i needed. thanks!

[@od1592]

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

[@happyui204]

OMG I'm a beginner but im so happy I learned it now

[@ab-yp2gn]

Thats so awesome!! thanks

[@milindkhadse556]

This is very helpful thank you

[@JoseDavid-bv8lo]

Very useful tutorial!

[@vandanaparimi5227]

Ty I got my first divine because of you

[@mirrorlax7113]

Exactly what I was looking for. A lazy smart way.

[@yandoru]

Easy, useful!

[@adamstuartclark]

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.

[@tivenk]

Legend! Thank you

[@stefangagu9247]

exceptional, thanks

[@nikolayhristov7883]

Thank you very much ! So appreciate that!

[@CarlosHenrique-ku1ph]

You save my day! thanks

[@indigosay]

TYVM!

[@jcasstudio]

Good trick thanks

[@mirrorlax7113]

Thanks Mizko!!!!!!! Amazing :)

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

[@melxviera6936]

Buenisimoooo!! sos un crack / So goood, you're a genius

[@chadbrockman4477]

Great video - thanks much.

[@danielvaega]

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.

[@KelvinChiuFilms]

YOU ARE AMAZING.

[@siau-jiunlim2691]

lol.. you are so entertaining. Nice work!

[@Leo-ev9ss]

谢谢！ 我先在使用你的video学习

[@andreaagricola5148]

AMAZING!!!!

[@heloisaguarda7509]

Great video!

[@campingandrelaxing]

Thank you so much!

[@otoide]

Thank you!

[@CitoTalvi]

very helpful, thank you

[@anuproy6213]

Very Nice and useful information 👍

[@monlifes]

Well done, and love the accent!

[@letstalk3528]

it will work in some perticular scenarios

[@meettrivedi991]

Hay Mizko! You just revealed my design secrets! 😁

[@njengathegeek]

1st statement made my day 😅😅

[@IMzz12]

THANK YOU THANK YOU THANK YOU!!!

[@itsmartinalo]

Ilysm for this thank you

[@AndyMasfar]

THANK YOU

[@chandansingh-so4fx]

Thanks a lot

[@joiltonmelo]

Great tips!

[@Mizko]

Thanks Joilton!

[@firebutterfly]

Still helpful 1 yr later. Ty.

[@diegoguerra4829]

nice video!

[@hadeelhadeel6938]

OMG!, great video.

[@laxmandeep693]

very helpful

[@mrk651]

bro you saved my life

[@damilolafunsoadu]

Beautiful one! Can this method be used for bottom nav bar too? Especially when the nav bar has different style/colour for each colour depending on the page.

[@femmy6997]

The Method i know of and use for navigation bar is Creating an active and inactive state for each icons on the Nav bar then after doing that you copy and past or duplicate the nav bar on as many screens as possible tho depends on the no. of navigations you have.

[@tusharkuntawar6170]

Very nice!