Prototyping

This guide explains how to use the NHS App prototype. You can use it alongside the NHS App design system to make interactive prototypes that look like real NHS App pages.

Anyone can use the prototype to:

  • try out ideas
  • get feedback from users or people you work with

Before you start

You first need to follow the NHS prototype kit setup guide to make sure you have the tools and software required to run the prototype. This is because the NHS App prototype is a copy of the NHS prototype kit, with added NHS App code and templates.

Download

Once you are setup and familiar with using the NHS prototype kit, you can download or clone a copy of the NHS App prototype on GitHub.

Using components

On the NHS and NHS App design systems, you'll find examples of components like the one below. To use any of these components in your prototype, you can select HTML or Nunjucks, then copy and paste the code into your prototype.

Open this example (Button primary) in a new window 
<button
  class="nhsuk-button nhsapp-button"
  data-module="nhsuk-button"
  type="submit"
>
  Continue
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  text: "Continue",
  classes: "nhsapp-button"
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue

Guides

NHS prototype kit guides will show you how to use the prototype kit, from creating a simple page to building complex user journeys.