Prototyping

Create and iterate on rich and responsive prototypes to test your assumptions.

Contents

1. Figma
2. HTML

Figma

In the early stages, Figma can be used as a prototyping tool.

Create a copy of the National Archives base Figma document to start designing your pages.

HTML

Use the GOV.UK Prototype kit to create rich, interactive and responsive prototypes.

The National Archives frontend includes support for the GOV.UK Prototype Kit. You can use the supplied components and styles with the prototype kit to make prototypes that look like National Archives services.

Create a new National Archives prototype

1. Create an empty directory mkdir my-new-prototype
2. Enter the new directory cd my-new-prototype
3. Use npx govuk-prototype-kit create to create a new prototype project
4. Install the frontend styles with npm install @nationalarchives/frontend
5. Run npm run dev to start up the prototype kit
6. Visit localhost:3000 in your browser to see the prototype

Adding custom styles

1. Create a new SCSS file in app/assets/sass called custom.scss (or whatever you prefer)
2. Create a new layout in app/views/layout called base.html (or whatever you prefer) which extends the National Archives prototype kit layout
3. Set a default theme (see theme colours) and themeAccent (see accent colours)
4. Link in your custom CSS file
5. Ensure new pages extend your new layout with {% extends "layouts/base.html" %}

Example layout

{% extends "nationalarchives/templates/layouts/_prototype-kit.njk" %}

{% set theme = "dark" %}
{% set themeAccent = "yellow" %}

{% block pageTitle %}My Service - The National Archives{% endblock %}

{% block stylesheets %}
  {{ super() }}
  <link href="/public/stylesheets/custom.css" rel="stylesheet" type="text/css" />
{% endblock %}

Using the components in your prototype

The National Archives components can be included in your prototype using the templating language Nunjucks.

Examples are given in the components section. Each component example shows all the Nunjucks options available to that component.

{% from "nationalarchives/components/button/macro.njk" import tnaButton %}

{{ tnaButton({
  text: "Button",
  href: "#"
}) }}