Skip to content

Latest commit

 

History

History
49 lines (26 loc) · 2.21 KB

File metadata and controls

49 lines (26 loc) · 2.21 KB

GOV.UK Design System Flow Diagrams for Figma.

A resource to help teams show the interaction design of services.

How to get your copy of the Figma file

You create a copy of this Figma file by either:

What is it?

Screenshot of the Figma file

For a detailed introduction to this resource you can read my blog post: GOV.UK Design System Flow Diagrams for Figma.


How to use

  1. Once you have created a copy of the Figma file, rename it and create a new 'page' within Figma.

  2. Draw a frame for your flow diagram (You can resize later if you need more space).

  3. Open the 'resources' menu (SHIFT + I)

    2023-01-17 at 11 44 31

  4. Choose 'Flow components'

  5. Then choose a component to add to your frame. Clicking it will add it.

    2023-01-17 at 11 43 02

  6. Finally you can change the content of the component by finding the component property inspector panel (typically on the right side of your Figma window).

    2023-01-05 at 21 19 26

Changing the 'Page type' will show or hide properties you can change.

Repeat this process for other components and use the arrow component to connect them.


This is a community resource - The GOV.UK Design System team are not responsible for this resource and they cannot support you with using it.

If you have questions or need support you can add an issue to this repository and I will respond as soon as I can.