Requiring 3 checkboxes to be checked before button becomes enabled

Question

I'm working on a prototype and attempting to mock an existing page so I can use Figma to enhance the page with some new UI and UX.

On the real site, we have a series of checks to try to cut down on human error. Only when all three checkboxes are checked does the Next button become enabled.

I'm able to create two components - one checkbox, one button - and have the button shift to the "Enabled" variant when the one checkbox is checked, using a single Boolean variable. How can I require 3 checkboxes to be checked before the Boolean is set to true? Or, barring that, is there another way to achieve the objective?

Figma Version: Figma Desktop App version 116.15.4

Answer 1

To require three checkboxes to be checked before enabling the button in Figma, you can use a combination of Boolean variables and nested components. Figma does not have built-in logic like a programming language, but you can simulate this behavior using components and instances.

Here's a step-by-step guide on how to achieve this:

1. Create three checkbox components:

   • Create a checkbox component (let's call it "Checkbox").
   • Duplicate this component twice to have a total of three checkboxes.

2. Create a button component:

   • Create a button component (let's call it "Button").
   • Create two variants for this button: "Enabled" and "Disabled." Set the "Disabled" variant as the default state.

3. Create a main frame for your prototype:

   • Create a new frame where you'll assemble these components to create your prototype.

4. Set up interaction logic:

   • Create a Boolean variable for each checkbox (e.g., "Checkbox1Checked," "Checkbox2Checked," "Checkbox3Checked"). Set their initial values to "False."

5. Create instances of the checkboxes and the button in your main frame.

6. Add interaction to the button:

   • Select the "Button" component and add an "OnClick" interaction.
   • In the interaction settings, choose "Set Value of a Boolean Variable" action.
   • Set the target Boolean variable to "Checkbox1Checked."
   • Set the new value to "True" if "Checkbox1Checked," "Checkbox2Checked," and "Checkbox3Checked" are all "True." Otherwise, set it to "False."

7. Repeat step 6 for each checkbox and make sure to adjust the target Boolean variable accordingly. For example, for "Checkbox2," set the target to "Checkbox2Checked."

8. Create conditional variants for the button:

   • Select the "Button" component and create two conditional variants: "Enabled" and "Disabled."
   • Set up conditions for each variant to switch based on the state of "Checkbox1Checked," "Checkbox2Checked," and "Checkbox3Checked."

9. Place the checkboxes and the button in your main frame as needed.

Now, when you interact with the checkboxes, the button should enable only when all three checkboxes are checked. This simulates the behavior you described where the Next button becomes enabled only when all three checkboxes are checked.