Skip to main content 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

5 Figma Kits are automatically added to all Figma files in MOJ. This enables Figma prototypes to get centrally maintained updates.

Do not download and use any GOV.UK or MOJ Figma files from the Figma Community.

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 5 libraries, 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.UK & MOJ Styles', 'GOV.UK Figma Kit' and 'MOJ Figma Kit'. Next to each, there is a 'Remove' button.

What to do if the 5 libraries do not appear

  1. Go to ‘Browse libraries’ in the side navigation and 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.UK & MOJ Styles', 'GOV.UK Figma Kit' and 'MOJ Figma Kit'. 'GOV.UK & 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 5 libraries. 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 by:

  1. Going to any Figma design file which has at least one library activated.

  2. Selecting ‘Assets’ from the left-hand side panel and then the book icon.

  3. Selecting ‘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 selecting the ‘Update all’ button, or selecting ‘Update’ for each component you want to update.

Non-MOJ staff

How to download and use the Figma Kits

  1. Select the Figma Kit you want to use:
To use the MOJ Figma Kit, you'll need to add all 3 Figma libraries to your project.

  1. Select ‘Open in Figma’.

  2. If you have multiple Figma accounts, you’ll be asked where you would like to open the file. Select the account you would like to open it with. The file will be now be saved in your drafts.

  3. Move the file to the project you’re working on so that it can be accessed by everyone working on the project. Read about moving files in Figma.

  4. Publish the file as a library. Read about publishing a library in Figma.

  5. Repeat steps 1 to 5 for each Figma Kit you want to add to your project.

Manually update the Figma Kits

  1. Every so often, check GOV.UK & MOJ Styles, the GOV.UK 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:

  • components missing from the Figma Kits
  • Figma components that do not work properly
  • mistakes in Figma components (for example, the wrong font weight or spacing)

Contact the MOJ Design System team to give us your feedback.