Conditioner Figma Plugin

• Show how components in your design should look under different application conditions.

• Update all instances to depict a different application-wide condition in one click.

INSTRUCTIONS

===

Follow these instructions to make any component swappable using Conditioner.

1. Create a new component, or choose an existing component, and move it out of any parent frames so its frame is at the top level of the document, not embedded inside any other frames.

2. Name the component anything you’d like, but make sure it ends with ” ? ” followed by the name of the condition it represents. Example: “Header ? Anonymous” or “Navigation / Bottom Tabs ? Anonymous”

3. Place instances of the component into any places within your design you’d like it to appear.

4. Create a new conditional variation, also at the top level within the page. You can do this by duplicating the original component and changing overrides, or you can make a completely new frame with completely different content. Make the new instance or frame into a component, and name it to match the first conditional variation. Example: “Header ? Logged-in” or “Navigation / Bottom Tabs ? Logged-in”

5. Repeat step 4 for as many conditional variations you’d like to make for this component.

6. Wrap all the conditional variations together in one frame. Name the frame using the component name, followed by ” ?” at the end. Example: “Header ?” or “Navigation / Bottom Tabs ?”

Repeat the process to set up as many conditionally-swappable components as you need. Run the Conditioner plugin whenever you want to swap all the conditional instances in your design from one variation to another.

EXAMPLE LAYER STRUCTURE

===

Setting up conditional components:

—

FRAME: Header ?

– COMPONENT: Header ? Anonymous

– COMPONENT: Header ? Logged-in

FRAME: Navigation / Bottom Tabs ?

– COMPONENT: Navigation / Bottom Tabs ? Anonymous

– COMPONENT: Navigation / Bottom Tabs ? Logged-in

Using conditional instances in your designs:

—

FRAME: Home

– INSTANCE: Header ? Anonymous

– (other content)

– INSTANCE: Navigation / Bottom Tabs ? Anonymous

FRAME: Notifications

– INSTANCE: Header ? Anonymous

– (other content)

– INSTANCE: Navigation / Bottom Tabs ? Anonymous