Design System

The Design System panel shows the design system your app actually uses, read from your code: the tokens for color, type and spacing, and, if your repository has Storybook, its components. It's where you go to see what's available before you change a screen, and to make a change at the system level, once, instead of on every screen that needs it.

Open the Design System tab in the drawer at the bottom of the Grid layout, or press S. For how Soffi learns your design system when a Project is set up, see Design context and tokens. After that, Soffi keeps it current as your code changes, without anyone refreshing it. See Staying up to date.

Tokens

Tokens are grouped into Color, Typography, Spacing and Miscellaneous. Each one shows its name, its value in each of your themes (light and dark, for example), whether it's custom to your app or stock, the file it's defined in, and how often it's used. A token that points at another token is marked as a reference, and a value that isn't a token at all is marked hard-coded, which makes drift easy to spot. Use Search tokens... to find one by name.

Changing a token

Click a token to edit it. You can set its value for each theme, or point it at another token instead of a raw value. Apply to code writes the change to the file where the token is defined, and everything in your app that uses the token picks up the new value in the Preview. That's the difference from the Style Editor: the Style Editor changes one element, a token change reaches every component that uses it.

Each token keeps its own history of when it was created and updated. Stock tokens, which aren't defined in a file of your own, open read-only.

A token change is an edit like any other. It shows in History, and when you Ship it's listed under its own Design system changes heading, so you can see which of your changes reach beyond one screen.

Components

If your repository has Storybook, a Components tab lists your stories. Open one to see the component on its own, at different viewport sizes and backgrounds, with grid, measure and outline overlays to check spacing. Enable element editing lets you select parts of a story and style them the way you would in the Preview.

When you edit a component from a story, a scope control sets how far the change reaches: the token itself, every instance of the component, one variant, or just this story. Choose the narrowest scope that does what you mean.