Adding conditional logic in Figma

Change what a user sees, where they go, and keep your boards organised while keeping your sanity.

Recently, I needed to have some basic logic in my Figma prototype.

The user would make a selection from a list of five radio buttons. Then the next screen would be an application that would be different depending on which button they selected.

The next screen needed to change based on what the user chose.

Here’s how I did both while keeping screens to a minimum.

The Logic

Depending on which button is selected, a different screen for each identification type will need to be displayed.

The issue? Figma doesn’t do logic between components.

The Old Way

If I only had two radio buttons having an individual screen for each button state wouldn’t be too bad. But when we have more than 2 options, creating an individual screen for each button state would take up valuable Figma board space, not reflect how the prototype actually works for developers and really bloat our boards.

If you have a board (like mine) with a complex prototype or with over 200 screens this can get out of hand very fast

I want something “Elegant” with a big E.

Cheating with Component Variants

Here’s the secret, we can use the power of variants to simulate the logic without bulky additional screens and include navigation interactions in our component.

Here’s how:

1. Create a “Logic Component”

This is going to be our radio button options and anything that’s in between our buttons and our navigation action button “Next”. These are the actors in our logic.

I recommend naming your logic component something like “🔴 Logic Component: Identification type”. Adding the red circle or any emoji makes it clear that it’s not a normal component or asset.

Red dot makes it obvious

2. Create the alternative user flow screens.

Here, I’ve create a “Birth Certificate”, “Passport” and “Immigration Card” screen as an example of the different screens we want to navigate to.

3. Wire up the Logic Component interactions.

Uur radio buttons are hooked up with the different options.

3. Wire up the buttons from each variant to our user flow screens

Now, we wire up the action button to each of our user flow screens. This creates the navigational logic without the bulk of additional screens.

4. Place an instance of our Logic Component into our starting screen

Add an instance of our logic component into our first screen where we want our user to make their selection.

5. Hide the Logic Component!

To make it neater, you can hide the component so it isn’t visible. Now you have conditional logic without a heap of duplicate screens. But WAIT theres more.

Wow. Such elegance

6. Build same-screen logic

This isn’t just limited to navigation, we can create on-screen logic to show or hide different components in real-time. Like before, we create our logic component with all possible options. We then all conditional parts and create variants for each user flow.

That’s it! hope this was valuable for you and helps you make smoother and cleaner prototypes.

Want to experiment with this in Figma? Checkout this Figma file.

If you liked this check out my other articles The Complete Guide to Figma Branching , Using the New Sections Feature in Figma & Growing Design System Documentation.

I explore the design of systems, people and purpose behind create organisations, places & products people love. Wanna chat? Let’s have a call, connect with me on linked in or tweet me at BenMaclaren.