Skip to main content
All CollectionsDesign System
Introduction to Design Systems
Introduction to Design Systems
Updated over a week ago

Styles are a key component of your design system in Play. Styles are sets of properties that can be reused to keep your designs consistent with brand guidelines. Think of them as your primitives, design tokens, or stylesheets.

Making changes to any style will update every object using that style across your project. For example, if every button is using the Orange Color style, adjusting the HEX code for the Orange style will automatically change the color of every button.

Styles on macOS

Styles on macOS can be managed in the Styles Panel which is on the left side of the app. You can toggle it open and close by clicking the four circle icon in the bottom left corner of the Editor or using the keyboard shortcut OPT + 2 .

Styles on iOS

Styles in iOS can be managed in two ways.

  1. Tap on the four circle icon in the editor when nothing is selected

  2. Tap on the four circle icon next to any property that uses a style

Types of Styles

  • Color styles are the colors used throughout your project.

  • Gradient styles are the linear or radial gradients used throughout your project.

  • Type styles are the typography options used throughout your project.

  • Spacing styles are the spacing values, in points, used for the paddings, margins, and gaps in your project.

  • Radius styles are the corner radius values, in points.

Did this answer your question?