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

Welcome to Episode 2 of our series on building a design system! In this video, we dive into the essential building blocks of any effective design system: basic form components. Whether you're a designer or a developer, understanding how to create and implement these components is crucial for maintaining consistency and usability across your projects.

Join us as we break down the best practices for designing versatile form components and building a figma design system that can easily adapt to different contexts, all while adhering to the principles of a cohesive design system and using the design tokens we set up in the last episode. Don't forget to check out Episode 1 for a foundational understanding of setting up your design tokens & figma variables!

Make sure to like, comment, and subscribe for more insights on building effective design systems!

Save 15% on the Central Icon System with code COLLECTIVEICONISTS

Downloads & Links

0:00 An Introduction
0:37 Build a Label Component
7:45 Build a Field Component
22:38 Build an Input Component
24:55 Build a Button Component
38:13 Build a Button Icon Component
46:21 Build a Menu Component
1:06:41 Build a Dropdown Component
1:10:06 Build a Checkbox Component

#uidesign
#uxdesign
#figma

[NaveenTR-se]

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.

[anton_youtube_]

Thanks more for the course, I couldn't figure out how to work with color and options for a long time, your course helped a lot, the best one I found on youtube!!!

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

[InspireUpliftVibes]

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!

[meetpatel]

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

[lorentracy]

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

[stanmx]

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

[HarishSharma-vo]

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.

[diclesunguroglu]

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

[claracursi]

These videos are just so helpful, thanks a million to share you knowledge! I just have a question, but probably it is because I'm a totally newbie at this, when I change the icon inside the field or button with the property I create, the color also change and doesn't stick with the default I set. Any clue on what I could be doing wrong? Thanks anyway!

[TGWatkins-my]

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?

[snorose]

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!

[ST-flfy]

Why do you place that little downward arrow by the icon name the right rail? Thanks for going through this

[nurseryrhymehits]

Awesome dude! I want How many episodes left?

[sachahurley]

Thanks for making this video series. I reached the part where you are making the Checkbox-label component and I noticed a discreptancy between what I was doing and your example. When you combined the checkbox and label into one component the bounding box on your component cuts the border of the checkbox off. Is this the expected behaviour or is Auto-Layout supposed to have "Strokes: Included" ?

[JeremyGordon-vg]

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

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

[GraveRave]

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

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

[pariaagharabi]

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!