Using the Sketch Library
Learn about symbols, text and layer styles
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.
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.
Similar to how developers refer to props, Sketch uses symbol overrides.
If you would like to customise the style, read about custom branding.
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.
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.