Notes on Figma Variables Presentation

Definition of Variables

• A variable is something that can vary in value or take on multiple values.
• In Figma, variables store reusable values (e.g., colors, numbers) for design properties and prototypes.
• Unlike styles, variables are dynamic and allow designs to change in different contexts.

Key Features of Variables

• Dynamic Contexts: Switch between light/dark modes, localize languages, adapt to device sizes.
• Referencing: Variables can reference other variables for easier updates to design systems.
• No Coding Knowledge Required: Familiarity with coding concepts of variables is helpful but not necessary.

Examples of Variable Use

• WorldPeace E-commerce Site: Utilizes a color palette with reusable colors for various functions (e.g., text, buttons).
• Create variables for each color in the palette for flexibility in design updates.

Creating Variables in Figma

1. Deselect everything on the canvas and find the Local Variables section.
2. Click Open Variables and then Create Variable.
3. Choose from four types:
   • Color: For color fills.
   • Number: For dimensions, corner radius, etc.
   • String: For text layers.
   • Boolean: For true/false toggles (e.g., layer visibility).
4. Organize variables into groups (e.g., gray colors, brand colors).
5. Use semantic names for design clarity (e.g., Primary Color, Accent Color).

Tokenization

• Tokenization: Defining values by referencing other values to maintain consistency in designs.
• Create a Tokens Collection for semantic names based on primitive values (e.g., text colors, background colors).

Applying Variables in Designs

• Select elements (e.g., buttons, backgrounds) and apply variables from the Tokens collection.
• Update the design quickly by changing the variable definitions (e.g., border colors).

Modes and Variables

• Modes allow for context-specific designs (e.g., light/dark modes).
• Use string variables for localization, number variables for spacing, and boolean variables for visibility toggles.

Setting Up Light and Dark Modes

1. Select the Tokens Collection and create columns for different modes.
2. Assign different variable definitions based on the mode (e.g., light vs. dark colors).
3. Apply changes to the frame and change modes as needed (e.g., Auto mode based on parent).

Number Variables

• Use number variables for spacing and corner radii based on design needs (e.g., 8-point grid system).
• Organize variables into groups (e.g., spacing and radius).

Creating New Themes

• If needing a new aesthetic (e.g., Brutalism), create a new mode in the Primitives collection.
• Update variable definitions for the new theme while maintaining ease of updates across designs.

Conclusion

• The presentation covered the benefits and processes of using variables in Figma for a more flexible design approach.
• Further learning resources available for using string and boolean variables in prototypes.
• Subscribe for more tutorials and product news.