Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 11 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von UxUi.Tega
UxUi.Tegavor 11 Monaten

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

Profilbild von BeingAmarachi | Framer Developer
BeingAmarachi | Framer Developervor 11 Monaten

Very helpfulllllllllll💜

Profilbild von UxUi.Tega
UxUi.Tegavor 11 Monaten

Glad it was

Profilbild von PB🌺 product design 💻
PB🌺 product design 💻vor 11 Monaten

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

Profilbild von UxUi.Tega
UxUi.Tegavor 11 Monaten

Available on student Figma too

Profilbild von ODIANOSEN
ODIANOSENvor 11 Monaten

@UI_UXNonye

Profilbild von Digitalbimpe
Digitalbimpevor 11 Monaten

What’s your YouTube handle ???

Profilbild von Ginny - Designer | Framer Enthusiast
Ginny - Designer | Framer Enthusiastvor 11 Monaten

Thank youuuuuuuu 🥹

Profilbild von UxUi.Tega
UxUi.Tegavor 11 Monaten

You’re welcome

Profilbild von Boluwatife David
Boluwatife Davidvor 11 Monaten

Can't style guide do this same thing ?

Profilbild von UxUi.Tega
UxUi.Tegavor 11 Monaten

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

Ähnliche 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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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,452 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 3 Jahren

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

92,288 Aufrufe • vor 20 Tagen

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 🦄🦓

71,682 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr

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,725 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 8 Monaten

Happy to finally share our video production work for Novu. Behind-the-scenes stats: - 150 hours - 2 motion designers + 2 designers Multiple iterations with a total timeline of 4w. Designed in Figma, animated in AE. Support Novu on Product Hunt today. go⁠.novu⁠.co/hunt
0:39

Happy to finally share our video production work for Novu. Behind-the-scenes stats: - 150 hours - 2 motion designers + 2 designers Multiple iterations with a total timeline of 4w. Designed in Figma, animated in AE. Support Novu on Product Hunt today. go⁠.novu⁠.co/hunt

Alex Barashkov

45,039 Aufrufe • vor 1 Jahr