Create a Figma Design System - Fundamentals (Part 1)

[@Mizko]

Supercharge your FIGMA Game! My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 thedesignership.com/courses/the-ultimate-figma-masterclass 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/figma-design-system/ Outline - Figma Wireframe Kit (350+ components and variants) 👉 www.thedesignership.com/products/outline-wireframe-kit Yours truly, Mizko

[@TylerHoff]

Hey Mizko! Would you happen to still have that coupon code available? Thank You!🙏👍

[@valeriesuos7011]

I recently bought your design system, I haven't seen the side bar...😞

[@StrikeFirstFinance]

I’m surprised templated wasn’t coined as “ecosystem” ! Another great video bro!!!

[@isaias6348]

I would refer the internet as a ecosystem and the template a human

[@winnechew5801]

Hhahahahaha thanks for making this video interesting with your subtle but not subtle call outs for smashing of buttons. I've done them HAHA.

[@Mizko]

Thank you!!

[@iSendal]

Yes I will click the like button and subscribe this channel, because your presentation is awsome

[@Mizko]

Haha thank you!

[@prizigner]

You never know the power of a design system until you reach the stage of templates. Minor things become so useful that designing becomes lightning fast. Woo..haa! Excellent explanation!

[@Mizko]

100% !! There's actually much more complexity beyond templates but I'll introduce that afterwards ;)

[@ezyderaaf]

I always found the like and subscribe plugs annoying, but you managed to make it entertaining 😂 you got both from me G!

[@Mizko]

🙏🏼

[@tomhuynh7868]

I do wish that more designers would take this component-based approach. However, my slight annoyance is not calling them what they really are (elements, components, objects, layouts).

[@Mizko]

Terminology will always vary through different geographies, companies etc.

[@miftahulhusna8105]

how to make those icon slider on the button.. fk im so new i literally confuse on auto layout lmao

[@Mizko]

Thank you! You should check out my Figma Masterclass. It’s a lot more detailed. thedesignership.com/courses/the-ultimate-figma-masterclass/

[@mikelondon1970]

I've been using Atomic design for the last 5-6 years. One thing I've introduced is 'Species' instead of Templates, so to make it simpler.

[@AznAshleeeey]

Love your videos! However, why is a button classified as a molecule? On Brad Frost's atomic design site where he explains it, he actually lists a button as an atom

[@Mizko]

A button is a label, color and shape. According to his own design system it should be a molecule as it’s a combination of atoms

[@Elysa1224]

Watched the entire "Design System" series. Loved it! Any suggestions on how to create one off an already existing app? And how to sell it to the DEV team and higher ups at the new company im working for?

[@jatinraj4974]

I am addicted to your video😅👌 You are very clear about what you say😍🔥

[@Mizko]

Awesome! Really happy to hear Jatin 🔥

[@PeterSierra]

My question about design systems is at what point are they to be created in the process? Is this something that is done prior to design or something that is done once all design is established? Or is it something that is done while designing?

[@aurelianspodarec]

While designing

[@user-lp7rm1cg1l]

Love this vid. Just letting you know it'd be nice if you zoomed in more when you're talking about icons and specific componentsb

[@dominikorlowski566]

Hi Mizko. Any plans to create this awesomeeffinness considering new features released Config 2023?

[@braids1272]

Thank you for this!! By the way what font are you using in the slides? It's beautiful

[@naknaknak17]

Interestingly, I just smashed the like button!

[@TylerHoff]

Awesome content. Thank You!🙏👍 Where is the coupon code? I'm not seeing it?

[@aswinm5088]

Do we need to add search bar in design system??? I will have only one type of search bar right..

[@SogMosee]

The issue with this approach to a design system with styles and toggles everywhere is that it makes it hard to do iterative design. I produce my best work when I work on a certain version in a frame, then if I want to try a new variation of something, I just clone it down and apply the change there. That way I can always see how a design evolved over time and perhaps pull things from previous designs into new designs, including colors and fonts. If I set all of those as styles, then change the font or color of a style, all previous iterations are modified too and I lose what makes iterative design so useful.

[@Mizko]

Hey SogMose, I understand your concern but designs should not be 'that' iterative. Designs should be consistent. If you work with any larger organisation, every single one of them have a design system of some sort. No one should be 'tweaking and creating variations of basic elements such as color, buttons etc that frequently. That can be very inefficient.

[@alystdesign]

What I do is the iterations are all in one component as variants so if I want to switch back to the old iterations. An easy switch. PS. I work on a beta product so there's a lot of changes.

[@JokerBrand7]

