Distinctly NSW out of the box
NSW Design System patterns apply reusable UI elements that are distinctly NSW out of the box. They have been carefully considered and tested to meet the needs of digital creators when developing citizen-centred products and services.
The Design System patterns are available as design assets in Sketch and in production ready code. They are responsive and meet WCAG 2.1 AA accessibility guidelines.
Design System Sketch UI kit
Download the Design System Sketch UI kit to get started. NSWDesignSystem V2.6.sketch.zip (10MB last updated 9 March 2020). A full log of changes for this release is available in the Sketch document and on Github.
Upcoming Figma UI Kit Release
Based on feedback to make the Digital Design System more accessible to non Mac users we will be releasing our next update in Figma. Figma is a browser based design and prototyping application which will make it easier for teams to collaborate and implement the Design System. The current Version 2.6 will be our last Sketch file release as we hope to release Version 2.7 in Figma in mid December 2020. If you would like to be notified of the DDS Figma file release please let us know at [email protected]
Using the Sketch file
It is recommended you use Sketch version 60 or above to make the best use of the library. The Design System Sketch files use the Montserrat font family. To use the typeface in Sketch, download and install Montserrat.
First time install
- Download the NSW Design System Sketch file and store in a convenient location.
- If you are not customising the highlight colour, please skip to point 4.
- If you are customising the highlight colour, open the Sketch file and follow the instructions to update the highlight colour on the ‘typography/colour’ page.
- Open Sketch and add the NSW Design System as a library (see ‘How to use as a design library’ on the welcome page if you’re not sure).
- You’re all set.
- Open Sketch and remove the old version of the NSW Design System as a library.
- Download the updated version of the design system and store in the same location as the old file (please keep the file name the same).
- If you are not customising the highlight colour, please skip to point 5.
- If you are customising the highlight colour, open the Sketch file and follow the instructions to update the highlight colour on the ‘typography/colour’ page (please note you will have to do this each time you update, to retain your custom highlight colour).
- Open Sketch and add the updated NSW Design System as a library through preferences (again, please keep the file name the same).
- You’re all set.
Don't have Sketch or use a PC?
The Sketch file can be opened in Figma, a browser based application that has a free version you can use to get started.