Applying Light and Dark Mode in the Shadcn/Studio Figma UI Kit 🌓
In this video, you'll learn how to switch between Light and Dark mode inside the Shadcn/Studio Figma UI Kit using Figma Variables.
Every component, style, and variable in the kit is built with Light and Dark mode support out of the box, allowing you to preview and manage themes without manually updating components.
Perfect for designers and developers building modern themeable UI systems with Figma and shadcn/ui.
📌 Steps covered in this tutorial:
1️⃣ Select a frame or page on the canvas
2️⃣ In the right sidebar, find the Mode variable collection
3️⃣ Click the mode dropdown and select:
• Light
• Dark
💡 Tip:
Selecting an entire page applies the mode across everything on that page.
Selecting an individual frame allows you to preview both Light and Dark modes side by side inside the same file.
Perfect for teams working with Figma, design systems, Tailwind CSS, shadcn/ui, React, and scalable UI workflows.
👍 Found this helpful? Like 👍, subscribe 🔔 for more Figma and UI/UX tutorials, and share 📤 with your design or dev team.
#shadcnstudio #figmatutorial #darkmode #designsystem #figmavariables #uiux #webdesign #tailwindcss #figmacommunity