What is the difference between a design system, a template, a style guide and a UI kit?

[@K3nMastrz]

A design system helps product designers and developers use the same components as a single source of truth, a template is a larger experience or layout you want consistent.. mostly in web design.. but you could template main product landing pages if they share similar architecture... a style guide dictates how, when why we are to follow design style rules and when you can break them so its more rule of law or an annotated way to design something taking in mind brand needs and a UI kit is library of components with shared style.. :)

[@ajaydileep4325]

I wanted to do Design System for Multiple Partners in one system how we can do that do you have any idea or will you share any thoughts?

[@baskerb7408]

i can't understand, very fast, what is atoms???? what is a molecule???

[@manalidesai812]

You are super amazing but reduce the frequency of smash like button and subscribe

[@r_Abdullah99]

PRICELESS content!!!!! Respect!!!! 🎉✨🎉👏👍✔👌

[@Mizko]

Appreciate it MD!

[@virginiadabin2229]

Thank you very much for this, looking forwar for the next part/s. I smashed all the buttons

[@Mizko]

I love that fact that everyone is also picking up on the lingo now

[@jovannibasilisco6414]

11:33 How did you do that? Enabling and disabling sidebar options on the right

[@superkingminh]

FUCK YEAHHHHH

[@MrConway007]

Great video Mizko. Currently in the hunt for a new UI/UX job position and the requirement to learn and understand design systems is litterally on EVERY job positing I see nowdays. It seems like all companies are now realsing the power of consistency in UI software and how DS can help facilitate that. Question: How do you manage to keep the design consistency in all your components when they are all designed in a vacuum from each other? before they are then bought together to create the templates. How do you avoid creating a "frankenstein design system" I guess is another way of putting it. I ask this from the perspective of someone who has spent years "designing complete web pages" with all components in view at all times - so this way of working would be a radical change for me.

[@oliviabakerr6418]

please can you explain or make a video on how you created the master components that can hide and unhide elements?

[@tazz763]

Hey bro, Your primary HEX codes are exactly matching with Secondary Hex codes, please check, thanks :-)

[@Mizko]

Thanks for pointing it out

[@ritchiealtamirano6851]

Hello! Love the work and the tutorials, thank you. Question about purchasing the Shipfaster UI Figma Kit, if you purchase the system, can I reuse the template for any future projects?

[@SayJee]

Please make a video about making a simple page using that design system that you made.

[@dayrina.cwillems2041]

It would be nice if you put the course you made on Udemy for the once that can't afford the price on your website. 😊

[@Mizko]

Hey Dayrina, appreciate the feedback but Udemy and other course marketplaces don't interest me.

[@obinnaukoha1380]

How to I import a design system and its components into my design project?

[@mahindersharma2521]

Hi Mizko, To build a design system, do we need to build a home page or a basic page first? Or directly design the Atom and Molecules etc ? How do we know that it will look good in a page after using the design system components.?

[@tonys490]

why do you have so many shades if each colour in your design system?

[@jaelene17]

Do we create the system before we start on the project or we create as we go? Like adding on more atoms/molecules into the system file

[@bladurtv9314]

Hi mizko, i'm from Indonesia. can you add Indonesian subtitle in all your videos ? and i can more understand what you are talking about, because your tutorial videos is great bro maybe your view video become increase from my country Thx . Sorry , my English not very well 😀

[@Mizko]

Hey there! I can try but I need a translation service

[@MaheshGunawardena]

Hey bro. I just purchased your design system. It can be imported to figma cloud app. But can not import to my desktop app. I'm using Windows 10 and app might be the latest version. Please help me on this case. Sorry that I'm messaging here. Couldn't find a way to get the support.

[@Mizko]

Hey Manesh, no problem at all! It should definitely import successfully on the desktop app as most customers have. Is this still an issue? If so, let me know we will sort this out!

[@Mizko]

Mandsh! I just emailed you and removed your latest comment to hide your email from viewers 👌🏼

[@AnnaAnnaOneTwo]

Hey, is there a discount code available?

[@emilynguyen7769]

Hi everyone. At 9:27, Mizko chose an icon from icon library, and he can choose any icon he want from the right side. Anyone know how he set up the icon style in design system. I know how to add the text and color style, but I couldn't find out how to do it.

[@Mizko]

Ah! That's a bit more in-depth. I cover all that in my Figma course.

[@lorrieuiux5802]

I about spit out my coffee with the subscribe and like slides lmao. Also this is just far out - incredible. I am very impressed with how this system is setup.

[@Mizko]

Haha thank you Lorrie!

