Create a Figma Design System - Fundamentals (Part 1)

  Рет қаралды 329,970

Mizko

Mizko

Күн бұрын

My Ultimate Figma Design Masterclass (2,500+ 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

Пікірлер: 228
@Mizko
@Mizko 3 жыл бұрын
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
@TylerHoff Жыл бұрын
Hey Mizko! Would you happen to still have that coupon code available? Thank You!🙏👍
@valeriesuos7011
@valeriesuos7011 Жыл бұрын
I recently bought your design system, I haven't seen the side bar...😞
@fernwehtwl
@fernwehtwl Жыл бұрын
thanks mizko your videos are way more valuable than bootcamps and other instructor courses out there. So valuable and very cost effective courses. Also you are an amazing teacher. Very straight to the point.. with no fluff that other designers on youtube do.
@MrConway007
@MrConway007 3 жыл бұрын
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.
@paularosler949
@paularosler949 Жыл бұрын
Great series, complex, short and professional intro. Thanks a lot!
@ezyderaaf
@ezyderaaf 2 жыл бұрын
I always found the like and subscribe plugs annoying, but you managed to make it entertaining 😂 you got both from me G!
@Mizko
@Mizko 2 жыл бұрын
🙏🏼
@cardozzzo
@cardozzzo Жыл бұрын
Great class, bro! I'll love to see the entire course, you're a awesome teacher.
@michellezhu1559
@michellezhu1559 3 жыл бұрын
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?
@prizigner
@prizigner 3 жыл бұрын
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
@Mizko 3 жыл бұрын
100% !! There's actually much more complexity beyond templates but I'll introduce that afterwards ;)
@jenorjennifer
@jenorjennifer Жыл бұрын
lollll!! I enjoyed your first "what you really need to do," but your second one really got me. really appreciate your teaching style! 🙏🏼
@solo.riffs1
@solo.riffs1 3 жыл бұрын
Excellent video brother! It taught me exactly what I came here expecting to learn. 10/10
@anabirdart
@anabirdart Жыл бұрын
Thank you! That is a wonderful way to explain everything; pretty clear and engaging😊
@zindex5
@zindex5 3 жыл бұрын
@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!
@lauranixon20
@lauranixon20 10 ай бұрын
The master component was really cool, new to me! I'll give that a go in the system I'm working on 😊
@hidabe4490
@hidabe4490 Жыл бұрын
Great video @Mizko and I learned a good deal from you here. Thank you!
@Bender0330
@Bender0330 3 жыл бұрын
This is great! Looking forward to the rest of this series!
@Mizko
@Mizko 3 жыл бұрын
Thank you Chris!!
@spacebardesignsteam3354
@spacebardesignsteam3354 2 жыл бұрын
Subscribed! This video was amazing and you're hilarious. I will definitely be grabbing that design system. Thank you!
@jlos1361
@jlos1361 3 жыл бұрын
love that science way of presentation!
@matheuscardoso1740
@matheuscardoso1740 3 жыл бұрын
already loving this series since the first episode
@Mizko
@Mizko 3 жыл бұрын
Awesome! Great to hear Matheus!!
@mohamedi6656
@mohamedi6656 Жыл бұрын
Exactly what I was looking for ! Thank you so much for your quality conent :)
@alexnguyen2023
@alexnguyen2023 2 жыл бұрын
Super cool videos and well explained! Thank You!
@jealousstove
@jealousstove 5 ай бұрын
Fantastic video. Appreciate your stuff!
@sabrinah3183
@sabrinah3183 3 жыл бұрын
Your explanations are amazing! So clear! Thank you!
@Mizko
@Mizko 3 жыл бұрын
Thank you Sabrina!!
@fernandomunoz8346
@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!
@rehansheikh3859
@rehansheikh3859 3 жыл бұрын
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?
@toinggg754
@toinggg754 3 жыл бұрын
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
@Mizko 3 жыл бұрын
💜
@user-lp7rm1cg1l
@user-lp7rm1cg1l 3 жыл бұрын
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
@StrikeFirstFinance
@StrikeFirstFinance 3 жыл бұрын
I’m surprised templated wasn’t coined as “ecosystem” ! Another great video bro!!!
@isaias6348
@isaias6348 2 жыл бұрын
I would refer the internet as a ecosystem and the template a human
@Elysa1224
@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?
@farshadamirshoghi9323
@farshadamirshoghi9323 Жыл бұрын
Thank you Mizko, I love it
@irinalinuza8341
@irinalinuza8341 2 жыл бұрын
you made really helpful video, thank you for your work!
@adada1st
@adada1st 2 жыл бұрын
Once you've got the template, the most important thing you do need to do is .... I did it, gently 😉 THANKS a lot, very helpful tutorial!
@smaddin7899
@smaddin7899 Жыл бұрын
@mizko Well done! Thanks a lot for your help 😃👍👍
@ohitakeitback7602
@ohitakeitback7602 2 жыл бұрын
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
@TheDarknight7000 2 жыл бұрын
I would like to see that too how to apply these colors system
@theclovergent2143
@theclovergent2143 3 жыл бұрын
Glad I found this channel. Gonna binge watch your vids.
@Mizko
@Mizko 3 жыл бұрын
🔥🔥🔥
@smaddin7899
@smaddin7899 Жыл бұрын
Well done & thanks a lot for your explanations :)
@bensontyson5295
@bensontyson5295 2 жыл бұрын
Thanks MK
@mochillabeats4604
@mochillabeats4604 2 жыл бұрын
Very Nice! Thx!
@fuhg.3707
@fuhg.3707 Жыл бұрын
great job buddy
@stacilapis1833
@stacilapis1833 Жыл бұрын
Thank you so much!
@rymfouzari9768
@rymfouzari9768 Жыл бұрын
Awesome video, thank you !
@adilbek.ermekov
@adilbek.ermekov Жыл бұрын
Just what i needed
@daniel_rad
@daniel_rad 3 жыл бұрын
hec. yeah. Just purchased the design system! so organised! love it
@Mizko
@Mizko 3 жыл бұрын
Ohhhh thanks man! 1.2 will be released this week with more refinements and additional organisms 🔥 with Master Components.
@quyenqnguyen
@quyenqnguyen 3 жыл бұрын
Can’t believe this video is free. 🙏 blessed up my man
@Mizko
@Mizko 3 жыл бұрын
🙌
@NatureFreak1127
@NatureFreak1127 3 жыл бұрын
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. 😁
@evgeniyperekhod9278
@evgeniyperekhod9278 2 жыл бұрын
man, this is dope! Thank you! Extremely useful!
@Mizko
@Mizko 2 жыл бұрын
Really happy you found value
@ritchiealtamirano6851
@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?
@LemonDust13
@LemonDust13 3 жыл бұрын
Haha I really did appreciate this video & your killer presentation 😎 & the live template resource is amazing! 😯
@Mizko
@Mizko 3 жыл бұрын
Haha thank you 💜
@ShomudroGupto
@ShomudroGupto 3 жыл бұрын
Mizko great stuff brother! Sharing this with my team to get us aligned on how we can approach our ongoing componentization project. Our challenge however is dealing with a large legacy design and codebase.
@Mizko
@Mizko 3 жыл бұрын
Thank you Samudra! It'll get easier. Best way to approach sites with massive code debt and legacy design is stagger the revamp.
@AndresGutierrez-sz2oc
@AndresGutierrez-sz2oc 2 жыл бұрын
Wow! thanks
@adilbek.ermekov
@adilbek.ermekov Жыл бұрын
Keep it up
@sowjanyapolkampet4446
@sowjanyapolkampet4446 Жыл бұрын
Thank you 🙂🙏
@shivamoeini1920
@shivamoeini1920 Жыл бұрын
Perfect.
@daviddores
@daviddores 2 жыл бұрын
Amazing!!
@virginiadabin2229
@virginiadabin2229 3 жыл бұрын
Thank you very much for this, looking forwar for the next part/s. I smashed all the buttons
@Mizko
@Mizko 3 жыл бұрын
I love that fact that everyone is also picking up on the lingo now
@lorrieuiux5802
@lorrieuiux5802 3 жыл бұрын
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
@Mizko 3 жыл бұрын
Haha thank you Lorrie!
@vagarysoulkothari1694
@vagarysoulkothari1694 2 жыл бұрын
very detailed and thoughtful design system 👌🏻 makes work easy for developers also.
@Mizko
@Mizko 2 жыл бұрын
👏🏼
@movieclips5891
@movieclips5891 Жыл бұрын
Thank you for this awesome video
@tonipareja
@tonipareja 3 жыл бұрын
Great video! You explained it very well 😊
@Mizko
@Mizko 3 жыл бұрын
Thanks Toni :)
@videoessaysbyhoutsengkea
@videoessaysbyhoutsengkea 11 ай бұрын
Wow this is very helpful for people who never create any design system.
@ratchetptnr
@ratchetptnr 3 жыл бұрын
Just the video I needed.
@Mizko
@Mizko 3 жыл бұрын
🔥
@jatinraj4974
@jatinraj4974 3 жыл бұрын
I am addicted to your video😅👌 You are very clear about what you say😍🔥
@Mizko
@Mizko 3 жыл бұрын
Awesome! Really happy to hear Jatin 🔥
@UserfeedbackbyTea
@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
@Vandana_Prajapati
@Vandana_Prajapati 3 жыл бұрын
I loved the video
@rickboyer6676
@rickboyer6676 Жыл бұрын
smashed!
@javedakhtar7596
@javedakhtar7596 Жыл бұрын
Thanks
@alighadyani7061
@alighadyani7061 2 жыл бұрын
Hey thanks for the video what font for typography are you using for your design system?
@aviator62
@aviator62 4 ай бұрын
I guess I had to hit that like button
@oussamabouyardane2431
@oussamabouyardane2431 3 жыл бұрын
Thank you so much for your amazing videos! Could you tell me about the name of the typeface you have used in this?
@mariamgabodze3076
@mariamgabodze3076 Жыл бұрын
Love your videos
@viniciusserafim3888
@viniciusserafim3888 2 жыл бұрын
I cant belive that i am getting this for free, thanks bro
@kaziratul
@kaziratul 3 жыл бұрын
How did you created that master component you've shown in the end ?
@MsDhruv07
@MsDhruv07 3 жыл бұрын
THanks alot.. it was very informative video
@emmahawking922
@emmahawking922 9 ай бұрын
This is the beeeest
@mahindersharma2521
@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.?
@jaelene17
@jaelene17 3 жыл бұрын
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
@bharathsalla3971
@bharathsalla3971 2 жыл бұрын
The one in the authorial atomic dedign system can be find in your purchase module . Especially atomic design system
@andradlegacy6862
@andradlegacy6862 Жыл бұрын
God bless you 🙌
@raqibabdullah775
@raqibabdullah775 3 жыл бұрын
PRICELESS content!!!!! Respect!!!! 🎉✨🎉👏👍✔👌
@Mizko
@Mizko 3 жыл бұрын
Appreciate it MD!
@AdityaMehtaMusic
@AdityaMehtaMusic 3 жыл бұрын
It's Mizko watching day today!▶️
@Mizko
@Mizko 3 жыл бұрын
Thank you Aditya!
@braids1272
@braids1272 2 ай бұрын
Thank you for this!! By the way what font are you using in the slides? It's beautiful
@valentinobaptista
@valentinobaptista Жыл бұрын
Coor stuff Mizko, would you agree that your molecules are more towards design tokens other than atoms? Brad himself recognizes a button as an atom, if I'm not mistaken. Those specs you design in the atoms category I commonly identify them as IONS (new level at the atomic methodology). Keep it up! Great job
@oliviabakerr6418
@oliviabakerr6418 2 жыл бұрын
please can you explain or make a video on how you created the master components that can hide and unhide elements?
@Underhills
@Underhills 3 жыл бұрын
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.
@doAnn88
@doAnn88 2 жыл бұрын
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!
@SahithNayudu
@SahithNayudu 3 жыл бұрын
Amazing🔥 Love from india 🇮🇳
@Mizko
@Mizko 3 жыл бұрын
Thank you Sihith!
@jovannibasilisco6414
@jovannibasilisco6414 5 ай бұрын
11:33 How did you do that? Enabling and disabling sidebar options on the right
@Stoobers
@Stoobers 3 жыл бұрын
That is immense... !
@Mizko
@Mizko 3 жыл бұрын
Thank you!
@amina___6443
@amina___6443 3 жыл бұрын
This was so helpful!!
@Mizko
@Mizko 3 жыл бұрын
Thanks Jane :)
@amina___6443
@amina___6443 3 жыл бұрын
@@Mizko No, thank you! :D
@nativoluis
@nativoluis 2 жыл бұрын
Hi, a row from a table be a molecule or organism?
@neginmatin1819
@neginmatin1819 Жыл бұрын
Thank you for your videos. Is there any discount for your master course?
@KaidyCamille
@KaidyCamille 2 жыл бұрын
My design system is 😒shite. These awesome tips are sure to turn that around. Definitely thinking of doing a before and after. Thanks Mizko!
@dominikorlowski566
@dominikorlowski566 Жыл бұрын
Hi Mizko. Any plans to create this awesomeeffinness considering new features released Config 2023?
@SamuelPeiffer
@SamuelPeiffer Жыл бұрын
What presentation tool are you using ? Your slides are the bomb!
@SayJee
@SayJee 2 жыл бұрын
Please make a video about making a simple page using that design system that you made.
@iSendal
@iSendal 2 жыл бұрын
Yes I will click the like button and subscribe this channel, because your presentation is awsome
@Mizko
@Mizko 2 жыл бұрын
Haha thank you!
@ridafakih8709
@ridafakih8709 2 жыл бұрын
MIzko! Love this channel! Curious what you used to create the presentation? Would love to use it for pitchdecks myself!
@Mizko
@Mizko 2 жыл бұрын
Thank you Rida! Created in Figma :)
@TylerHoff
@TylerHoff Жыл бұрын
Awesome content. Thank You!🙏👍 Where is the coupon code? I'm not seeing it?
@ExplorePahadiLifestyle
@ExplorePahadiLifestyle 4 ай бұрын
nice
@aswinm5088
@aswinm5088 11 ай бұрын
Do we need to add search bar in design system??? I will have only one type of search bar right..
@ajaydileep4325
@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?
Your First Design System in Figma (Beginner Tutorial)
14:57
Tim Gabe
Рет қаралды 83 М.
A little girl was shy at her first ballet lesson #shorts
00:35
Fabiosa Animated
Рет қаралды 15 МЛН
WORLD'S SHORTEST WOMAN
00:58
Stokes Twins
Рет қаралды 100 МЛН
Опасность фирменной зарядки Apple
00:57
SuperCrastan
Рет қаралды 11 МЛН
DAD LEFT HIS OLD SOCKS ON THE COUCH…😱😂
00:24
JULI_PROETO
Рет қаралды 17 МЛН
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 769 М.
What is a Design System? 6 Different Types of Design Systems
12:33
Amateur vs Pro UI Design | with examples
20:46
Jesse Showalter
Рет қаралды 63 М.
Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)
30:30
DesignWithArash
Рет қаралды 289 М.
Relume's mind-blowing AI Site Builder: Crash Course
20:58
Flux Academy
Рет қаралды 188 М.
Gosta de 🌟 e 🍿?
0:19
F L U S C O M A N I A
Рет қаралды 11 МЛН
Забота Казахов🇰🇿
0:45
QAZAQ PEOPLE
Рет қаралды 236 М.
Rajesh ka flying dance 😂
0:11
Rajesh Kumar Shorts 14
Рет қаралды 23 МЛН
Don´t WASTE FOOD pt.3
0:20
LosWagners ENG
Рет қаралды 20 МЛН
Bro didn’t make it 😬😟💀 (FAKE NOT REAL) #shorts
0:19
Nate Nahhh
Рет қаралды 11 МЛН
The poor girl couldn't take care of the cat 😢😔
0:38
Ben Meryem
Рет қаралды 5 МЛН