Chapter 4 › Lesson 20

20. Prototype: Conditional Button States (Disabled to Enabled)

Skills: Button component with Disabled and Enabled variants; Duplicate screen: form empty (button disabled); Duplicate screen: form filled (button enabled); Add interaction: On click (field) → Navigate to filled screen

A common form pattern: the submit button starts disabled, turns enabled once all fields are filled, and clicking it shows a success state. You'll prototype this progressive flow.

20. Prototype: Conditional Button States (Disabled to Enabled)
Figure: Two screens: Empty form with Disabled button, and Filled form with Enabled button. Tapping an input field transitions between them.

Step-by-step

  1. Create a button component with two variants: "Disabled" (grey background, #c8c6bd) and "Enabled" (blue background, #1a56db)
  2. Create screen 1: Empty form with 2 text inputs (Empty variant) + the button set to Disabled
  3. Create screen 2: Filled form — set both inputs to Filled variant + button set to Enabled
  4. Create screen 3: Success screen or button loading state (optional)
  5. Switch to Prototype mode
  6. On screen 1, select the first text input. Add interaction: On click → Navigate to screen 2
  7. On screen 2, select the Enabled button. Add interaction: On click → Navigate to screen 3 (or show a toast overlay)
  8. Set screen 1 as the Starting frame
  9. Test the flow: tap an input field → form switches to filled state → tap Enabled button → success

Pro tip

This "multiple screens" approach is how Figma prototypes conditional flows. Each screen represents one state of the form. You transition between them based on user interactions.