The CORRECT (and lazy) way to prototype | Figma Tutorial
HTML-код
- Опубликовано: 2 июн 2024
- 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 
Развлечения
👉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
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".
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.
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!
Omg, you saved my arse for future projects. I recently worked on an online editor prototype and manually did 1000+ prototype links
Dude, the answer was components, and literally that's what I was learning/practicing today. I'm on the right path. Thank you, Mizko!
Great as always, love your content Mizko!
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.
Already knew this trick and it was so effective made me do my designs much faster
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!
Awesome trick! Thank you Mizko🥰
You nailed it as usual my guy 👊🏽👊🏽
You’re Awesome! Just what I was looking for 🙏
OMG! What a time saver! Thank you for sharing this!
Spent 5 minutes watching this vid, saved hours on my prototype. Thanks Miz, might just hop on the design ship.
Mind blowing! Thank you so much for this tip.
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!
Nice one, short, simple, to the point. My kinda tutorial!👌
Amazing tip, it took me only few seconds to make all connections in my prototype. Thank you!
Very smart. Thanks Mizko!
Gold.....absolute gold, good work homie!
Thank you Mizko 🔥
Can’t wait for your next course.
It's coming :)
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.
Savior. Watched five other tutorials that claimed to show this, but they don't do it right. You're the man.
Mizko You're the STAR!!!!! 🌟 THANK YOU :)
exactly what i needed. thanks!
great thanks for that! Very clear and articulate!
Madness, thank you buddy. Do you have a set of video like this ? Tips on Figma ? Short and straight to the point
that might save a lot of time and effort for my lil project. Thanks mate!
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!
Thats so awesome!! thanks
This is clutch! Thank you!
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.
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
Great Tutorial. Thanks!
Just when i needed it. Merci beaucoup.
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
Thank you very much ! So appreciate that!
This is very helpful thank you
This is great, man!
You are amazing!!! Thanks for the video!
Love this. Didn’t know we can do that with components.
Great video - thanks much.
Great video and insights as always. Looking forward to your next one.
🤙🏼
Cool tip! Thanks!
This guy is on another level 🫡
Very useful tutorial!
thank you so much mate made me complete my assignment 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
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 Mizko!!!!!!! Amazing :)
You save my day!
thanks
exceptional, thanks
谢谢！ 我先在使用你的video学习
Bro, i just saved so many hours of work, thank you !
Legend! Thank you
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.
Very Nice and useful information 👍
Easy, useful!
very helpful, thank you
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😁
Buenisimoooo!! sos un crack / So goood, you're a genius
Great video!
Very nice!
lol.. you are so entertaining. Nice work!
YOU ARE AMAZING.
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?
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
Well done, and love the accent!
AMAZING!!!!
Thank you so much!
Ilysm for this thank you
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?
Good trick thanks
OMG!, great video.
Thank you!
THANK YOU THANK YOU THANK YOU!!!
Great tips!
Thanks Joilton!
Ty I got my first divine because of you
nice video!
OMG I'm a beginner but im so happy I learned it now
Exactly what I was looking for. A lazy smart way.
TYVM!
1st statement made my day 😅😅
very helpful
Hay Mizko!
You just revealed my design secrets! 😁
THANK YOU
thank you!
Thanks a lot
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.
it will work in some perticular scenarios
thank you, vicky prasetyo!
loved it
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.
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.
Ty so much Mizko! But i have a little question. If we keep our components on a different page how we can do this without moving it? I think creating an instance on prototype page and making it a new (but also same) component would work. But is there a easier way to do this?
Hey! did you find an answer?