Figma Variables - 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! NEW - Purchase our official design system: https://collectivekit.co/ UI Collective Academy + Community: https://uicollective.co/ Make sure to like, comment, and subscribe for more insights on building effective design systems! Episode 3: https://youtu.be/gyzAQEoJr-c Save 15% on the Central Icon System with code COLLECTIVEICONISTS Downloads & Links Part 1: https://www.youtube.com/watch?v=HNJmWKndUA4&t=1873s Central Icon System: https://iconists.co/central?aff=bdzGd Token organization map: https://resources.uicollective.co/buy/9b718a87-35eb-48bb-b53f-4c23d0a03ec5 We build and code design systems: https://designsystemlabs.co/ Book an audit of your design system: https://designsystemlabs.co/ All resources: https://uicollective.co/designer-tools-and-resources Buy me a coffee: https://buymeacoffee.com/uicollective 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