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 1 Jahr •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von UxUi.Tega
UxUi.Tegavor 1 Jahr

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

Profilbild von BeingAmarachi | Framer Developer
BeingAmarachi | Framer Developervor 1 Jahr

Very helpfulllllllllll💜

Profilbild von UxUi.Tega
UxUi.Tegavor 1 Jahr

Glad it was

Profilbild von PB🌺 product design 💻
PB🌺 product design 💻vor 1 Jahr

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

Profilbild von UxUi.Tega
UxUi.Tegavor 1 Jahr

Available on student Figma too

Profilbild von ODIANOSEN
ODIANOSENvor 1 Jahr

@UI_UXNonye

Profilbild von Digitalbimpe
Digitalbimpevor 1 Jahr

What’s your YouTube handle ???

Profilbild von Ginny - Designer | Framer Enthusiast
Ginny - Designer | Framer Enthusiastvor 1 Jahr

Thank youuuuuuuu 🥹

Profilbild von UxUi.Tega
UxUi.Tegavor 1 Jahr

You’re welcome

Profilbild von Boluwatife David
Boluwatife Davidvor 1 Jahr

Can't style guide do this same thing ?

Profilbild von UxUi.Tega
UxUi.Tegavor 1 Jahr

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,457 Aufrufe • vor 3 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 🦄🦓

28,726 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 🦄🦓

56,500 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 🦄🦓

30,370 Aufrufe • vor 5 Monaten

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 5 Monaten

⚠️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

23,042 Aufrufe • vor 1 Monat

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

72,101 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 8 Monaten

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,878 Aufrufe • vor 5 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 9 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

YC S24's Polymet (YC S24) helps non-designers create production-ready designs and frontend code with AI. Explain what you want to build, or provide an image, and Polymet designs and implements it. Congrats on the launch, and Furkan Köseoğlu!
0:48

YC S24's Polymet (YC S24) helps non-designers create production-ready designs and frontend code with AI. Explain what you want to build, or provide an image, and Polymet designs and implements it. Congrats on the launch, and Furkan Köseoğlu!

Y Combinator

125,377 Aufrufe • vor 1 Jahr

Introducing the first step towards design systems in v0: •Create unique color schemes for your v0 generations •Adjust the colors for a design system right from Design Mode •Preview in light & dark mode Learn more directly from v0 team member and creator of tweakcn Sahaj
1:27

Introducing the first step towards design systems in v0: •Create unique color schemes for your v0 generations •Adjust the colors for a design system right from Design Mode •Preview in light & dark mode Learn more directly from v0 team member and creator of tweakcn Sahaj

v0

69,868 Aufrufe • vor 10 Monaten

quick riff on a ripple shader, tried chromatic aberration in Figma make to see how it changes the feel. remix and share your version!
0:39

quick riff on a ripple shader, tried chromatic aberration in Figma make to see how it changes the feel. remix and share your version!

Daniela Muntyan 🇺🇦

17,101 Aufrufe • vor 11 Monaten

My newest Figma plugin: Variable Visualizer! Manage your variable tables in an interactive canvas—see in the video how you can add a new mode in seconds. Design system nerds, this one's a must try👇and let me hear from you👂 #FigmaPlugin #DesignSystems
1:07

My newest Figma plugin: Variable Visualizer! Manage your variable tables in an interactive canvas—see in the video how you can add a new mode in seconds. Design system nerds, this one's a must try👇and let me hear from you👂 #FigmaPlugin #DesignSystems

Mr. Biscuit

18,467 Aufrufe • vor 1 Jahr