Skip to content

Sketch library

The Sketch UI kit provides a set of reusable components to help you craft great products and design quickly for fast prototyping in high fidelity.

Install Sketch library

Don’t remove the old nib Design System library

We recommend you don’t remove the old nib Design System library as it will break existing Sketch documents.

The Sketch library is produced directly from Mesh React components. The library contains both symbols and text styles. You will need to download the Sketch library and install to your local drive.

It is recommended you use Sketch version 60 or above to make the best use of the library. The Mesh Sketch library uses the Open Sans and Roboto font families. To use the typefaces in Sketch, download and install from Google Fonts.

Add Sketch library

How to use

The Mesh Sketch library is generated directly from our React components. This means we do not maintain a seperate Sketch library that's updated independently of our React component library. Mesh React components are the source of truth. This means that any improvements you make to the Sketch library will not automatically make their way back to the Mesh design system.

Library menu navigation

There are two kinds of symbols — library symbols and document symbols. Library symbols are available in any Sketch document, while document symbols are specific to the document in which they are found.

From the Insert menu, select Symbols → Mesh Design System to add symbols onto your page.

Mesh symbols are built to be flexible, and designers should not detach symbols from the library. Once a symbol is detached, you will no longer receive updates as they are released.

Symbols are organized by component; after selecting a component, you’ll see the variations and states of that component. To add the whole component, select the desired variant and place it on your artboard.

For even more configurablility, use the individual building blocks found under the Items folder within the symbol. Be sure your custom design adheres to our design guidelines.

Sketch library

Since Sketch 60, there is also a components panel for working with libraries.

How to contribute

If you'd like to update an existing component or add a new component to the Sketch design library, please reach out to the DesignOps team via Slack, Workplace or by email.

Updates

We make small adjustments and bug fixes to the kit on a regular basis. When we make a change to any of the libraries, you will be notified via a red pop-up in the top right corner of the Sketch window.

The updates are opt-in, however we recommend you keep your kit as up to date as possible. Once a change is accepted, you will not be able to revert to the previous version.