正在加载视频...

视频加载失败

返回首页

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 次观看 • 1 年前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 条评论

UxUi.Tega 的头像
UxUi.Tega1 年前

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

BeingAmarachi | Framer Developer 的头像
BeingAmarachi | Framer Developer1 年前

Very helpfulllllllllll💜

UxUi.Tega 的头像
UxUi.Tega1 年前

Glad it was

PB🌺 product design 💻 的头像
PB🌺 product design 💻1 年前

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

UxUi.Tega 的头像
UxUi.Tega1 年前

Available on student Figma too

ODIANOSEN 的头像
ODIANOSEN1 年前

@UI_UXNonye

Digitalbimpe 的头像
Digitalbimpe1 年前

What’s your YouTube handle ???

Ginny - Designer | Framer Enthusiast 的头像
Ginny - Designer | Framer Enthusiast1 年前

Thank youuuuuuuu 🥹

UxUi.Tega 的头像
UxUi.Tega1 年前

You’re welcome

Boluwatife David 的头像
Boluwatife David1 年前

Can't style guide do this same thing ?

UxUi.Tega 的头像
UxUi.Tega1 年前

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

相关视频

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 4 个月前

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 次观看 • 3 年前

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,188 次观看 • 28 天前

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 次观看 • 4 个月前

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 次观看 • 1 年前

⚠️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 次观看 • 16 天前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 7 个月前

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 次观看 • 1 年前

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 次观看 • 4 个月前

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 次观看 • 8 个月前