Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 11 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

UxUi.Tega profil fotoğrafı
UxUi.Tega11 ay önce

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

BeingAmarachi | Framer Developer profil fotoğrafı
BeingAmarachi | Framer Developer11 ay önce

Very helpfulllllllllll💜

UxUi.Tega profil fotoğrafı
UxUi.Tega11 ay önce

Glad it was

PB🌺 product design 💻 profil fotoğrafı
PB🌺 product design 💻11 ay önce

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

UxUi.Tega profil fotoğrafı
UxUi.Tega11 ay önce

Available on student Figma too

ODIANOSEN profil fotoğrafı
ODIANOSEN11 ay önce

@UI_UXNonye

Digitalbimpe profil fotoğrafı
Digitalbimpe11 ay önce

What’s your YouTube handle ???

Ginny - Designer | Framer Enthusiast profil fotoğrafı
Ginny - Designer | Framer Enthusiast11 ay önce

Thank youuuuuuuu 🥹

UxUi.Tega profil fotoğrafı
UxUi.Tega11 ay önce

You’re welcome

Boluwatife David profil fotoğrafı
Boluwatife David11 ay önce

Can't style guide do this same thing ?

UxUi.Tega profil fotoğrafı
UxUi.Tega11 ay önce

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

Benzer Videolar

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 22 gün önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 1 yıl önce

⚠️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,678 görüntüleme • 10 gün önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 8 ay önce