Used to hide or show parts of your layer hierarchy based on a set of conditions.

Updated over a week ago

Conditionals are containers with one or more Conditions, such as “if isHightlighted equals True”. If all the Conditions on a Conditional are met, then the children of the Conditional are displayed—otherwise they are hidden. They can be used to show or hide entire branches of your layer hierarchy, or to apply different modifiers based on the state of a component.

Once you’ve inserted a Conditional and selected a property, you can choose from one of the following Conditions: Equals, Does Not Equal, Is Greater Than, Is Less Than, Is Set, Is Not Set, Is True, Is False.

For example, the Conditional modifier is used to change the Text and add or remove a highlight based on the isHighlighted Boolean Condition. The Background and On Tap Gesture modifiers are used conditionally.

When the Text layer is not highlighted, you can tap it once to set isHighlighted to True, which updates the text to “Tap to remove highlight” while adding a yellow Rectangle behind the text.

When the Text layer is highlighted, you can tap it again to set isHighlighted to False, which updates the text to “Tap to highlight” while removing the yellow Rectangle behind the text.


You could accomplish the same Conditional with a number property instead. For example, say isHighlighted is 0. When isHighlighted equals any number but 0 or does not equal 0, and you tap the text, isHighlighted gets set to 0, highlighting the text.

Did this answer your question?