[@________a2k]

dump question. what are the numbers beneath the colors for? like for example in 4:31 I mean the value is from 0-100. So why are there till 700 or 900? Thanks

[@Mizko]

The shades are numbered 100 to 900.

[@kaziratul]

How did you created that master component you've shown in the end ?

[@yamparalarahul]

what did you use to create the presentation?

[@Mizko]

Figma!

[@ovidiu283]

Is there also a mobile version for all the components?

[@joshbowden983]

How are you color styles in their own categories?

[@THEweelaful]

i just had to like because how you told me to xD

[@videoessaysbyhoutsengkea]

Wow this is very helpful for people who never create any design system.

[@toinggg754]

I don't know how to 'gently' smash that like button, but I don't care, I'll smash it anyways because you rock Mizko! Love your videos! Keep 'em coming!

[@Mizko]

💜

[@SamuelPeiffer]

What presentation tool are you using ? Your slides are the bomb!

[@ridafakih8709]

MIzko! Love this channel! Curious what you used to create the presentation? Would love to use it for pitchdecks myself!

[@Mizko]

Thank you Rida! Created in Figma :)

[@Sebastian-zs8cp]

Hi, do you choose a artboard size first for have Proportions of element ?

[@Mizko]

Yes!

[@nativoluis]

Hi, a row from a table be a molecule or organism?

[@ehsankhorasani_]

why Input is a molecule and not an atom ?

[@ysabella2770]

Ah, has the limited time sale for your design system ended already? I meant to purchase it a couple days ago when I saw this video I just realize I didn’t...and it looks like the price went up already D: will you do another special sale soon please 🥺 I’m currently a UX bootcamp student and have found your Figma tutorial videos extremely helpful - THANK YOU! Thanks for making your contents so easy to follow through with your downloadable exercise files 🙏

[@Mizko]

Hey Ysa! Great to see you entering the industry and I’m always happy to support students. The coupon code still applies “yotube-10” - if you need further assistance drop me an email [e-mail]

[@ysabella2770]

@@Mizko oops I dropped an email via the site you linked me to earlier 😅 You’re awesome for the offer!!

[@LemonDust13]

Haha I really did appreciate this video & your killer presentation 😎 & the live template resource is amazing! 😯

[@Mizko]

Haha thank you 💜

[@sigyi1858]

Yes school does not teach you how to use soft soft

[@fernandomunoz8346]

Awesome videos on design systems, I appreciate the content. I also love the background music at the end of the video..Could you share a playlist or the artist/genre..It sounds perfect for doing design work. Cheers!

[@aviator62]

I guess I had to hit that like button

[@NatureFreak1127]

Hm! I created atomic system with components, paddings and stacking in XD and I kinda loved it, but I don't think i can work with colors like this, I would have to change them manually on each component. My manager's process is Axure (complicated prototypes) - XD for final screens - Zeplin - Is Figma just as versatile as Axure? - Would using Figma eliminate need for XD and can it export directly to Zeplin or its alternative? It would be more efficient to keep our designs in one place. Plus, I've heard that you can collaborate with co-workers in real time in Figma (or at least make commits). Sorry for the ranting, maybe someone will find it useful. I just found it exciting and had to write it down. 😁

[@ohitakeitback7602]

Thank You, You are such a gem of a guy. Can not explain how much your videos have helped me. Can you upload a video of designing something using your design system? It will be so helpful to understand the process.

[@TheDarknight7000]

I would like to see that too how to apply these colors system

[@koushiknath8700]

could we get this all file please?

[@solo-riffs]

Excellent video brother! It taught me exactly what I came here expecting to learn. 10/10

[@michellezhu1559]

It is EXTREMELY USEFUL! Thanks for this awesome video Michael. Can’t wait for part 2. Although I am curious whether you would create and hand off the whole system to a client project?

[@nategell]

9:57 - but the title says "Create"...

[@SahithNayudu]

Amazing🔥 Love from india 🇮🇳

[@Mizko]

Thank you Sihith!

[@quyenqnguyen]

Can’t believe this video is free. 🙏 blessed up my man

[@Mizko]

🙌

[@theclovergent2143]

Glad I found this channel. Gonna binge watch your vids.

[@Mizko]

🔥🔥🔥

[@holymason7]

wait your title of this vid is misleading. You're not teaching how to make one, you're advertising to use something that's already out there. a bit confusing.

[@matheuscardoso1740]

already loving this series since the first episode

[@Mizko]

Awesome! Great to hear Matheus!!

[@john-mac]

