Learn Design Systems: Figma Variables, Components, AI, and More
UI Collective
A newer version of UI Collective’s design system course, with the same structure: tokens first, then components. This one explains more of the reasoning behind the token setup and adds focus states and AI tools (Claude and Figma’s agents) to the workflow. You should already know your way around Figma.
What you'll learn
- The difference between design tokens and Figma variables
- Assigning color roles in alias and semantic collections
- Surface, border, text and icon tokens with a dark mode
- Using AI tools to help build styles and components
- Designing focus states for buttons and form fields
- Building inputs, menus, checkboxes, switches and badges
