Design System

In Development

Designers

Design is the driving force behind government digital products, shaping user experiences and creating a unified look and feel. By incorporating the Design System, it ensures that services are user-centric, accessible, and cohesive.

Figma is used as the primary design tool for building the system. Design tokens are synced from code and stored as variables, alongside tokens, there are components and assets which are maintained within Figma libraries and files. These libraries and assets are available to any team within government who would like to utilise the design system for their projects. To get access, contact the design system team.

Getting access to Figma

Visit Figma.com and use your government email address to either create an account or sign in. With an account, you will then be able to contact the design system team to gain access to the libraries and assets.

Using styles

All of the foundational elements, like colour, typography and spacing are stored as variables, which populate within the properties panel. These are used alongside the documentation guidelines to create designs on the canvas.

Using components

Components live in the assets panel. Search or scroll to locate the component you need, and drag it from the panel onto the canvas. Components can be customised through the properties panel.

Components should not be detached. If a component is not meeting the required need, reach out to the system team for guidance.

Managing updates

As the design system libraries are updated, a notification will prompt users to review or dismiss component updates. This should be reviewed, alongside the communications available from the design system team, as some updates may cause breaking changes to your designs.