How to Use Conditional Logic in Figma Prototypes

In Figma prototypes, you can use conditional logic by combining interactive components with variables and component variants. This lets you create different prototype flows based on user actions or variable states without code.

Syntax

Figma does not have traditional coding syntax for conditionals but uses interactive components and variables to simulate conditions.

• Component Variants: Different states of a component.
• Variables: Store values that control which variant shows.
• Interactions: Trigger changes based on user actions.

By setting interactions to change variables and switching variants based on variable values, you create conditional flows.

text

Component: Button
Variants: Default, Active
Variable: isActive (boolean)
Interaction: On Click -> Set isActive = true
Variant Visibility: Show Active variant if isActive = true, else Default

Example

This example shows a toggle button that changes appearance based on a variable using component variants and interactions.

text

1. Create a Button component with two variants: "Off" and "On".
2. Create a boolean variable named "isOn" initialized to false.
3. Add an interaction on the Button:
   - On Click: Set variable "isOn" to the opposite of its current value.
4. Set the component to show the "On" variant when "isOn" is true, otherwise show "Off" variant.

Output

When you click the button in prototype mode, it toggles between "Off" and "On" states visually.

Common Pitfalls

• Trying to use traditional if-else code blocks; Figma uses visual logic with variables and variants instead.
• Not linking variables properly to component variants, so the state never changes.
• Forgetting to set interactions to update variables on user actions.
• Using too many variants can make prototypes complex and slow.

text

Wrong:
- Using multiple frames and manual links without variables leads to static flows.

Right:
- Use variables to track state and component variants to reflect changes dynamically.

Quick Reference

Concept	Description	Usage Tip
Component Variants	Different visual states of a component	Use to represent conditional states
Variables	Store values like booleans or numbers	Control which variant to show
Interactions	User actions triggering changes	Set variables on click or hover
Prototype Flow	Sequence of screens or states	Use variables to create dynamic paths

Key Takeaways

Use component variants and variables together to simulate conditional logic in Figma prototypes.

Set interactions to update variables based on user actions for dynamic state changes.

Avoid traditional code; rely on Figma's visual tools for conditions.

Keep variants manageable to maintain prototype performance.

Test prototype interactions to ensure variables and variants update as expected.