Loading video...

Video Failed to Load

Go Home

Hey 👋 designers, Here’s a quick tutorial on how to create light and dark mode designs in Figma using the color variable system. Retweet and Share with your fellow designers.

Tegadesigns's profile picture

UxUi.Tega

12,791 subscribers

12,043 views • 1 year ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Comments

UxUi.Tega's profile picture
UxUi.Tega1 year ago

Drop your questions in the comments, maybe I can do a part 2 for it. ⬇️⬇️

BeingAmarachi | Framer Developer's profile picture
BeingAmarachi | Framer Developer1 year ago

Very helpfulllllllllll💜

UxUi.Tega's profile picture
UxUi.Tega1 year ago

Glad it was

PB🌺 product design 💻's profile picture
PB🌺 product design 💻1 year ago

But this feature last I checked is only available to paid figma

UxUi.Tega's profile picture
UxUi.Tega1 year ago

Available on student Figma too

ODIANOSEN's profile picture
ODIANOSEN1 year ago

@UI_UXNonye

Digitalbimpe's profile picture
Digitalbimpe1 year ago

What’s your YouTube handle ???

Ginny - Designer | Framer Enthusiast's profile picture
Ginny - Designer | Framer Enthusiast1 year ago

Thank youuuuuuuu 🥹

UxUi.Tega's profile picture
UxUi.Tega1 year ago

You’re welcome

Boluwatife David's profile picture
Boluwatife David1 year ago

Can't style guide do this same thing ?

UxUi.Tega's profile picture
UxUi.Tega1 year ago

No , you can’t create color modes using color style

Related Videos

This is how a top designer designs for light and dark mode in Figma The way he is using tokens, variables in Figma is insane 🤯 Loren Baxter shows how he designed light and dark modes for Felt in Figma 👇
2:12

This is how a top designer designs for light and dark mode in Figma The way he is using tokens, variables in Figma is insane 🤯 Loren Baxter shows how he designed light and dark modes for Felt in Figma 👇

Jayneil Dalal

75,835 views • 1 year ago

If You're A UI UX Designer, I Just released a video demonstrating how to set up Dark Mode for your designs using Color Variables in Figma And CSS Watch Video Here :
0:43

If You're A UI UX Designer, I Just released a video demonstrating how to set up Dark Mode for your designs using Color Variables in Figma And CSS Watch Video Here :

Joseph Brendan

27,056 views • 1 year ago

Another quick Figma tutorial to create this animation using variable and conditions 🥤. Small video to create this included. And get the code cheatsheet shared below. ✨
2:38

Another quick Figma tutorial to create this animation using variable and conditions 🥤. Small video to create this included. And get the code cheatsheet shared below. ✨

vijay verma

139,422 views • 2 years ago

UI/UX Designers, did you know you can get real-time UX/UI feedback on your designs and gather valuable insights directly in Figma? Spec AI is a Figma plugin that allows you to get real-time UX/UI feedback, helping you refine your designs and create user-centred experiences directly within Figma with just one click. Repost to share with others 💜
0:33

UI/UX Designers, did you know you can get real-time UX/UI feedback on your designs and gather valuable insights directly in Figma? Spec AI is a Figma plugin that allows you to get real-time UX/UI feedback, helping you refine your designs and create user-centred experiences directly within Figma with just one click. Repost to share with others 💜

Abraham John 🦄🦓

56,500 views • 1 year ago

UI/UX Designers, did you know you can get real-time UX/UI feedback on your designs and gather valuable insights directly in Figma? Spec AI is a Figma plugin that allows you to get real-time UX/UI feedback, helping you refine your designs and create user-centred experiences directly within Figma with just one click. Repost to share with others 💜
0:33

UI/UX Designers, did you know you can get real-time UX/UI feedback on your designs and gather valuable insights directly in Figma? Spec AI is a Figma plugin that allows you to get real-time UX/UI feedback, helping you refine your designs and create user-centred experiences directly within Figma with just one click. Repost to share with others 💜

Abraham John 🦄🦓

28,726 views • 1 year ago

Designers, stop manually prototyping your Figma designs, instead turn your design into realistic prototypes with Figma Make. Here’s my step-by-step process: prepare your Figma design, select the screens and send it to Figma Make, enter a prompt to generate a prototype using the reference design, and in seconds you’ll get a realistic UI prototype that stays true to your original design. Bookmark it for later 💜
0:24

Designers, stop manually prototyping your Figma designs, instead turn your design into realistic prototypes with Figma Make. Here’s my step-by-step process: prepare your Figma design, select the screens and send it to Figma Make, enter a prompt to generate a prototype using the reference design, and in seconds you’ll get a realistic UI prototype that stays true to your original design. Bookmark it for later 💜

Abraham John 🦄🦓

29,851 views • 4 months ago

