Create a Figma Design System - Fundamentals (Part 1)

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 235

  • @Mizko
    @Mizko  3 года назад +13

    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 Год назад +2

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

    • @scentexplorer
      @scentexplorer 2 месяца назад

      Unable to download 2.7 version of your Design System. The link is broken on your website

  • @prizigner
    @prizigner 3 года назад +18

    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 года назад +3

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

  • @toinggg754
    @toinggg754 3 года назад +2

    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 года назад

      💜

  • @matheuscardoso1740
    @matheuscardoso1740 3 года назад +2

    already loving this series since the first episode

    • @Mizko
      @Mizko  3 года назад

      Awesome! Great to hear Matheus!!

  • @fernwehtwl
    @fernwehtwl Год назад +1

    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.

  • @quyenqnguyen
    @quyenqnguyen 3 года назад +2

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

    • @Mizko
      @Mizko  3 года назад

      🙌

  • @StrikeFirstFinance
    @StrikeFirstFinance 3 года назад +22

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

    • @isaias6348
      @isaias6348 3 года назад

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

  • @ezyderaaf
    @ezyderaaf 3 года назад +14

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

    • @Mizko
      @Mizko  3 года назад

      🙏🏼

  • @iSendal
    @iSendal 3 года назад +1

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

    • @Mizko
      @Mizko  3 года назад

      Haha thank you!

  • @TemaOvchinnikov
    @TemaOvchinnikov 2 месяца назад

    Elements -> component (typography/spacing->Spacing System + color/contrast+ icon consistency + hierarchy + images) -> grid system -> design systems -> template)))

  • @videoessaysbyhoutsengkea
    @videoessaysbyhoutsengkea Год назад

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

  • @theclovergent2143
    @theclovergent2143 3 года назад +1

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

    • @Mizko
      @Mizko  3 года назад +1

      🔥🔥🔥

  • @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! 🙏🏼

  • @Rifat_J
    @Rifat_J 12 дней назад

    You have shown me a path Thanks, man.

  • @twit2fitt
    @twit2fitt 3 месяца назад

    Great video, Mizko.

  • @Elysa1224
    @Elysa1224 Год назад +2

    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
    @jatinraj4974 3 года назад +3

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

    • @Mizko
      @Mizko  3 года назад +1

      Awesome! Really happy to hear Jatin 🔥

  • @bharathsalla3971
    @bharathsalla3971 2 года назад

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

  • @ohitakeitback7602
    @ohitakeitback7602 2 года назад +1

    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

  • @r_Abdullah99
    @r_Abdullah99 3 года назад +2

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

    • @Mizko
      @Mizko  3 года назад +1

      Appreciate it MD!

  • @jealousstove
    @jealousstove 11 месяцев назад

    Fantastic video. Appreciate your stuff!

  • @daniel_rad
    @daniel_rad 3 года назад +1

    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.

  • @naknaknak17
    @naknaknak17 3 месяца назад

    Interestingly, I just smashed the like button!

  • @farshadamirshoghi9323
    @farshadamirshoghi9323 Год назад

    Thank you Mizko, I love it

  • @jovannibasilisco6414
    @jovannibasilisco6414 11 месяцев назад +1

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

  • @user-lp7rm1cg1l
    @user-lp7rm1cg1l 3 года назад +2

    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

  • @SamuelPeiffer
    @SamuelPeiffer 2 года назад

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

  • @Bowsers_Trousers
    @Bowsers_Trousers 3 года назад +2

    This is great! Looking forward to the rest of this series!

    • @Mizko
      @Mizko  3 года назад

      Thank you Chris!!

  • @MrConway007
    @MrConway007 3 года назад +7

    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
    @oliviabakerr6418 2 года назад +1

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

  • @lorrieuiux5802
    @lorrieuiux5802 3 года назад +1

    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!

  • @SahithNayudu
    @SahithNayudu 3 года назад +1

    Amazing🔥 Love from india 🇮🇳

    • @Mizko
      @Mizko  3 года назад +1

      Thank you Sihith!

  • @hidabe4490
    @hidabe4490 2 года назад

    Great video @Mizko and I learned a good deal from you here. Thank you!

  • @paularosler949
    @paularosler949 2 года назад +1

    Great series, complex, short and professional intro. Thanks a lot!

  • @UserfeedbackbyTea
    @UserfeedbackbyTea 2 года назад

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

  • @jlos1361
    @jlos1361 3 года назад

    love that science way of presentation!

  • @solo-riffs
    @solo-riffs 3 года назад +2

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

  • @smaddin7899
    @smaddin7899 Год назад

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

  • @Notozec0nd0m
    @Notozec0nd0m 3 года назад +1

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

    • @Mizko
      @Mizko  3 года назад

      Really happy you found value

  • @cardozzzo
    @cardozzzo Год назад +1

    Great class, bro! I'll love to see the entire course, you're a awesome teacher.

  • @laura_vilela
    @laura_vilela Год назад

    The master component was really cool, new to me! I'll give that a go in the system I'm working on 😊

  • @ratchetptnr
    @ratchetptnr 3 года назад +1

    Just the video I needed.

    • @Mizko
      @Mizko  3 года назад

      🔥

  • @spacebardesignsteam3354
    @spacebardesignsteam3354 3 года назад

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

  • @sabrinah3183
    @sabrinah3183 3 года назад +1

    Your explanations are amazing! So clear! Thank you!

    • @Mizko
      @Mizko  3 года назад

      Thank you Sabrina!!

  • @mohamedi6656
    @mohamedi6656 Год назад

    Exactly what I was looking for ! Thank you so much for your quality conent :)

  • @adilbek.ermekov
    @adilbek.ermekov 2 года назад

    Just what i needed

  • @michellezhu1559
    @michellezhu1559 3 года назад +10

    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?

  • @irinalinuza8341
    @irinalinuza8341 2 года назад

    you made really helpful video, thank you for your work!

  • @dominikorlowski566
    @dominikorlowski566 Год назад

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

  • @rymfouzari9768
    @rymfouzari9768 2 года назад

    Awesome video, thank you !

  • @anabirdart
    @anabirdart Год назад

    Thank you! That is a wonderful way to explain everything; pretty clear and engaging😊

  • @LemonDust13
    @LemonDust13 3 года назад +1

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

    • @Mizko
      @Mizko  3 года назад +1

      Haha thank you 💜

  • @AdityaMehtaMusic
    @AdityaMehtaMusic 3 года назад +1

    It's Mizko watching day today!▶️

    • @Mizko
      @Mizko  3 года назад

      Thank you Aditya!

  • @braids1272
    @braids1272 8 месяцев назад

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

  • @Tico-8
    @Tico-8 2 года назад

    Thank you for this awesome video

  • @jenna___6443
    @jenna___6443 3 года назад +1

    This was so helpful!!

    • @Mizko
      @Mizko  3 года назад

      Thanks Jane :)

    • @jenna___6443
      @jenna___6443 3 года назад

      @@Mizko No, thank you! :D

  • @aidadaist
    @aidadaist 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!

  • @neginmatin1819
    @neginmatin1819 Год назад

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

  • @zindex5
    @zindex5 3 года назад +2

    @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!

  • @aviator62
    @aviator62 9 месяцев назад

    I guess I had to hit that like button

  • @virginiadabin2229
    @virginiadabin2229 3 года назад +2

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

    • @Mizko
      @Mizko  3 года назад +1

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

  • @Stoobers
    @Stoobers 3 года назад +1

    That is immense... !

    • @Mizko
      @Mizko  3 года назад +1

      Thank you!

  • @alexnguyen2023
    @alexnguyen2023 2 года назад

    Super cool videos and well explained! Thank You!

  • @tonipareja
    @tonipareja 3 года назад +1

    Great video! You explained it very well 😊

    • @Mizko
      @Mizko  3 года назад +1

      Thanks Toni :)

  • @smaddin7899
    @smaddin7899 2 года назад

    Well done & thanks a lot for your explanations :)

  • @SayJee
    @SayJee 2 года назад

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

  • @sowjanyapolkampet4446
    @sowjanyapolkampet4446 Год назад

    Thank you 🙂🙏

  • @ovidiu283
    @ovidiu283 2 года назад

    Is there also a mobile version for all the components?

  • @fuhg.3707
    @fuhg.3707 Год назад

    great job buddy

  • @fernandomunoz8346
    @fernandomunoz8346 2 года назад +1

    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!

  • @TylerHoff
    @TylerHoff Год назад

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

  • @stacilapis1833
    @stacilapis1833 Год назад

    Thank you so much!

  • @MsDhruv07
    @MsDhruv07 3 года назад

    THanks alot.. it was very informative video

  • @PeterSierra
    @PeterSierra 2 года назад +1

    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?

  • @bensontyson5295
    @bensontyson5295 2 года назад

    Thanks MK

  • @nativoluis
    @nativoluis 2 года назад

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

  • @mochillabeats4604
    @mochillabeats4604 2 года назад

    Very Nice! Thx!

  • @viniciusserafim3888
    @viniciusserafim3888 2 года назад

    I cant belive that i am getting this for free, thanks bro

  • @vagarysoulkothari1694
    @vagarysoulkothari1694 3 года назад +1

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

    • @Mizko
      @Mizko  3 года назад +1

      👏🏼

  • @rehansheikh3859
    @rehansheikh3859 3 года назад +2

    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?

  • @eusoufefranco
    @eusoufefranco 2 года назад

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

  • @andradlegacy6862
    @andradlegacy6862 Год назад

    God bless you 🙌

  • @mikelondon1970
    @mikelondon1970 3 месяца назад

    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.

  • @yellowblueua
    @yellowblueua 3 года назад

    9:31 - Boom! Cloudy button!
    Ahah, so funny))

  • @joshbowden983
    @joshbowden983 2 года назад

    How are you color styles in their own categories?

  • @NatureFreak1127
    @NatureFreak1127 3 года назад +1

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

  • @AznAshleeeey
    @AznAshleeeey 3 года назад +2

    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
      @Mizko  3 года назад +1

      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

  • @ShomudroGupto
    @ShomudroGupto 3 года назад +5

    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.

  • @Sebastian-zs8cp
    @Sebastian-zs8cp 3 года назад +1

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

    • @Mizko
      @Mizko  3 года назад

      Yes!

  • @ridafakih8709
    @ridafakih8709 3 года назад +1

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

    • @Mizko
      @Mizko  3 года назад

      Thank you Rida! Created in Figma :)

  • @mariamgabodze3076
    @mariamgabodze3076 2 года назад

    Love your videos

  • @ritchiealtamirano6851
    @ritchiealtamirano6851 2 года назад +1

    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?

  • @yamparalarahul
    @yamparalarahul 3 года назад +1

    what did you use to create the presentation?

    • @Mizko
      @Mizko  3 года назад

      Figma!

  • @daviddoresfonseca
    @daviddoresfonseca 2 года назад

    Amazing!!

  • @AnnaAnnaOneTwo
    @AnnaAnnaOneTwo Год назад

    Hey, is there a discount code available?

  • @kaziratul
    @kaziratul 3 года назад +1

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

  • @doAnn88
    @doAnn88 3 года назад

    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!

  • @Underhills
    @Underhills 3 года назад

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

  • @jaelene17
    @jaelene17 3 года назад +1

    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

  • @aswinm5088
    @aswinm5088 Год назад

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