Summary
Keywords
Full Transcript
Dark mode isn't just a trend—it’s an essential feature for modern design systems. In this ultimate guide, we’ll break down how to create a scalable dark mode in Figma using design tokens and Figma variables. Whether you're a UI/UX designer, working at a startup, or scaling a Silicon Valley-level design system, this guide has you covered! LINKS: UI Collective Academy: https://uicollective.co/ NEW - Our Official Design System: https://collectivekit.co/ My UI Collective profile: https://uicollective.co/portfolio/kirkmcneill All Resources: https://uicollective.co/designer-tools-and-resources Work with me on your design system: https://designsystemlabs.co/ Build a Design System Episode 1: https://youtu.be/HNJmWKndUA4 0:00 An Introduction 0:15 Laying the Foundation 4:48 Identifying the Dark Mode Variable 8:24 Real World Example 14:49 Testing Dark Mode 19:16 Variables That Cannot Change 20:44 Dealing with Conflicting Figma Variables & Design Tokens 22:25 Component Specific Example #UXDesign #UIDesign #ProductDesign #Figma #DesignSystem
