Skip to main content

Prototyping Setting up Figma prototypes

Figma Kits help people to create designs that are consistent with one another. They are maintained by the MoJ Design System team.

Contents

If you work for the Ministry of Justice

3 Figma Kits are automatically added to all Figma files in the MoJ:

This enables Figma prototypes to benefit from centrally maintained updates.

Do not use the GOV.UK Design System Figma community file. It's not updated or maintained by anyone.

How to check that the Figma Kits are active in your file

  1. Open any Figma design file in the app or a browser.

  2. Select ‘Assets’ from the side navigation and then the book icon.

A cropped view of the side navigation in the Figma app, showing The Figma logo, the filename 'Untitled', the file location 'drafts', the 'Files' and 'Assets' tabs, an icon showing an open book, and a search bar. The 'Assets' tab is selected.

  1. Look under the heading ‘Libraries added to this file’ If there’s a list of the 3 libraries (GOV & MoJ Styles, GOV Figma Kit, and MoJ Figma Kit) the Figma Kits are active. You do not need to do anything else.

A 'Manage libraries' window with a side navigation menu showing a 'This file' tab selected. The content in the main pane is in two sections: 'Assets created in this file' and 'Libraries added to this file'. Under 'Libraries added to this file' there are three libraries: 'GOV & MoJ Styles', 'GOV Figma Kit' and 'MoJ Figma Kit'. Next to each, there is a 'Remove' button.

  1. If the 3 libraries do not appear, go to ‘Browse libraries’ in the side navigation. Then select ‘Recommended’ (it has a light bulb icon).

  2. Focus on each library and select the ‘Add to file’ button.

A 'Manage libraries' window with a side navigation menu showing a 'Recommended' tab selected. The content in the main pane shows the heading 'Recommended libraries' and the text 'Your admins suggest using these libraries'. Underneath there is another heading reading 'Recommended by Ministry of Justice', with three libraries shown below: 'GOV & MoJ Styles', 'GOV Figma Kit' and 'MoJ Figma Kit'. 'GOV & MoJ Styles' is being hovered over and has an 'Add to file' button over it.

  1. To check that the files have been added, select ‘This file’ in the side navigation. You should now see the 3 libraries: GOV & MoJ Styles, GOV Figma Kit, and MoJ Figma Kit. This means the Figma Kits are active. You do not need to do anything else.

How to get updates from the Figma Kits

When the Figma Kits are updated, you’ll be notified in Figma. You can also check for updates:

  1. Go to any Figma design file which has at least one library activated.
  2. Select ‘Assets’ from the left-hand side panel and then the book icon.
  3. Select ‘Updates’ from the side navigation. This shows a change summary, the author and date, and any ‘breaking’ changes.

A 'Manage libraries' window with a side navigation menu showing a 'Updates' tab selected. The content in the main pane shows the heading 'Updates from Test library', a line of text 'Published by Murray Lippiatt 4 minutes ago', and another line of text 'Updated 'Date picker' component: added hover states to calendar numbers.' Underneath this is an image of the date picker component with 'Date picker' and a button labelled 'Update' next to it. At the bottom of the window are a toggle switch labelled 'Show updates for all pages', and a button labelled 'Update all'.

  1. Either select the ‘Update all’ button, or select ‘Update’ for each component you want to update.

If you work outside the Ministry of Justice

How to download and use the Figma Kits

  1. Open the Figma Kit you want to download and use:
  2. Select the Figma logo at the top of the left-hand side navigation and go to File > Save local copy.

A cropped view of the side navigation in the Figma app. The Figma logo has been selected and a menu has opened. The 'file' submenu has been opened and 'Save local copy...' is being hovered over.

  1. Add the downloaded file into your project, publish it as a library, and use it in your files.

Manually update the Figma Kits

  1. Every so often, check GOV & MoJ Styles, the GOV Figma Kit and the MoJ Figma Kit for updates.
  2. Save a local copy of the latest version of the Figma Kit you want to update.
  3. Reload it into your Figma workspace as a library.
  4. Open your design files, and use the swap libraries feature in Figma to replace all references to the outdated version of the MoJ Figma Kit. You can only use ‘swap libraries’ with a paid Figma licence. If you do not have one, swap components individually instead.

Help improve the Figma Kits

The MoJ Design System team would like to hear about:

  • GOV.UK or MoJ components missing from the Figma Kits
  • Figma components which do not work properly
  • mistakes in Figma components (for example, the wrong font weight or spacing)

You can contact the MoJ Design System team to give us your feedback.