Skip to main content
British Red Cross homepage

Designers Get Started Guide

Using the Design System in your projects

This guide helps you get started using our the British Red Cross design system in Figma. It explains how the design system is structured, how to use the FIgma library correctly, and the best practices that help maintain quality, accessibility and consistency across our digital products.

Introduction to the Design System in Figma

The design system is available as a Figma Library and is built around three core areas:

  • Foundations - Colour, typography, spacing, grids, iconography and other base styles.
  • Components - reusable elements like buttons, form fields, cards, accordions and more.
  • Patterns - common approaches to user tasks, such as navigation, search or content layouts.

Before starting a new design, make sure the  Design System Library is enabled in your Figma file.

How to Use the Figma Library

Enable the Library

  • Open your Figma file
  • Go to Assets → Library → Switch on the British Red Cross Design System
  • Once enabled, all components, variables and styles will be available to use

Use Components, Don’t Detach Them

  • Insert components directly from the library
  • Avoid detaching components unless there is a very specific, documented reason
  • If a component doesn’t meet your needs, contact the design system team rather than modifying components locally
  • Using components as provided ensures updates and accessibility improvements are passed on automatically

Use Styles Consistently

  • Use text colour, spacing and effect variables from the library
  • Do not create custom colours, test styles, or effects unless agreed with the design system team
  • Consistent use of variables ensures accessibility, maintainability and predictable behaviour across products

Need Help?

If you have questions, need support, or want to suggest improvements, please contact the design system team by raising a support ticket.