In Figma, you can access:

• Design tokens
• Components
• Patterns

The design system library in Figma aligns with coded components used by developers. Start with design system components for common parts of your service. This helps developers use the matching coded components and reduces custom work.

Start with the design system. Validate your design through user testing. If usability issues arise, or the problem cannot be solved within the system, consider creating a custom solution.

When selecting components, prioritize those with a "goa-" prefix, such as goa-input. These components exist in both design and development. Using them reduces the need for custom development.

Choose shared components whenever possible to maintain consistency and efficiency.

Design system components in Figma and code are built using design tokens.

Use tokens to communicate design decisions clearly. Developers can reference the same tokens in code.

Instead of sharing hex values or pixel adjustments, reference semantic tokens.

For example:

• Colour: --goa-color-info-default
• Spacing: --goa-spacing-m

Using tokens reduces back-and-forth and keeps design and development aligned.

All design system components are available in Figma and in code.

These components are designed to meet WCAG 2.2 accessibility standards.

Avoid detaching components. Instead:

• Use variants
• Show or hide layers within the component

Use #figma for Figma-related issues, including library updates, missing components, broken instances, or component behaviour in Figma.

Use #design-system-support for design system guidance, component usage questions, standards, and implementation support.

Keep your components up to date. Figma will notify you when library updates are available.

Each digital service project folder includes a starter Figma template.

Use this template to:

• Organize your design file
• Support developer handoff
• Help team members navigate files

Helper components are also available. Use them to clearly communicate intent when sharing designs with developers and other team members.