Design assets in sketch
We provide designers with a Sketch file to get started prototyping using the components of the Design System.
Download the Sketch design files from the download page.
The design system Sketch files use the default system font for OSX, San Francisco. San Francisco is not usable in Sketch by default, to use the typeface in Sketch you have to download and install San Francisco.
Using the Sketch file
Open the file in Sketch, the file contains three pages: Design System, Symbols and Example.
The Design System page is split into multiple art boards and includes:
- Changelog: what changes have recently been made to the Sketch file
- Basic instructions on how to use the file
- Light, dark and system colour schemes
- Font sizes
The Symbols page contains symbols to create components applying reusable patterns:
- A symbol for each of the components
- Variations for desktop and mobile
- Variations for light and dark
The Example page contains example pages created using the symbols. This includes a mobile, tablet and desktop page.
Changing the colours
The Sketch symbols are themeable and you are able to apply your own colour scheme.
To change the colours make sure you are on the Design System page. Go to the dark or light colour palette artboard and click the square of the colour you want to change.
Once selected in the menu you can press
Find and replace colour.
You can now select a new colour. To avoid opacity changing when selecting a new colour, make sure the
Preserve original opacity option is selected.
Now you can press replace and see the colour change throughout the symbols.