Design

Before start, evaluate with the design team before using it in your projects and check out these guides to understand the foundations of Watson Design System:

• Spacing guidelines
• Typography guidelines
• Color guidelines

Figma setup

Watson Design Kit is a resource for designing and exploring ideas inside Figma quickly. It contains and reflects, as close as possible, all coded components and styles. It uses 2 libraries:

• Watson Web: contains colors, typography, effects, and all components.
• Watson Icons: contains all icons.

Setting up libraries

Libraries are turned on by default for every file. If your file doesn’t include libraries follow the steps below.

1. Open a file in which you want to include libraries
2. Press cmd+/ on your keyboard, type Libraries and press enter
3. In the modal switch on toggles for libraries: Watson Web and Watson Icons

Setting up a nudge

Nudge value should follow our spacing scale. The base unit size of our spacing scale is 8px. We recommend setting up a nudge to match this value for consistency.

1. Press cmd+/ on your keyboard. Type Nudge amount and press enter
2. Set Big Nudge: 8px

Figma usage

We provide styles and components in figma that reflect our foundational building blocks: Typography, Colors, and Spacing

Typography

Typography styles in Figma reflect variants of a Text component. You can apply styles from the right sidebar in Figma.

Read our Typography guidelines to better understand which fonts you should use in each context

Colors

Color in Figma reflects the values and naming from the Color palette. You can apply color variables from the right sidebar.

Spacing

Grid styles and Layout will help you define general structure of the page. We also provide Stack component, along with spacing tokens for more granular content distribution

Layout

To use the Layout component, drag & drop it from the Assets panel, and detach it after selecting its props combination.

Grid

To reflect grid component in Figma we use layout grid styles. Grid provides visual support for distributing elements inside the frame. You can add a grid to any frame independently i.e. add it to Main inside Layout component and elements nested inside Main.

Spacing tokens

By using spacing tokens as variables in Figma, you can revolutionize your design process. Auto-layout frames are now able to use our tokens, and you can change the size and direction of them in the blink of an eye.

Slots

Slots allow us to swap out components very easily from a single component while still following the guidelines of our design system. They're placeholder components that are part of larger templates. They are intentionally empty so that they can be replaced with a local or Watson component.

Templates

We provide templates for common views to jump-start design projects. You can find them as components inside the Assets panel.

Figma plugins

We provide helpful Figma plugins to speed up designers' workflow. These plugins are installed by default.

Stark

Use Stark to check whether color contrast of the elements comply with WCAG accessibility guidelines