Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Figma Dark Mode Setup: The Ultimate Guide
Play lesson

Design Systems - Figma Dark Mode Setup: The Ultimate Guide

5.0 (2)
28 learners

What you'll learn

This course includes

  • 28.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere