A distinctly NSW Design System
NSW Design System patterns apply reusable UI design 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 Figma and in production-ready code. They are responsive and meet WCAG 2.1 AA accessibility guidelines.
Design System Figma UI kit
The NSW Design System UI Kit has now been released in Figma, a browser-based design and prototyping tool available on both Mac and Windows. Figma makes it easy to build and test using Design System UI components, receive updates, share your files, and collaborate in real-time with your team and stakeholders. Sign up today for a free Starter Account. Updates were also made to patterns and styles in the Figma release which you can further read about on the Community.
To access the Design System Figma UI Kit, please email us at email@example.com.
The Design System Figma UI Kit has been built as a Figma Project, to share the Project with your Figma account we share it with your Figma email address. This will allow the files to be accessible from your Dashboard.
You’ll receive confirmation via email and in the notification section of your Figma account that the file has been shared with you. Once you have access you can share it with other members in your team from within your Figma account:
- From your Figma Dashboard, select the ‘NSW Design System’ Project in your left-hand panel (do not share from within the file as this will limit access)
- Select ‘Share’ in the top right-hand corner of the screen.
- Enter the email address you wish to share within the ‘Invite someone…’ text field and click ‘Send invite’.
- Your invited user will receive notification via email and in the notification section of their Figma account.
A full log of changes for this release is available in the Figma document and on Github.
To view the UI Kit without it being added to your account, you can access the View Only Design System Figma UI Kit.
Keep up-to-date with all the latest patterns
Join our community and register for updates to stay up-to-date with all the latest patterns releases.
Using the Figma file
Once you have added the Design System Figma file to your account, you will have access to the styles and components in your Figma projects. The Design System Figma file uses the Montserrat font family. To use the typeface in Figma, download and install Montserrat.
First time setup
- Once the file has been shared with you, accept the invite via the email notification or via the Notifications feed in your Figma account.
- The Design System Figma file should be visible in the left-hand panel in your Figma account under ‘Shared Projects’.
- Open the file to view the style and pattern guidelines under ‘Pages’ in the Layers Panel.
- Open your working file or a new file and add the ‘NSW Digital Design System’ as an Asset Library (see ‘How to use as a design library’ on the Welcome page)
- If you are not adding a brand custom highlight colour, please skip to point 7.
- If you are adding a brand custom highlight colour, follow the instructions to add the highlight colour on the ‘Typography / Colour’ page.
- You’re all set.
- When an update to the Design System is published, you will receive a pop-up notification within Figma alerting you to the update.
- You can review and choose whether or not to accept the update, or if you decide not to you can update it later by clicking on Team Library in the Assets panel.
- When major updates to the Design System are released, it will be announced on this page and on the Community.
Get started with Figma
We know that implementing new software can have its challenges, so we want to support your move to Figma at a pace that suits you and your team.
If you are ready to start with Figma, we recommend dipping your toes in slowly with small projects and connecting with our Community to share experiences and ask questions.
- What's Figma? (1:35 mins)
- Setting up a Figma account (3:26 mins)
- Customising components (3:55 mins)
- Tour the Editor interface (6:38 mins)
- Designing and collaborating in real time (7:45 mins)
You'll also find some great resources on LinkedIn Learning.
Sketch is still available
The last update to Sketch was the Version 2.6 release. As we continue to extend the Design System and bring in your contributions, the Sketch file may no longer contain all the available components and patterns. Using Sketch might still work for your team if you are looking to produce Hi-fidelity mockups that look and function close to what you envision the end product to be - but if you have the opportunity to start planning how you might migrate to using the Figma UI Kit, check out the section below on moving from Sketch to Figma.
Need further guidance? Please don’t hesitate to get in touch with the Design System Team at firstname.lastname@example.org to ask how we can help.
Moving from Sketch to Figma
If you are currently using Sketch, Figma allows you to import Sketch files into your Figma account. The importer keeps your layers intact and even brings over your symbols as components. You may need to make some small adjustments to components if they don’t convert perfectly but these should be minimal.
Figma has put together a quick guide on how you can import your Sketch files into Figma, so you don't have to start your projects from scratch. They have also put together an article outlining What’s different and Tips for migrating.