John RodriguesAI Design Engineer | Designing 0→1 AI native Products

Complete Figma Course: Dark mode and Light Mode

4 Jul 2025 · 1 min

Watch on YouTube

0:34

Instructor John Rodrigues introduces a Figma tutorial lesson on implementing light and dark modes. He outlines that the lesson will cover creating mode-based color tokens, applying spacing variables to make cards responsive, and changing sizes based on mode.

Chapters

All right, welcome to another lesson. This one is going to be super exciting. 1. We're gonna learn about different modes. So we're gonna learn about light mode, dark mode. See? It's like magic. And then we're gonna apply those spacing variables to change the size of the card as well, which make it, like, responsive. And size change based on the mode, which is pretty awesome. So we're gonna start with this one. We're gonna learn how to take our color tokens and change them based on the modes, and it's going to be pretty fun. I'll see you in another lesson.