How to use Figma Variable Modes FIGMA COMPONENT VARIANTS + VARIABLES

Published: 12 July 2024
on channel: Nolan Perkins

3,357

146

Since this is a very serious channel for serious ui/ux designers, I've created the ultimate demonstration of Figma Variables and Modes: a Pokemon Evolution switcher.

Variables are an essential tool to leverage inside of Figma. Specifically around modes. You can use modes to create dark mode ui / light mode ui switches inside your designs, create localization to update languages or currency, and even change all of your spacing and typography variables to account for responsive design.

But to accomplish the Pokemon Evolution Switcher, we're going to need to cover Components, Component Variants, Boolean switches on variants, and of course Variable Modes.

Find me on socials:
  / reels
  / radnolan
  / nolanperk

Join the community: https://bit.ly/rad-makers

------

Chapters:
0:00 Why this matters
0:58 Component Variants Setup
4:56 Variant Dropdowns vs Booleans
5:40 Setting up the Variables
6:55 Creating Variable Modes
8:14 Assigning Modes in Sections
9:45 Other Mode Assignments
11:30 Mini Challenge

You're Rad ❤️