Property Toggle

Property Toggle lets you quickly set boolean (true/false) properties on component instances in bulk. Great for managing design systems and quickly making variations of layouts when your components have shared properties.

UsageAdd properties that you want to toggle (ex. “dark mode”)Toggle properties to the state you want to setApply changes to the entire page, or your current selectionExamplesAdd a notch property and variants to your components and use Property Toggle to quickly swap between iPhone 13 and iPhone SE layoutsAdd a dark mode property and variants to your components and use Property Toggle to quickly see what your layout will look like for users who use different preferencesAdd an android property and variants to your components and use Property Toggle to quickly switch out platform-specific UI patterns to make your devs happyAdd an accessibility mode property and variants to your components and use Property Toggle to quickly test what larger font sizes and higher contrast colours would look like in your layoutWhen building design ‘molecules’ in your design system from design ‘atoms’ with shared properties, quickly create variants by switching all nested instances at the same time.