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.
- Open a file in which you want to include libraries
- Press cmd+/ on your keyboard, type Libraries and press enter
- 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.
- Press cmd+/ on your keyboard. Type Nudge amount and press enter
- 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
Applying typography styles in Figma
Colors
Color in Figma reflects the values and naming from the Color palette. You can apply color variables from the right sidebar.
Applying color variables in Figma
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.
How to use Layout component in Figma
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.
Applying grid styles in Figma
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.
How to use spacing tokens in Figma
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.
How to use slots in Figma components
Templates
We provide templates for common views to jump-start design projects. You can find them as components inside the Assets panel.
How to add templates in Figma
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
How to use Stark plugin in Figma