Design Tokens

A design token is a global style, such as color, border or shadow. You can 'link' the tokens to your widgets. Updates on the design tokens will be visible on all widgets that are lined to the particular style.

Create a design token

To create a design token follow these steps:
  1. Create a widget and style it as you like. For instance, define a background color.
  2. Click the icon and select 'Create Token'. Enter a name for the token in the dialog and press 'Create'.
  3. Now the view will change, and the name of the token will be shown.

Change or add a design token

To link an existing design token to a widget perform the following steps:
  1. Select a widget
  2. Click the icon and select the style you want to link. If the widget is already linked, the new style will be applied.
  3. Now the view will change, and the name of the token will be shown.

Update a design token

To update a design token follow these steps:
  1. Select a canvas. The list of all design tokens will be shown.
  2. Hover over the token you want to change, and click on the icon.
  3. Change the style or the name in the popup.
  4. Press Save.
  5. All instances of the style will be updated.
Getting StartedImportDesign TokensComponentsCustom FontsMaster ScreensScreen SegmentsAnimationsLogic FlowsData BindingForm ValidationScriptsWeb ServicesUser TestingUser SurveysA/B TestingAnalytic DashboardAnalytic CanvasData DistributionAnalytic TasksChrome BugsSupport