I'm still trying to find a designer that can say "button". And not "budden". What’s going on... 🤔 (great content. Thanks ❤)

[@Mizko]

Haha! I think us designers have said butt-on so much, we're too lazy to pronounce it properly anymore.

[@john-mac]

@@Mizko Hehe, could be. Good videos though 👏🏻👍🏻😊

[@farrukhmuqimov2674]

Can you share this file?

[@daniel_rad]

hec. yeah. Just purchased the design system! so organised! love it

[@Mizko]

Ohhhh thanks man! 1.2 will be released this week with more refinements and additional organisms 🔥 with Master Components.

[@rehansheikh3859]

Hey this is great ! can you make tutorial on the sizes of buttons and icons and what should be the size of top bars etc?

[@thedjnute]

Create a paid course on how to make a design system

[@Mizko]

You might want to check out my course here -> thedesignership.com/courses/the-ultimate-figma-masterclass/

[@evgeniyperekhod9278]

man, this is dope! Thank you! Extremely useful!

[@Mizko]

Really happy you found value

[@artenman]

buddons buddons budddons buddonnns

[@zindex5]

@mizko do you have a tutorial to make the master side menu that is able to hide and off? Thanks for sharing your amazing skills. You are very clear with the instruction and no mucking around. I would love to support you!

[@bharathsalla3971]

The one in the authorial atomic dedign system can be find in your purchase module . Especially atomic design system

[@doAnn88]

Hey @Mizko, I am learning the master class figma but I have problem I couldnt solve. Why is it that you can arrange the order of styles within the original design system file but not in the working file that you have attached the design system to. I have added e.g. a colour #50 as the last and i cannot reorder it. with colours it is is not too bad, but with text styles it is really annoying if you have split the Header styles in different sections of the list. Can you please help? :) Your class is great and it's fun following your instruction. ur a fun and great teacher!

[@UserfeedbackbyTea]

This video is definitely now for someone trying to learn... More like for someone how is just trying to make sure to remember something

[@nisharmultani2671]

i have one Question, i have a design system and now i want to add that to existing project and also want to add to different projects and change is on project guide how i can use one design system to all projects? please help me

[@HeythemHanafi-k5o]

What is the coupon code

[@spacebardesignsteam3354]

Subscribed! This video was amazing and you're hilarious. I will definitely be grabbing that design system. Thank you!

[@Andreas-yi6zf]

usually design systems is made before we make the prototype my question is how you decide the size of the button, the size of typography because we dont know which one we will use yet and we wont use them all. thanks

[@xeniasurie5013]

About the holy grail of grid systems my question would be: How to determine the grid system for your project.

[@KaidyCamille]

My design system is 😒shite. These awesome tips are sure to turn that around. Definitely thinking of doing a before and after. Thanks Mizko!

[@Underhills]

How do you get a row of color shades on the same level in the color style palette? No matter what I do I only get to add one color per area, if I choose to add another shade using the same color name it adds to a different section in the style palette. And you have headlines for each color types (Neutrals etc) instead of folders - how do u do that? I was looking for a different view option for color styles to see it in grid view or something like that but there are none. It's no options.

[@juanalvarostinsonsoler1742]

is this compatible with angular 9

[@Mizko]

Sadly not right jow

[@jhonbhai8943]

This is Hilarious at 3:08 😂

[@neginmatin1819]

Thank you for your videos. Is there any discount for your master course?

[@altsider]

This is a styleguide, right? Did you created the dev tokens, etc? I have difficult with this part of the design system process

[@AdityaMehtaMusic]

It's Mizko watching day today!▶️

[@Mizko]

Thank you Aditya!

[@eusoufefranco]

Hi, Mizko! Do you have a coupon to your Figma Course?

[@smaddin7899]

@mizko Well done! Thanks a lot for your help 😃👍👍

[@RJ-ir9pj]

Great stuff Mizko - how often do you plan to update the design system?

[@Mizko]

My team uses the design system across all our projects and also to build out thedesignership.com (under going a major overhaul right now, news coming soon!). We will be updating it periodically. There is no need for frequent adjustments, but we do plan on adding many more components. V.1.2 will be released in a couple of weeks. We've re-built all our components with Advanced Master Components which is going to save you so much time in modifying/editing components.

[@Seven55555]

@@Mizko is this reffering to the gumroad? That the design system will be updated.

[@Underhills]

How do you get those page icons in Figma? Talking about the icons next to the page name.

[@vagarysoulkothari1694]

very detailed and thoughtful design system 👌🏻 makes work easy for developers also.

[@Mizko]

👏🏼