Skip to content

Commit

Permalink
docs(figma guidance): guidance updates and add alt text
Browse files Browse the repository at this point in the history
  • Loading branch information
@murrlipp
murrlipp committed Dec 10, 2024
1 parent 803fffb commit 5052ddc
Showing 1 changed file with 33 additions and 20 deletions.
53 changes: 33 additions & 20 deletions docs/prototyping/use-figma-ui-kit.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,63 +9,76 @@ eleventyNavigation:
excerpt: "Using the MoJ Design System Figma Kit."
---

The [MoJ Design System Figma Kit](https://www.figma.com/design/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?node-id=20-17040) enables designers to create consistent designs in Figma. This guide explains how to access the Figma Kit and keep it up-to-date.
The [MoJ Design System Figma Kit](https://www.figma.com/design/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?node-id=20-17040) helps designers use Figma to create designs that are consistent with one another. This guide explains how to access the Figma Kit and keep it up-to-date.

## If you work for MoJ Digital

3 Figma libraries are active by default for Figma users in MoJ Digital:
There are 3 Figma libraries for Figma users in MoJ Digital. These are activated by default in all new Figma files:
- MoJ Figma Kit
- GOV Figma Kit
- GOV & MoJ Styles

The MoJ Design System team maintain Figma Kits for the GOV.UK and MoJ Design Systems so that Figma prototypes can benefit from centrally maintained updates. The libraries are kept separate to make it easier to understand which design system each building block comes from.

This comment has been minimized.

Sign in to view

Copy link
@murrlipp

murrlipp Dec 10, 2024

Author Contributor

@helennickols I wasn't sure if you were recommending we remove the 2nd line, but it feels superfluous, so I'm happy to.
The MoJ Design System team maintains Figma Kits for the GOV.UK and MoJ Design Systems. This enables Figma prototypes to benefit from centrally maintained updates.

Do not use the <a href="https://www.figma.com/community/file/946837271092540314">GOV.UK Design System Figma community file</a>. It's not updated or maintained by anyone.
<div class="govuk-inset-text">
Do not use the <a href="https://www.figma.com/community/file/946837271092540314">GOV.UK Design System Figma community file</a>. It's not updated or maintained by anyone.
</div>

### Check if the Figma Kits are active in your file

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

2. Select 'Assets' from the left-hand side panel and then the book icon.
<p><img src="/assets/images/figma-guidance-assets-menu.png" style="border:none" alt="x"></p>
<p><img src="/assets/images/figma-guidance-assets-menu.png" style="border:none" alt="A cropped view of the sidebar 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."></p>

2. Look under '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.
<p><img src="/assets/images/figma-guidance-default-libraries.png" style="border:none" alt="x"></p>
3. Look under '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.
<p><img src="/assets/images/figma-guidance-default-libraries.png" style="border:none" alt="A 'Manage libraries' modal window with a sidebar 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."></p>

3. If the 3 libraries do not appear, go to 'Browse libraries' in the modal sidebar. Then select 'Recommended' (it has a light bulb icon).
<!-- <p><img src="/assets/images/figma-guidance-recommended-libraries.png" style="border:none" alt="x"></p> -->
4. If the 3 libraries do not appear, go to 'Browse libraries' in the modal sidebar. Then select 'Recommended' (it has a light bulb icon).

4. Hover over each library and select the 'Add to file' button.
<p><img src="/assets/images/figma-guidance-recommended-libraries-hover.png" style="border:none" alt="x"></p>
5. Hover over each library and select the 'Add to file' button.
<p><img src="/assets/images/figma-guidance-recommended-libraries-hover.png" style="border:none" alt="A 'Manage libraries' modal window with a sidebar 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."></p>

3. Select 'This file' in the modal sidebar. You should now see 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.
6. Select 'This file' in the modal sidebar. You should now see 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.

### Get updates from the Figma Kit

When the Figma Kit is updated, you’ll be notified in Figma. To check for updates:

1. Go to a Figma design file
2. Select 'Assets' from the left-hand side panel and then the book icon.
2. Select 'Updates' from the sidebar. Underneath the text saying who published the change and when, you'll see a short summary of the changes made. This is where information about 'breaking' changes will be communicated.
<p><img src="/assets/images/figma-guidance-update.png" style="border:none" alt="x"></p>
3. Select 'Updates' from the sidebar. Underneath the text saying who published the change and when, you'll see a short summary of the changes made. This is where information about 'breaking' changes will be communicated.
<p><img src="/assets/images/figma-guidance-update.png" style="border:none" alt="A 'Manage libraries' modal window with a sidebar 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'."></p>

4. Either select the 'Update all' button, or select 'Update' for each component you want to update.

3. Either select the 'Update all' button, or select 'Update' for each component you want to update.

---

## If you work outside MoJ Digital

### Download and use the Figma Kit

1. Open the [MoJ Design System Figma Kit](https://www.figma.com/design/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?node-id=20-17040).
2. Select the Figma logo at the top of the left-hand sidebar and go to File > Save local copy.
<p><img src="/assets/images/figma-guidance-download-kit.png" style="border:none" alt="x"></p>
<p><img src="/assets/images/figma-guidance-download-kit.png" style="border:none" alt="A cropped view of the sidebar 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."></p>

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

### Manually update the Figma Kit

1. Every so often, check the live [MoJ Design System Figma Kit](https://www.figma.com/design/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?node-id=20-17040) file for updates.
2. If updates are showing in the kit, save a local copy of the latest version of the Figma Kit.
4. Reload it into your Figma workspace as a library.
5. Open your design files, and use the [swap libraries](https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-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](https://help.figma.com/hc/en-us/articles/360039150413-Swap-components-and-instances) individually instead.
3. Reload it into your Figma workspace as a library.
4. Open your design files, and use the [swap libraries](https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-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](https://help.figma.com/hc/en-us/articles/360039150413-Swap-components-and-instances) individually instead.



## Help improve the Figma Kits

The MoJ Design System team would like to hear:

- if a GOV.UK or MoJ component is missing from the Figma Kits
- if a Figma component isn't working properly
- if you find a mistake on a Figma component (for example, the wrong font weight or spacing)

You can [contact the MoJ Design System team](/help) to give us your feedback.

0 comments on commit 5052ddc

Please sign in to comment.