Figma Variables: Build Dark Mode Like a Pro 🌙 (+ File Template )

Figma Variables: Build Dark Mode Like a Pro 🌙 (+ File Template )

UI Collective 83.5K subscribers
12.4K views · 2023-12-13 UI Design
Learn the basics of building your own dark mode @Figma variable library!

Build a community profile + join the community: https://www.uicollective.co/
NEW - Purchase our official design system: https://collectivekit.co/
We build design systems: https://designsystemlabs.co/
Resources: https://uicollective.co/designer-tools-and-resources

Build the light mode library seen: https://youtu.be/VoSo2__hN-A

Download this variable file: https://resources.uicollective.co/checkout/buy/8af4ef2d-1632-4e8e-880b-f5f27ca1b9af

Our Figma Plugin: https://www.figma.com/community/plugin/1301974711562028600/design-system-tracker

0:00 An Introduction
0:36 Theory of Dark Mode
6:25 Text Dark Mode Colors
8:39 Icon Dark Mode Colors
8:58 Surface Dark Mode Colors
10:14 Border Dark Mode Colors
10:56 Testing Dark Mode Colors

#figma #uxdesign #uidesign
#figma variables#figma dark mode#variables dark mode#figma variables design system#dark mode variables figma#figma variables dark mode#dark mode colors#figma tutorial#design system figma#design system colors#dark mode design guidelines#dark mode design system figma#dark mode design system#figma variables tutorial#figma tutorial variables for color