Build a Design System! Ep. 2: Basic Form Components

[@EverDaleTop]

This is exactly the tutorial i needed to get a good grip on a start in figma and ui/ux design. Didn't know people created design systems before this and i love that it is so up to date. I'm really excited to see what the future episodes are gonna be about. Keep up the good work!

[@UICollectiveDesign]

Thank you!! Please share this on social media where you can :)

[@NaveenTR-s6e]

I appreciate the tutorial. I have seen a lot of videos to learn how to develop design systems, but none of them were quite as good as yours. I appreciate all of your hard work.

[@UICollectiveDesign]

Thank you! Please share this video on social media where you can :)

[@InspireUpliftVibes1]

Thanks for the warm welcome to Episode 2! The insights into building basic form components are incredibly helpful. It's great to learn how to maintain consistency and usability in design systems, whether you're a designer or developer. Looking forward to applying these principles!

[@UICollectiveDesign]

Thanks for the kind words!! Part 3 will include more complex form components :) Please share this vid where you can!

[@InspireUpliftVibes1]

@@UICollectiveDesign I'm looking forward to Part 3 and diving into those more complex form components. I'll definitely share the video keep up the great work! 😊

[@meetpatel324]

We want part 3 now where you start building screens with this design system and show more grids and responsive part

[@UICollectiveDesign]

Part 3 is being released this week!

[@meetpatel324]

@@UICollectiveDesign nice🙌

[@boucif-bm]

Thank you for this 🔥🔥

[@UICollectiveDesign]

No problem! Please share this video on your LinkedIn if you can :)

[@lorentracy006]

These are really great videos. Thanks for all of this work. Dare you to release all these in 4k!

[@UICollectiveDesign]

Thanks!! Please share them on LinkedIn :) 4K is on it's way!!

[@thjeen_tuwf]

Thanks for your tutorials. It's very helpfull but I have a question for button icon. I changed another icon by instance but a color didn't change to white, it's still black.

[@stanmx]

Yesterday I was close to write in you to know when will come this second episode. Thank you uploaded.

[@UICollectiveDesign]

Awesome! More on the way in a couple weeks :)

[@endlessparadox6940]

Thank you so much for the tutorials❤️

[@UICollectiveDesign]

Glad to help! Please subscribe and share this video series where you can :)

[@diclesunguroglu842]

Can you also show us how to create variable library and adapt it to every other use cases?

[@UICollectiveDesign]

That is in Part 1!

[@HarishSharma-v1o]

Thanks for sharing these wonderful series. I was in a doubt how we actually create such a massive design system but now I can feel it is not that tough. You made me understand very well. Thanks and keep posting such a valuable videos.

[@UICollectiveDesign]

Glad to help! Please share this video on your social media where you can!

[@TGWatkins-m2y]

Great video! Question, why wouldn't you combine both button sets so a designer could toggle icon only and it switch to the icon button set, rather than it being two separate components? Additionally, if you needed additional sizes based on device, for example, desktop and tablet (where tablet is customer facing (senior citizens) and therefore the buttons need to be much larger for visual impaired) ... would those be variants or would you create a mode at the responsive collection level? OR would this be one of those edge cases to build modes at the component level for those components that would resize larger for "kiosk" specific instances. This is very specific but curious how'd you'd approach?

[@UICollectiveDesign]

Wow another great question. Love the dialogue. You could also combine these button sets but then a designer who needs a button icon has to pull in a button and then switch to an icon instead of just the button icon directly. Just a different approach but both work. So for different sizes you could add size variants or leverage padding and gap spacing variables to make them response based on different modes. Personally, I think size variants are much cleaner.

[@JeremyGordon-v7g]

Thanks for sharing, these are great! For some reason I don't have the option to reorder my component properties on the right side of the screen. Weird

[@UICollectiveDesign]

Glad you like them! Please share where you can :) & really? Even when you click the outside box of the components?

[@nurseryrhymehits9666]

Awesome dude! I want more!!!!! How many episodes left?

[@UICollectiveDesign]

Probably about 6!

[@baguetteDuGame]

Would be interesting to hear your thoughts on Atomic design. I'm currently creating a design system that is being identically copied into flutter for easier implementation using Atomic Design. Figma has some limitations but i can workaround.

[@UICollectiveDesign]

When you say atomic are you talking about Brad Frosts design system theory or a library called atomic?

[@baguetteDuGame]

@@UICollectiveDesign yes, Brad frost theory

[@UICollectiveDesign]

@@baguetteDuGame We use the principles of atomic for the design system. However, it’s 13 years old and a lot has evolved in the design system world since then. As such the vernacular has changed to tokens, components, modules etc...

[@pariaagharabi1441]

I really enjoyed your videos on UI/UX design! I have already signed up on your website, but I couldn’t find any courses from scratch for beginners in the UX/UI field. Could you please let me know where I can access the complete course, including tutorials on Figma? I would love to learn more. Tnx!

[@UICollectiveDesign]

Answered your recent comment in the other video! Sorry I missed this one

[@snorose3458]

So interesting to see how you map the colors. Would be awesome if you also could touch upon scenarions like, maybe there just isnt one dark shade of icons, maybe there's different type of body colors, maybe based on the background i use different type of colors of tag etc, yeah you get the point!

[@UICollectiveDesign]

Absolutely! A lot of these will be covered in future episodes. During Part 1, I purposely left some variables out so I can show how the design system will evolve over time.

[@snorose3458]

@@UICollectiveDesign amazing!

[@UICollectiveDesign]

@@snorose3458 Also please share this series where you can :)

[@GraveRave]

I you made a course with how to tackle a design brief and web design process I would purchase. Well done!

[@UICollectiveDesign]

I can put it in the works!

[@GraveRave]

@@UICollectiveDesign 🙌🏾

[@gshorts3888]

Thank you for amazing tutorial

[@UICollectiveDesign]

Glad you like it! Please share where you can :)

[@Underhills]

Its impossible to make a swap instance if the icon used isn't from a DS that has an icon library. When I select my component icon from a component I made myself (not a DS component) there's no option top right in Figma UI3 to actually set a swap instance. The function is simply not there in that section. Not in the context menu. I've seen UI3 demos on this and I don't get it. I don't see where the icons they are using lives, the demos just shows the process of making a swap icon instance. I'm following it to a tee but the option is simply not there. Is this impossible if the icon doesn't come from a library? I'm connected to a DS icon library so I believed I should be able to swap the icon with icons available in that library by creating a swap instance.

[@UICollectiveDesign]

You need to be swapping with an icon from a published library if I am understanding correctly

[@Underhills]

@@UICollectiveDesign Yeah, the icons I'm trying to swap to are published in a separate icon library administrated by the DS. The icon I have myself on my page in my component is not. That's just an icon I made.

[@abhishekkandulna3202]

Hi, i am unable to find Instant swap in new figma UI, Please help

[@UICollectiveDesign]

Sorry I use the old UI still

[@abhishekkandulna3202]

@@UICollectiveDesign No issue, I Got it, it was at a different section.

[@ytRap007]

where i can dl this file?

[@UICollectiveDesign]

Not available for download