Prototyping
About prototyping with the Design System
You should prototype your service to test with users. Prototyping helps teams explore, test and improve ideas before building a website or service. It allows you to identify problems early, gather feedback from users and stakeholders, and make changes quickly.
Find out more about prototyping on the Service Manual.
The Design System has prototyping kits for Figma and Axure RP.
There is a free tier available for Figma. If you need Figma or Axure RP licenses, check how to buy digital products on the Scottish Government Service Manual.
You can also prototype in HTML using the Design System's plugins for the GOV.UK prototype kit.
Choose a prototyping tool
Start with the simplest prototype that meets your needs. As your design develops, you may need a more realistic prototype to test content, interactions or user journeys.
You can start by sketching designs on paper or by having in-person sessions where you sketch ideas on a whiteboard.
Once you have a design on paper or whiteboard, you can explore and continue to develop ideas in a design tool such as Figma. You may use a coded prototype if the code is important for the design, for example if you need to input text during a user test. You can also use Axure during user testing to input text.
Only use generic dummy data in prototypes. Do not use actual user data or put sensitive information into prototypes.
Figma
You can use Figma at different stages of design work to:
- explore and communicate ideas
- create simple prototypes to test concepts
- design page layouts, screens and graphics
- create detailed screen designs that reflect the final interface
- create interactive prototypes to represent the user journey for testing
Figma helps teams share concepts and gather feedback quickly. You can use Design System community kit components and styles to create realistic prototypes that are consistent with the Design System.
Figma does not natively support text inputs, which can make some user behaviour difficult to represent in prototypes. It also doesn’t allow for code-specific accessibility testing.
Choose this approach when you want to answer questions such as:
- what content and components should appear on a page or screen?
- how would a user move between pages?
- which design ideas should we take forward?
- what will the final service look like?
Coded prototypes
Use a coded prototype when you need to test a service in a realistic way, or if you want to test the code.
The Scottish Government Design System plugin for the GOV.UK Prototype Kit lets you build interactive prototypes using Design System components. Coded prototypes behave more like a real service than design-tool prototypes.
Choose this tool when you want to answer questions such as:
- can users complete their task successfully?
- does the content work in context?
- how do forms, validation messages and service patterns perform in testing?
This approach is often useful before development begins, or when research findings depend on realistic interactions.
Axure RP
Use the Axure RP tool for support for interactive prototypes including native text inputs that you cannot create in Figma. For example, Axure can support form design prototypes with complex branching logic. You will need a professional Axure RP license to use it.
Choose this approach when you want to answer questions such as:
- what happens when different users take different paths?
- how do multiple interactions work together?
Prototyping kit updates
We release regular updates to the prototyping kits. This includes accessibility improvements.
Your local copy does not automatically update. You must download the latest version of the kit to get the latest versions of components, patterns and styles.
Check for updates in the:
How to prototype in Figma
Follow these steps to prototype Design System components and patterns in Figma:
- Find the Scottish Government Design System Kit in the Figma community
- Select ‘open in Figma’ to add the kit to your Figma account
- Publish the library from the assets panel to access the styles and components in your project’s files
Figma prototyping kit file
Download this file if you cannot get the Scottish Government Design System kit from the Figma community.
How to prototype in Axure RP
Design System components and patterns are available in an Axure widgets library. All widgets have styles and interactions built into them. The Axure kit contains the basic components and patterns you need to build and test prototypes of your service. Use the library as a starting point, then adapt it to suit your project.
Follow these steps to prototype Design System components and patterns in Axure RP:
- Install the latest version of Axure RP from the Axure website
- Download the Design System Axure Library from this page
- Select ‘Add Library +’ in the libraries pane
- Select the scottishgovernment_designsystem_v2.1.rplib file to get the Design System widgets
- Click and drag widgets from the libraries pane to the canvas to start designing
Axure RP prototyping kit file
How to prototype in HTML
You can prototype in HTML using the Design System’s plugins for the GOV.UK prototype kit.
Follow the instructions for installing the Design System plugin on GitHub.
We’ll be improving these plugins based on feedback from users. Send feedback by emailing designsystem@gov.scot.