Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
Start with the design systemUX DesignersOverviewSetupVerify a bugVS CodeTechnologiesSupported BrowsersVersion update guideQA testingContributeSupportRoadmapUser experience guidelines

Designers

As a designer, you can consume the design system through Figma. Through Figma you can use tokens, components, and page templates.

Overview

The design system provides designers with a library of design tokens, components, and patternsin Figma that are also available to developers in code. Start by using the design system components for common parts of your service so that your developers can also use the coded components.

  1. Start with the design system and validate your design through user testing.
  2. If usability issues arise or a problem cannot be resolved within the system, then consider a custom solution or extending a component.

The tools below will set you up to access the most up-to-date designs and standards:

Figma

The design system tokens, styles, components and page templates are all available to pull into your file in Figma.

When selecting components, prioritize those with a “goa-” prefix in the name such as “goa-input.” These components are available in both design and development, which means that developers can avoid unnecessary custom development.

View the Figma design system library

Design tokens

The components and resources in the design system libraries in both Figma and code are built using design tokens. As a designer, you can communicate design decisions using design tokens, which developers can then use in code.

Save time going back and forth with your developer on hex values and adjusting a few pixels at a time. Instead, reference semantic tokens that the developer can consume.

eg. “The colour is:--goa-color-info-default, the spacing is: --goa-spacing-m".

Components

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

These design system components have all been designed and coded to meet a WCAG 2.1 accessibility standard.

Avoid detaching components when possible. Instead, use the component's variant options or show and hide layers within the component. If a component is not working as expected, reach out via #design-system-support.

Make sure to keep your components up-to-date. You may see a notification in the bottom right corner of Figma when an update is available.

Figma file templates and helper components

A starter template file is included within each digital service project folder in Figma to help provide some initial structure and organization to your design file. This is important for better handoff with developers, and to help others navigate and find what you're looking for in each other's design files.

In addition to these templates , helper components can help clearly communicate your intent when sharing your design with developers, other designers, and other members of your team.

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes