Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Set up a Figma prototype

Use the DHCW Design System in Figma to create prototypes for your service. There are different ways to access the Design System, depending on whether you work for DHCW.

If you work at DHCW

You can request access to the DHCW Figma workspace and use the shared DHCW Design System library in your design files. This gives you the latest styles and components, ready to drag and drop into your designs.

The User-Centred Design team manages the workspace and can help you get set up. Email dhcw.ucd@wales.nhs.uk to get started.

Information:

If you work at DHCW, use the shared library rather than the Figma Community file. This means you'll get the latest Design System updates.

How to add the Design System library

  1. Open the Figma design file you want to use.
  2. Select Assets, then select the Libraries icon.
  3. Find the DHCW Design System under Recommended.
  4. Select the library, then select Add to file
  5. The Design System components will now be available from Assets.

If the library has already been added to the file, you do not need to do anything else.

Get library updates

Figma will notify you when updates to the library are available. You can also check for updates:

  1. Open a Figma file that uses the DHCW Design System library.
  2. Select Assets, then select the Libraries icon.
  3. Select Updates to see the changes available.
  4. Select Update all, or choose the individual components you want to update.

If you work for another organisation

Use the DHCW Design System Community file to create designs and prototypes for NHS Wales services.

You need a Figma account to use the Community file. When you open it, Figma creates a copy of the Design System in your personal workspace. Changes you make to your copy will not affect the original.

How to use the Figma Design System

Make a copy

  1. Go to the DHCW Design System in Figma Community.
  2. Select Open in Figma.
  3. Sign in to Figma, or create an account if you do not already have one.
  4. If you use more than one Figma account, choose the account you want to use.
  5. Figma will create a copy of the Design System in your drafts.
  6. You can rename or move the file into the Figma project where you are working in.

Use the Design System in your designs

Open your copy of the Design System to explore the available components and styles.

You can copy components, such as buttons, form fields and navigation, into your own design files and change their content to suit your service.

Keep your copy up to date

Your copy is not connected to the original DHCW Design System, so it will not update automatically.

Check the DHCW Design System page on Figma Community for newer versions. When a new version is available, open it in Figma to create a new, updated copy.

If you use your copy as a library, you may need to update existing designs to use components from the new version.

Back to top