Variables
29 bites tagged Variables — interview questions with model answers, and 60-second explainers.
Manage light and dark themes with Variables and Modes
Separate primitive and semantic variables, define light and dark modes in one collection, and bind UI fills to semantic tokens. token-driven theming in Figma. duplicating screens per theme or hardcoding hex values.
How would you architect interdependent filter variables in a complex dashboard?
Tests reactive variable graphs, not interaction tangles. Strong answers centralize Figma variables, bind component properties to them, and chain conditional actions to derive downstream state. Red flag: duplicating frames instead of using variables and logic.
Describe how you would use variables and conditional logic to simulate input validation
Tests dynamic state management in Figma prototypes. Strong answers use a string variable bound to the password field, check length on submit, and conditionally route to error or success. Red flag: hardcoding static frames without variables.
How would you structure variables and expressions for a price configurator?
This tests reactive state modeling in Figma. A strong answer uses a string variable for the base model and booleans for add-ons, binding the price text to an expression that maps the base to its cost and sums active extras.
How would you use variables to calculate a real-time cart subtotal?
This tests reactive state in Figma using variables and expressions. Strong answer: store quantity in a number var, wire to a stepper, compute subtotal as qty times 25, and bind that to text. Red flag: static text or manual updates instead of live computation.
Build a Figma toggle switch that controls element visibility using variables
Tests prototype state management with Figma variables instead of frame duplication. A strong answer names a boolean variable, binds it to layer visibility, and wires an On click Set variable action. Red flag: suggesting frame duplication over variable state.
Prototype a conditional Submit button with Figma variables
Tests boolean logic in Figma prototyping. Strong answers bind inputs to string variables, conditionally check that email and password are non-empty, then toggle a boolean to enable Submit.
How do Figma Variables and component properties enable theme switching?
Tests binding semantic variable collections to component layers for theme switching. Outline: create Light/Dark modes, apply variables to fills, spacing; override modes on instances. Red flag: separate masters per theme or using colors in component properties.
How would you implement a light and dark mode theme switcher?
Tests scalable theming via Figma variable modes, not manual duplication. Create a color collection with Light and Dark modes, bind variables to component fills, then switch modes to toggle themes.
How do you populate one overlay for three profiles using variables?
Tests Figma variables and advanced prototyping. Use Set variable actions on each profile to update a string variable bound to a single overlay's name, plus instance swap for the avatar, then open that overlay.
How would you conditionally enable Submit after checking a terms checkbox?
Tests Figma advanced prototyping with boolean variables and conditionals. Strong answer: create a boolean for checkbox state, set it on click, then conditionally enable Submit only when true.
Create a counter where clicking '+' increases the number by one
Tests Figma number variables and Set variable action. Use a number variable on the text, then add an On click trigger on the plus button with Set variable and an expression to add one. Red flag: using duplicate frames instead of a single dynamic variable.
What is the most efficient way to update a brand color globally?
This tests Figma variables versus styles for design system maintenance. Store the brand color as a variable, apply it across components, and edit the value once for global propagation. Red flag: manual updates or using a color style for a single raw value.
How would you structure Figma colors for light and dark themes?
Fluency with token layers and Figma's mode-aware raw values. Use aliased color variables for semantics, switch themes via variable modes, and apply variables to styles not relying on styles for modes. Suggesting styles handle theming instead of variables.
Section-Scoped Variable Modes in Figma
A Figma section acts as a local variable mode override, letting you park dark-mode beside light-mode on the same page. Watch out for nested sections: conflicting mode overrides stack silently, and the deepest scope always wins without warning.
Figma Variable Modes for Multi-Context Theming
Variable modes let a single token hold different values for different contexts, like light and dark themes. Apply a mode to a frame and every token inside swaps instantly. The footgun is treating modes as component states, which creates a combinatorial mess.
Figma Boolean Variables: State Without Variant Sprawl
A boolean variable is a light switch for your component: one true/false value reveals badges or loaders instantly. Use it for binary states like visibility across a system. The trap is wiring too many switches into one component, making debugging a hunt.
Dynamic Counter: State in Figma
A dynamic counter wires a number variable to a text layer, letting taps change the value. Use it for quantity steppers or pagination in prototypes. The footgun is skipping the text-to-variable binding, so clicks fire but the on-screen number never updates.
Conditional Logic in Figma Prototypes
Conditional logic turns static click-throughs into state-aware flows. Use it to unlock a button only after form fields are valid, or to branch checkout based on payment method. The footgun is building a brittle fake app instead of a focused testable flow.
Mathematical Expressions in Figma Prototypes
Use variable modes as contexts for math in Figma prototypes. Instead of creating one variable per item, a single number variable with multiple modes lets expressions calculate independent counts, like separate produce counters in a shopping cart.
Difference between final and const Dart class properties?
This tests your grasp of Dart's compile-time versus runtime constant model. A strong answer contrasts final variables set once with static const compile-time values, notes const is implicitly final, gives examples. Red flag: const as non-static instance field.
What is the difference between final and const in Dart?
Tests compile-time versus runtime immutability in Dart. A strong answer: final allows single assignment at runtime, but const requires a compile-time constant and deep immutability.
Figma: Order Matters in Chained Actions
Think of Figma actions as a script running sequentially on one trigger. This lets you build complex logic, like updating a variable and navigating based on its new value. The footgun: order is critical, as actions execute top-to-bottom.
Figma String Variables: Manage UI Text in One Place
A string variable is a single source of truth for UI text. Instead of typing text directly, you apply a variable. This is key for managing translations or different component states, like a button label changing from 'Submit' to 'Submitting...'.
Get Variables bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.