Conditional Interactions in Figma are advanced prototyping interactions that allow a prototype to make decisions based on whether a specific condition is true or false. Instead of always performing the same action when a user clicks, taps, or interacts with an element, Figma can evaluate a condition and then perform different actions depending on the result.
Conditional interactions are especially useful for creating realistic forms, checkout processes, quizzes, onboarding flows, shopping carts, authentication screens, navigation systems, validation messages, and other interactive experiences without creating a separate frame for every possible state.
Learn professional Figma design and prototyping with JustAcademy Figma Training and explore the Register for Figma Course Demo.
A conditional interaction is a prototype rule that checks whether a condition is satisfied before performing an action. It follows the basic programming concept of if/else logic.
If condition is true
→ Perform Action A
Else
→ Perform Action B
For example, a Submit button can check whether all required fields are completed. If the condition is true, the prototype can navigate to a success screen. If the condition is false, it can display an error message.
The basic structure contains a trigger, a condition, and one or more actions.
Trigger
↓
Check Condition
↓
If TRUE → Action A
↓
If FALSE → Action B
For example:
On Click
↓
If cartTotal >= 1000
↓
Navigate to Free Shipping Screen
Else
↓
Show Shipping Cost
Variables make conditional interactions much more powerful. A variable can store information such as quantity, selected option, login status, form completion status, price, progress, or user preference.
Figma supports variables such as string, number, color, and boolean values in prototypes. These values can be changed through prototype interactions and then evaluated using conditional logic.
Variable:
isLoggedIn = true
Conditional:
If isLoggedIn == true
→ Navigate to Dashboard
Else
→ Navigate to Login
Boolean variables contain either true or false. They are ideal for conditions such as login status, checkbox state, menu visibility, selection state, or whether a feature is enabled.
isChecked = true
If isChecked == true
→ Enable Continue Button
Else
→ Keep Continue Button Disabled
Number variables are useful when a condition depends on a numeric value.
quantity = 3
If quantity > 0
→ Enable Add to Cart
Else
→ Disable Add to Cart
Number variables can also be used for prices, scores, counters, progress values, age limits, quantities, and other numeric states.
String variables can store text values and can be checked to determine which action should occur.
userType = "premium"
If userType == "premium"
→ Show Premium Content
Else
→ Show Upgrade Message
Color variables are primarily used to control design properties, but variable-driven states can also be combined with conditional prototype logic to create interactive themes and states.
theme = "dark"
If theme == "dark"
→ Apply Dark Mode
Else
→ Apply Light Mode
The Conditional action is configured inside the prototype interaction details. The If field contains the condition that must evaluate to true or false.
Trigger: On Click
Action: Conditional
IF:
cartTotal >= 1000
THEN:
Navigate to Free Shipping
ELSE:
Open Shipping Cost Overlay
Figma evaluates the condition as a boolean expression. If the result is true, the actions inside the If branch run. If the result is false, the actions inside the Else branch run.
A trigger determines what user interaction starts the prototype action. Common triggers include clicking, tapping, hovering, dragging, pressing a key, or other supported prototype events.
| Trigger | Example Use |
|---|---|
| On Click | Desktop button interaction |
| On Tap | Mobile app interaction |
| While Hovering | Hover states |
| While Pressing | Press states |
| On Drag | Slider or drag interaction |
| Key/Gamepad | Keyboard or controller interaction |
An action defines what happens after a trigger occurs. Conditional logic can determine which action should happen.
| Action | Purpose |
|---|---|
| Navigate to | Move to another frame |
| Open overlay | Display an overlay |
| Set variable | Change a variable value |
| Set variable mode | Change a variable mode |
| Change to | Change an interactive component variant |
| Scroll to | Scroll to an object |
Suppose a user clicks a Continue button. The prototype checks whether the user has accepted the terms.
termsAccepted = true
IF termsAccepted == true
→ Navigate to Next Screen
ELSE
→ Open Terms Error Message
A common real-world use case is preventing a form from being submitted until a required checkbox is selected.
termsAccepted = false
On Click Submit
IF termsAccepted == true
→ Navigate to Success Screen
ELSE
→ Open "Please accept terms" Overlay
This approach can create realistic form validation without creating separate screens for every possible checkbox state.
Conditional interactions can simulate login logic in a prototype.
loginStatus = "success"
IF loginStatus == "success"
→ Navigate to Dashboard
ELSE
→ Open Login Error Overlay
In a real application, authentication would be handled by backend logic. In Figma, the purpose is to simulate the expected user experience.
Conditional logic is useful for determining whether a shopping cart is empty.
cartItems = 0
IF cartItems > 0
→ Navigate to Checkout
ELSE
→ Open Empty Cart Message
A shopping prototype can check the cart total and display different outcomes.
cartTotal = 1250
IF cartTotal >= 1000
→ Show "Free Shipping"
ELSE
→ Show "Shipping ₹99"
Quantity controls can use conditional logic to prevent invalid values.
quantity = 1
IF quantity > 1
→ Enable Decrease Button
ELSE
→ Keep Decrease Button Disabled
Conditional interactions can be combined with Set variable actions to create interactive counters.
count = 0
On Click Plus:
Set count = count + 1
On Click Minus:
IF count > 0
→ Set count = count - 1
ELSE
→ Keep count = 0
Conditional interactions are particularly useful for simulating form validation.
emailValid = true
passwordValid = false
IF emailValid == true AND passwordValid == true
→ Navigate to Dashboard
ELSE
→ Show Validation Error
A prototype may need to check more than one requirement before performing an action.
age = 25
hasTicket = true
IF age >= 18 AND hasTicket == true
→ Allow Entry
ELSE
→ Show Access Denied
The AND operator requires all specified conditions to be true.
IF emailValid == true AND passwordValid == true
→ Login
ELSE
→ Show Error
This is useful when multiple requirements must be satisfied simultaneously.
The OR operator allows an action when at least one of the conditions is true.
IF paymentMethod == "card" OR paymentMethod == "upi"
→ Continue Payment
ELSE
→ Select Payment Method
Conditional expressions can compare variable values using supported comparison operators.
| Operator | Meaning | Example |
|---|---|---|
| == | Equal to | count == 5 |
| != | Not equal to | status != "error" |
| > | Greater than | price > 500 |
| < | Less than | quantity < 10 |
| >= | Greater than or equal to | age >= 18 |
| <= | Less than or equal to | score <= 100 |
Expressions allow prototype variables to be manipulated or evaluated using supported operations. They can be used in Set variable actions and Conditional actions.
quantity = 2
price = 500
subtotal = quantity * price
IF subtotal >= 1000
→ Show Free Shipping
ELSE
→ Show Shipping Charge
Conditional interactions become more powerful when combined with expressions and number variables.
quantity = 3
price = 400
subtotal = quantity * price
IF subtotal >= 1000
→ discount = 100
ELSE
→ discount = 0
The Set variable action can be placed inside a conditional branch. This allows the prototype to change its state depending on the result of a condition.
IF quantity > 0
→ Set buttonState = "enabled"
ELSE
→ Set buttonState = "disabled"
Conditional logic can work together with interactive components and variables to simulate state changes.
IF isSelected == true
→ Change component to Selected
ELSE
→ Change component to Default
This can be used for buttons, checkboxes, tabs, cards, navigation items, and other component states.
Buttons often depend on application state. For example, a Continue button can remain inactive until required information has been provided.
IF formCompleted == true
→ Change button to Enabled
ELSE
→ Change button to Disabled
Checkboxes can update boolean variables, which can then be evaluated by a Conditional action.
checkboxChecked = false
On Tap Checkbox:
Set checkboxChecked = true
On Tap Submit:
IF checkboxChecked == true
→ Continue
ELSE
→ Show Error
Radio button selections can be stored in string variables and evaluated before the prototype continues.
selectedPlan = "basic"
IF selectedPlan == "premium"
→ Show Premium Features
ELSE
→ Show Basic Features
Conditional logic can help simulate different content based on the selected tab.
selectedTab = "orders"
IF selectedTab == "orders"
→ Show Orders Content
ELSE
→ Show Other Content
Navigation can depend on user state, selected options, or completed steps.
IF isLoggedIn == true
→ Navigate to Home
ELSE
→ Navigate to Login
Onboarding flows often need to determine whether the user has completed required steps before continuing.
topicsSelected = 2
IF topicsSelected > 0
→ Enable Continue
ELSE
→ Keep Continue Disabled
This pattern can be used for selecting interests, completing profiles, choosing preferences, and other onboarding activities.
Quiz prototypes can compare the user's answer with the expected answer.
selectedAnswer = "B"
correctAnswer = "B"
IF selectedAnswer == correctAnswer
→ Show Correct Answer
ELSE
→ Show Incorrect Answer
Progress values can be checked to determine whether a user has completed a particular stage.
progress = 100
IF progress >= 100
→ Show Complete
ELSE
→ Show Continue Progress
E-commerce prototypes can use conditional logic for stock status, cart totals, discounts, shipping, payment, and checkout validation.
stock = 0
IF stock > 0
→ Enable Add to Cart
ELSE
→ Show Out of Stock
cartTotal = 2500
IF cartTotal >= 2000
→ Apply Discount
ELSE
→ No Discount
Dashboard prototypes can use conditions to display different states depending on metrics or user roles.
userRole = "admin"
IF userRole == "admin"
→ Show Admin Controls
ELSE
→ Show Standard Dashboard
Mobile application prototypes can use conditional interactions for login, permissions, navigation, notifications, settings, and content states.
notificationEnabled = true
IF notificationEnabled == true
→ Show Notification Settings
ELSE
→ Show Enable Notification Message
Figma allows multiple actions to be associated with a single trigger. These actions run in the order in which they are listed.
On Click
1. Set variable cartTotal = 1500
2. Conditional:
If cartTotal >= 1000
→ Show Free Shipping
Else
→ Show Shipping Charge
Action order is important because changing a variable before evaluating a condition can produce a different result than evaluating the condition first.
Consider the following example:
1. Set numberVar = 2
2. Conditional:
If numberVar == 2
→ Navigate to Frame 2
The condition evaluates to true because the variable has already been changed.
If the order is reversed:
1. Conditional:
If numberVar == 2
→ Navigate to Frame 2
2. Set numberVar = 2
The condition is evaluated before the value changes, so the result may be false. Always consider the order of actions when building conditional interactions.
Complex prototype flows may require more than one decision. Conditional logic can be combined with multiple actions and variables to represent different states.
IF userLoggedIn == true
IF cartItems > 0
→ Navigate to Checkout
ELSE
→ Show Empty Cart
ELSE
→ Navigate to Login
When creating complex flows, keep the logic simple and organized so that the prototype remains easy to understand.
Variable modes can represent different contexts such as light and dark themes or different device configurations. Prototype interactions can also change variable modes.
IF theme == "dark"
→ Set Dark Mode
ELSE
→ Set Light Mode
Figma provides a Set variable mode action that can change the variable mode of the current page during prototyping.
themeMode = "light"
On Tap Theme Toggle:
IF themeMode == "light"
→ Set variable mode = Dark
ELSE
→ Set variable mode = Light
This approach can help demonstrate theme switching in a prototype.
Interactive components can store reusable interaction behavior. Variables can be assigned to component properties or variants, while conditional logic determines which state should be displayed.
IF buttonState == "enabled"
→ Show Enabled Variant
ELSE
→ Show Disabled Variant
A form may contain several required fields. A prototype can use variables to track whether the required information is complete.
nameValid = true
emailValid = true
phoneValid = false
IF nameValid == true AND emailValid == true AND phoneValid == true
→ Navigate to Confirmation
ELSE
→ Show Validation Error
Payment prototypes can check whether the user has selected a payment method before proceeding.
paymentMethod = "none"
IF paymentMethod != "none"
→ Continue Payment
ELSE
→ Show Select Payment Method
Applications frequently need different screens or messages when data is unavailable.
itemsCount = 0
IF itemsCount == 0
→ Show Empty State
ELSE
→ Show Item List
Conditional logic can simulate how an application responds to an error.
loginStatus = "error"
IF loginStatus == "success"
→ Navigate to Dashboard
ELSE
→ Show Login Error
User roles can be represented using string variables.
role = "editor"
IF role == "admin"
→ Show Admin Panel
ELSE
→ Show Standard Panel
membership = "premium"
IF membership == "premium"
→ Unlock Premium Content
ELSE
→ Show Upgrade Message
A search prototype can show different results depending on whether the search query contains a result state.
resultsCount = 5
IF resultsCount > 0
→ Show Search Results
ELSE
→ Show No Results Message
unreadCount = 3
IF unreadCount > 0
→ Show Notification Badge
ELSE
→ Hide Notification Badge
A favorite button can use a boolean variable to represent whether an item has been saved.
isFavorite = false
IF isFavorite == true
→ Show Filled Favorite Icon
ELSE
→ Show Outline Favorite Icon
passwordValid = false
IF passwordValid == true
→ Enable Create Account
ELSE
→ Show Password Requirements
age = 20
IF age >= 18
→ Continue
ELSE
→ Show Age Restriction
stock = 5
requestedQuantity = 3
IF requestedQuantity <= stock
→ Add Product to Cart
ELSE
→ Show Insufficient Stock
deliveryAvailable = true
IF deliveryAvailable == true
→ Show Delivery Options
ELSE
→ Show Delivery Unavailable
Conditional logic can control whether users are allowed to move from one form step to another.
stepOneComplete = true
stepTwoComplete = false
IF stepOneComplete == true
→ Navigate to Step Two
ELSE
→ Show Complete Step One Message
language = "English"
IF language == "English"
→ Show English Content
ELSE
→ Show Other Language Content
Accessibility preferences can be represented in prototypes using variables and conditional behavior.
largeText = true
IF largeText == true
→ Apply Large Text Mode
ELSE
→ Apply Standard Text Mode
Conditional logic can be combined with variables and modes to simulate different responsive states.
device = "mobile"
IF device == "mobile"
→ Show Mobile Navigation
ELSE
→ Show Desktop Navigation
menuOpen = false
On Tap Menu:
IF menuOpen == false
→ Set menuOpen = true
→ Show Menu
ELSE
→ Set menuOpen = false
→ Hide Menu
Accordion components can use boolean variables to represent expanded and collapsed states.
isExpanded = false
IF isExpanded == false
→ Open Accordion
ELSE
→ Close Accordion
showModal = false
IF showModal == true
→ Open Modal
ELSE
→ Close Modal
Boolean variables make it easy to simulate saved and unsaved states.
saved = true
IF saved == true
→ Show Saved State
ELSE
→ Show Save State
Build a registration prototype that checks whether the required fields are complete.
nameValid = true
emailValid = true
passwordValid = true
termsAccepted = true
IF nameValid == true AND emailValid == true AND passwordValid == true AND termsAccepted == true
→ Navigate to Registration Success
ELSE
→ Show Validation Error
Registration Screen
↓
User Enters Information
↓
User Accepts Terms
↓
Click Register
↓
Conditional Validation
↙ ↘
TRUE FALSE
↓ ↓
Success Error
Create a shopping cart prototype that calculates a subtotal and checks whether the customer qualifies for free shipping.
quantity = 3
price = 500
subtotal = quantity * price
IF subtotal >= 1000
→ Show Free Shipping
ELSE
→ Show Shipping Charge
Create a quiz prototype where the selected answer is compared with the correct answer.
selectedAnswer = "B"
correctAnswer = "B"
IF selectedAnswer == correctAnswer
→ Show Correct
→ Increase Score
ELSE
→ Show Incorrect
Create an onboarding prototype where users select topics before continuing.
topicsSelected = 0
IF topicsSelected > 0
→ Enable Continue
ELSE
→ Keep Continue Disabled
This type of flow is useful for demonstrating personalized onboarding experiences.
loginStatus = "success"
IF loginStatus == "success"
→ Navigate to Dashboard
ELSE
→ Show Login Error
addressComplete = true
paymentSelected = true
cartItems = 2
IF addressComplete == true AND paymentSelected == true AND cartItems > 0
→ Navigate to Order Confirmation
ELSE
→ Show Checkout Error
Identify User Interaction
↓
Create Prototype Trigger
↓
Create Required Variables
↓
Define Condition
↓
Add IF Action
↓
Add ELSE Action if Required
↓
Add Additional Actions
↓
Check Action Order
↓
Preview Prototype
↓
Test TRUE Result
↓
Test FALSE Result
↓
Refine Interaction
| Feature | Normal Interaction | Conditional Interaction |
|---|---|---|
| Basic navigation | Yes | Yes |
| Decision making | Limited | Yes |
| If/Else logic | No | Yes |
| Variable evaluation | Limited | Yes |
| Multiple outcomes | Limited | Yes |
| Form validation | Basic | Advanced |
| Dynamic prototype behavior | Limited | Advanced |
Interactive components are excellent for reusable component states, while conditional interactions are useful when the prototype needs to evaluate information and make a decision.
| Interactive Components | Conditional Interactions |
|---|---|
| Focus on component states | Focus on decision logic |
| Useful for hover and selected states | Useful for if/else behavior |
| Highly reusable | Useful for dynamic flows |
| Variant-driven | Variable/expression-driven |
Conditional logic can reduce the number of frames required for complex prototypes. Instead of designing a separate frame for every possible result, variables and conditional actions can control the state dynamically.
Without Conditional Logic:
Input Screen → Success Screen
Input Screen → Error Screen
Input Screen → Empty Screen
Input Screen → Warning Screen
With Conditional Logic:
Input Screen
↓
Conditional
↙ ↓ ↘
Success Error Warning
Conditional interactions help bridge the gap between static screen design and application behavior. They allow designers to demonstrate what happens when users make different choices or when application states change.
This is particularly valuable during UX reviews because stakeholders can experience different outcomes instead of only viewing static screens.
Conditional prototype logic can also help designers communicate expected behavior to developers. A prototype can demonstrate the conditions that cause a button, message, navigation path, or component state to change.
However, the Figma prototype should be treated as a representation of intended behavior rather than production application logic.
Problem:
Continue button always shows an error.
Variable:
topicsSelected = 2
Condition:
topicsSelected > 0
Check:
1. Is topicsSelected actually a number?
2. Is the variable correctly assigned?
3. Is the interaction connected to the correct button?
4. Is the Conditional action reading the correct variable?
5. Is another action changing the variable before evaluation?
Conditional expressions represent boolean logic. The final result must evaluate to either true or false.
count > 0
price >= 1000
status == "success"
isLoggedIn == true
selectedPlan != "none"
Figma supports expressions in prototype interactions using supported syntax and operators. Invalid expressions are indicated in the interaction interface.
cartItems = 3
addressComplete = true
paymentSelected = true
cartTotal = 1500
IF cartItems > 0 AND addressComplete == true AND paymentSelected == true
IF cartTotal >= 1000
→ Show Free Shipping
→ Navigate to Confirmation
ELSE
→ Show Shipping Charge
→ Navigate to Confirmation
ELSE
→ Show Checkout Error
score = 8
totalQuestions = 10
IF score >= 8
→ Show "Excellent"
ELSE
→ Show "Keep Practicing"
plan = "premium"
IF plan == "premium"
→ Unlock Premium Features
ELSE
→ Show Upgrade Plan
unreadMessages = 4
IF unreadMessages > 0
→ Show Badge
ELSE
→ Hide Badge
emailVerified = false
IF emailVerified == true
→ Show Verified Account
ELSE
→ Show Verify Email Message
addressAvailable = true
IF addressAvailable == true
→ Show Delivery Options
ELSE
→ Ask User to Add Address
results = 0
IF results > 0
→ Show Results
ELSE
→ Show No Results
passwordStrength = 80
IF passwordStrength >= 60
→ Enable Continue
ELSE
→ Show Weak Password Message
cartQuantity = 10
maximumQuantity = 10
IF cartQuantity < maximumQuantity
→ Allow Add
ELSE
→ Show Maximum Quantity Message
applicationStatus = "approved"
IF applicationStatus == "approved"
→ Show Approval Screen
ELSE
→ Show Application Status
isPremiumUser = false
IF isPremiumUser == true
→ Open Feature
ELSE
→ Show Upgrade Screen
| Concept | Purpose |
|---|---|
| Trigger | Starts the interaction |
| Conditional | Checks a condition |
| If | Runs when the condition is true |
| Else | Runs when the condition is false |
| Variable | Stores a value or state |
| Expression | Calculates or evaluates values |
| Set variable | Changes a variable |
| Set variable mode | Changes a variable mode |
| Change to | Changes a component variant |
| Multiple actions | Runs multiple actions from one trigger |
Conditional Interactions are advanced prototype interactions that evaluate a condition and perform different actions depending on whether the condition is true or false.
The If condition defines the boolean expression that Figma evaluates before running the associated action.
If an Else action is configured, Figma runs the Else action. If no Else action is configured, no alternative action is performed.
Variables store values and states that can be evaluated or modified during the prototype, enabling dynamic behavior.
Yes. Number variables can be compared using conditions such as greater than, less than, or equal to.
Yes. Boolean variables are particularly useful for true/false states such as login status, checkbox selection, and visibility states.
A trigger determines when an interaction begins, while an action determines what happens after the trigger occurs.
Actions run in sequence, so changing a variable before or after evaluating a condition can change the result.
They can be used for forms, checkout, quizzes, onboarding, dashboards, authentication flows, navigation, counters, shopping carts, and many other interactive experiences.
Both true and false outcomes should be tested, along with initial values, variable changes, action order, and all important user paths.
Conditional Interactions are one of the most useful advanced prototyping features in Figma because they allow designers to simulate decision-based application behavior. Instead of creating separate static screens for every possible situation, designers can use variables, expressions, conditions, and multiple actions to build dynamic prototype experiences.
By combining Conditional Interactions with variables, expressions, interactive components, and variable modes, designers can create realistic prototypes for forms, login systems, shopping carts, checkout flows, quizzes, dashboards, onboarding experiences, and mobile applications.
To improve your Figma skills and learn professional UI/UX design and prototyping, explore JustAcademy Figma Training.
You can also Register for Figma Course Demo to explore the course and learning approach.