Switch designs from light to dark mode in Figma, supafast! ⚡️
0:39

Switch designs from light to dark mode in Figma, supafast! ⚡️

Zander Whitehurst

235,830 views • 3 years ago

Check Designs: Keep every file synced to your design system with → Variable & style suggestions → Color contrast suggestions → Library mismatch detection → Detached component detection
0:57

Check Designs: Keep every file synced to your design system with → Variable & style suggestions → Color contrast suggestions → Library mismatch detection → Detached component detection

Figma

93,047 views • 26 days ago

This is how a top designer uses Figma variable modes to manage a design system for 50+ sports brands Designers should copy this workflow to scale their Figma design systems 👀 Watch the full video on Sneak Peek: Cornelius Hegeman shows how the Jump design team built a Figma design system to manage 50+ brands 👇
3:22

This is how a top designer uses Figma variable modes to manage a design system for 50+ sports brands Designers should copy this workflow to scale their Figma design systems 👀 Watch the full video on Sneak Peek: Cornelius Hegeman shows how the Jump design team built a Figma design system to manage 50+ brands 👇

Jayneil Dalal

29,057 views • 4 months ago

AI will not replace designers? Right? Screenshots to editable Figma Designs
0:30

AI will not replace designers? Right? Screenshots to editable Figma Designs

dudu

335,036 views • 1 year ago

⚠️Designers⚠️ Here’s a quick and easy way to make professional looking lighting in Photoshop
0:28

⚠️Designers⚠️ Here’s a quick and easy way to make professional looking lighting in Photoshop

Spencer Hogan

22,751 views • 14 days ago

A quick tutorial on using the Figma MCP server with Windsurf!
3:03

A quick tutorial on using the Figma MCP server with Windsurf!

Windsurf is now Devin Desktop

113,296 views • 1 year ago

This is how the Figma design team does silent design critiques in Figma Why silent? To give introvert designers a chance to share their ideas! Tammy Taabassum shows how to do a silent design crit in Figma 👇
2:01

This is how the Figma design team does silent design critiques in Figma Why silent? To give introvert designers a chance to share their ideas! Tammy Taabassum shows how to do a silent design crit in Figma 👇

Jayneil Dalal

53,342 views • 1 year ago

UI/UX Designers, did you know you can convert your PNG images to SVG format and customize the colors directly in Figma? Quick Tracing is a Figma plugin that allows you to easily trace and convert images into vector shapes directly within Figma with just one click.
0:30

UI/UX Designers, did you know you can convert your PNG images to SVG format and customize the colors directly in Figma? Quick Tracing is a Figma plugin that allows you to easily trace and convert images into vector shapes directly within Figma with just one click.

Abraham John 🦄🦓

72,101 views • 1 year ago

Last week, we launched our brand new Figma plugin, now used by 325,000+ designers! Here’s a quick video walkthrough of what’s new: import multiple frames at once and work seamlessly with Figma Slides to make your presentations more engaging. Check it out! 👇
3:25

Last week, we launched our brand new Figma plugin, now used by 325,000+ designers! Here’s a quick video walkthrough of what’s new: import multiple frames at once and work seamlessly with Figma Slides to make your presentations more engaging. Check it out! 👇

Robi

18,482 views • 1 year ago

Designers, do you know that you can now turn your Figma design into an interactive prototype 10x faster without prototyping manually. Figma Make is a new AI-powered prompt-to-app tool that transforms designs and ideas into clickable prototypes in minutes. It’s made for designers, builders, and non-technical founders who want to move fast. Bookmark it for later 💜
1:17

Designers, do you know that you can now turn your Figma design into an interactive prototype 10x faster without prototyping manually. Figma Make is a new AI-powered prompt-to-app tool that transforms designs and ideas into clickable prototypes in minutes. It’s made for designers, builders, and non-technical founders who want to move fast. Bookmark it for later 💜

Abraham John 🦄🦓

145,429 views • 7 months ago

Me: Struggling to center a rectangle on Figma Other designers:
0:47

Me: Struggling to center a rectangle on Figma Other designers:

Jim Raptis

427,216 views • 1 year ago

Designers can now ship UI directly. Vlad, our co-founder and designer, goes from Figma concept to AI fine-tuning in the live app using Cursor and Figma MCP. No more back and forth with engineers for a pixel-perfect result.
0:25

Designers can now ship UI directly. Vlad, our co-founder and designer, goes from Figma concept to AI fine-tuning in the live app using Cursor and Figma MCP. No more back and forth with engineers for a pixel-perfect result.

Alex Barashkov

37,789 views • 4 months ago

working with a combination of variables, modes, base components, and themed instances to explore designs in light and dark mode at the same time 🔊
0:32

working with a combination of variables, modes, base components, and themed instances to explore designs in light and dark mode at the same time 🔊

David Hill

18,858 views • 8 months ago