Bain Logo

Using the Sketch Library

Learn about symbols, text and layer styles

Note: The sketch version of this library is now deprecated, as we have moved to Figma. For legacy support, this page is still here.

The Sketch library for the ADAPT Design System is comprised of three main pre-defined 'areas'. It's through these areas that you can use the design system.

Symbols

Most of the pre-made building blocks in the design system are set up as Sketch Symbols. These share a 1:1 relationship with what you see in the components documentation.

These symbols are generally set up in a logical way and at times given names like _default and _full to indicate what the recommended versions are.

Preview of the Design System's symbols in Sketch.Preview of the Design System's symbols in Sketch.

Overrides

Similar to how developers refer to props, Sketch uses symbol overrides.

Example of using overrides in Sketch.Example of using overrides in Sketch.

Text Styles

Preview of the text styles available in the Design System.Preview of the text styles available in the Design System.

Layer Styles

Preview of the layer styles available in the Design System.Preview of the layer styles available in the Design System.

Customisation

If you would like to customise the style, read about custom branding.

Advanced

Note: this section is Work In Progress

Compose your own symbols, but use the Design System styles.

In this example, we’re composing a Card component using the “shadow” layer style and two text styles from the ADAPT Design System library. You can create symbols however you like; the key is to draw upon the visual styles of the library, and try to minimize any manual styling.

Create symbols for text blocks.

In this example, we’re creating a Sketch symbol for a text heading. The symbol also includes bottom margins and is fitting to the 8pt grid. This way, we’re spacing the headings consistently every time.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy