Build A Design System | Ep.3 Advanced Form Figma Components

Welcome to Episode 3 of our design system series! In this episode, we're taking a deep dive into advanced form components. Whether you're a designer or developer, mastering the creation and implementation of these components is essential for ensuring consistency and usability across your projects.

We'll walk you through the best practices for designing flexible and adaptable form components, all while staying aligned with your design system principles and leveraging the design tokens we established in the previous episode. If you missed it, be sure to catch Episode 1 for an introduction to setting up your design tokens and Figma variables, and Episode 2 where we build basic form fomponentary!

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

Ask UI Collective a question: https://uicollective.co/

Downloads & Links
Part 1:    • Build a Design System! Ep. 1: Figma T...  
Part 2:    • Build a Design System! Ep. 2: Basic F...  
Central Icon System: https://iconists.co/central?aff=bdzGd
Token organization map: https://resources.uicollective.co/buy...

WE BUILD AND CODE DESIGN SYSTEMS. EMAIL [email protected]
All resources: https://uicollective.co/designer-tool...
Buy me a coffee: https://buymeacoffee.com/uicollective

Chapters
0:00 An Introduction
0:38 Build the Radio Button Component
2:34 Add Status variants to the radio button
5:52 Add State variants to the radio button
8:21 Build the Radio Button Label component
11:16 Build a Switch Component
13:07 Add Status variants to the Switch component
15:55 Add State variants to the Switch component
18:25 Build the Switch-Label Component
20:34 Build a Text Area Component
22:54 Customizing the Text Area Component
28:15 Preparing to Build our Defined Field Component - Pre Tab Build
33:14 Preparing to Build our Defined Field Component - Post Tab Build
35:08 Building our Defined Field Component
39:56 Modifying our Defined Field
43:29 Adding Status variants to our Defined Field Component
50:51 Adding State variants to our Defined Field
55:41 Building a Defined Input Component
56:57 Building a Date Picker Item
57:50 Adding Status variants to our Date Picker Item
1:00:43 Adding State variants to our Date Picker Item
1:03:49 Building the Calendar Component
1:09:44 Building the Date Picker Component
1:113:04 Building an Autocomplete Component
1:16:32 Building a Form Component

#uidesign
#uxdesign
#figma