# Variables for brand designers | Figma Source: https://www.youtube.com/watch?v=E6opeuuTygs Recap page: https://rapidrecap.app/video/E6opeuuTygs Generated: 2026-02-10T12:33:54.554+00:00 --- ## Quick Overview Figma variables empower brand designers to maintain consistency across scale, facilitate faster brand exploration, and future-proof designs by allowing dynamic changes based on context like product lines or campaigns, all managed through collections, modes, and specific variable types (Color, Number, String, Boolean). **Key Points:** - Figma Variables enable brand expression management at scale, ensuring consistency across product lines, sub-brands, and campaigns without duplicating files. - Variables support four core types: Color (for palettes like 'Plum' or 'Accent'), Number (for spacing, corner radius), String (for localized text like headlines), and Boolean (for toggling visibility, e.g., 'Sale % Tag'). - The variable system utilizes Collections (e.g., 'Brand Color Palette', 'Brand Themes') which can contain Modes (e.g., 'Kids', 'Mens', 'Womens') to define different states or contexts for the same variable names. - Extended Collections allow designers to inherit variables from a base collection (parent) and override specific values for specialized scenarios like 'Kinfolk Accessories' (child). - Variables streamline rapid brand exploration, allowing designers to test moodier palettes or typography changes across many assets instantly by switching modes (e.g., switching an illustration style from 'Contrast' to 'Experiment'). - Boolean variables are key for conditional visibility, such as toggling partner logos or regional elements on or off within a design. - The video emphasizes that designers should start small, sync with product teams who might already use variables, and educate collaborators on naming conventions and mode structure. ![Screenshot at 00:37: The Variables panel displays a 'Kinfolk Brands' collection organized by Groups \(Typography\), showing color variables like 'Background' and 'Accent' assigned different hex codes across 'General Pass' and 'VIP' modes, illustrating how context-specific values are defined.](https://ss.rapidrecap.app/screens/E6opeuuTygs/00-00-37.jpg) **Context:** This video tutorial, presented by Mallory Dean, a Designer Advocate at Figma, explains how brand designers can leverage Figma's Variables feature to manage design tokens efficiently. The core challenge addressed is maintaining brand expression and consistency when scaling designs across multiple products, regions, or campaigns while avoiding tedious manual updates or file duplication. ## Detailed Analysis Figma Variables serve as reusable values (colors, numbers, strings, booleans) applied across design properties and prototyping actions, solving the problem of maintaining brand consistency at scale. The system centers around Collections, which act as containers for variables. These collections can be organized into Groups, and critically, they support Modes, which define different states or contexts for the same variable names (e.g., 'Kids', 'Mens', 'Womens' modes define specific colors for the 'Main' variable). Designers can also use Extended Collections to inherit properties from a parent collection and only override specific values for specialized needs, such as creating a 'Kinfolk Accessories' collection that inherits from 'Kinfolk Clothing Brands'. Color variables are fundamental for managing brand palettes, while Number variables control spacing, corner radius, or sizing. String variables manage localized or contextual text, such as promotional copy or date formats. Boolean variables offer toggling functionality for showing or hiding elements like partner logos or specific tags. The practical application demonstrated includes instantly swapping entire brand themes across multiple designs (like changing a social media graphic from 'Kids' theme to 'Mens' theme) simply by selecting a different mode in the Appearance panel, proving their power for faster brand exploration and future-proofing designs against updates like rebrands or accessibility changes. ### Introduction to Variables - Variables store reusable values (color, number, string, boolean) applied to design properties and prototyping actions - They solve brand expression challenges at scale across product lines and campaigns. ### Variable Types - Four types exist: Color (for palettes), Number (for spacing, radius), String (for text/localization), and Boolean (for toggling visibility, e.g., partner logos). ### Organization - Variables live within Collections (e.g., 'Brand Color Palette'), which are organized into Groups. Collections support Modes (e.g., 'Kids', 'Mens', 'Womens') to define context-specific values for the same variable names. ### Advanced Organization - Extended Collections allow inheriting variables from a parent collection and overriding specific values for specialized needs (e.g., 'Kinfolk Accessories' inheriting from 'Kinfolk Clothing Brands'). ### Application & Use Cases - Variables update elements like colors, spacing, and text formats across multiple designs instantly when switching modes (e.g., light/dark themes, regional variations) without manual restyling. ### Best Practices - Start small, sync with product teams who may already use variables, establish clear naming conventions, and ensure all collaborators know how to switch between modes and collections. ![Screenshot at 00:14: Mallory Dean introducing herself as a Designer Advocate at Figma and outlining the video's agenda on variables for brand designers.](https://ss.rapidrecap.app/screens/E6opeuuTygs/00-00-14.jpg) ![Screenshot at 00:38: Demonstration of applying a variable \('General Pass'\) to the 'Background' fill property of a design element in the right-hand properties panel, showing immediate visual change.](https://ss.rapidrecap.app/screens/E6opeuuTygs/00-00-38.jpg) ![Screenshot at 01:40: The Variables panel showing a 'Kinfolk Brands' collection with columns for different modes \('Kids', 'Mens', 'Womens'\) defining values for variables like 'Main' color and 'Logo Roundness'.](https://ss.rapidrecap.app/screens/E6opeuuTygs/00-01-40.jpg) ![Screenshot at 03:05: The Variables panel displaying the structure of the 'Kinfolk Brands' collection, highlighting Collections, Groups, and the ability to create new variables.](https://ss.rapidrecap.app/screens/E6opeuuTygs/00-03-05.jpg) ![Screenshot at 05:53: Demonstration of switching the 'Kinfolk Brands' variable mode from 'Kids' to 'Mens' on a design element, instantly changing the color scheme and text elements to match the 'Mens' mode definition.](https://ss.rapidrecap.app/screens/E6opeuuTygs/00-05-53.jpg)