Understanding Canvas

Canvas Libraries

Using Canvas will help you to design more efficiently and effectively, while speaking the same language as your developers. Canvas has been specifically designed to bridge the gap between these two disciplines by mapping the visual stylings of libraries in Figma with the actual code in Canvas Kit and Canvas Mobile.

The components in the official Canvas design libraries and Canvas code repositories have been created to be as universal, flexible and scalable as possible. This means they can be of most value to the most amount of teams using them.

Components are assembled using Canvas tokens, which are consistent preset stylings used in both Figma design libraries and code libraries alike. Think of these like the DNA that makes Workday products look and feel like they’re part of the same family.

Supported Design Libraries

The Canvas Design System team supports and maintains a number of libraries in Figma. We’ve created a rule around our libraries: if it exists in our library, it is built in code. This is to help you design and communicate with your engineers more effectively and ensure you feel confident that whatever you design can be built in code.

Enabling Libraries

When starting to design with Design System elements, simply toggle on the appropriate Canvas Libraries in Figma. Toggling on these libraries will allow you to search for and use design system elements with ease.

Upgrading Canvas Libraries

Canvas versioning improves communication between design and development teams during collaboration and handover, allowing all parties to work in sync. The process enables Figma users to upgrade their Figma files to a newer version of the Canvas Web Figma library when they need it through an automated process that only takes a few minutes to complete.

Before upgrading, it is recommended to review the updates made in each version to be informed about any changes and appropriate actions can be taken to amend a working file. Designers and developers on the same team should be using the same version of Canvas. discuss this before upgrading to a newer version of the Canvas Web Figma library, and vice versa, to align on what version the team will be building with.

From there, making the upgrade is simple. Follow the steps outlined below to perform the upgrade using Figma’s swap library feature. This is an automated feature that will replace components in one version for its equivalents in another version. Upgrading will typically not override any settings or custom text in a file, except in the event of a breaking change, which may occur when updates are being made to a specific component as part of a major release.

Library versioning empowers teams to control when and how they upgrade to the next version of the Canvas Web Figma library. It enables the entire team to work together using the same major versions of the Canvas Design System. Upgrading to a new library version is quick and easy, but there are things to consider before doing so.

1. Locate the file you want to upgrade.
2. Create a duplicate of the file or save a version of if.
3. Open the file you wish to upgrade.
4. Go to the assets panel.
5. Open your team library (book icon).
6. Select the current Canvas library used in the file.
7. Select the ‘Swap Library’ button.
8. Choose the latest library to swap to.
9. Click the ‘Swap Library’ Button again.
10. Wait for a confirmation from Figma.

To confirm if the upgrade was successful, check the ‘Used in this File’ section in the files assets panel. Canvas components from the latest version are displayed on a green background and the component labels and descriptions will display the version number. Use these indicators to confirm if the upgrade was successful.

Libraries can be set to persist in your Figma Teams projects by an admin, this will help reduce the number of unwanted components in a files asset panel. Contact the team’s admin so the team’s preferred libraries can be used across all files. To do this, follow the steps outlined below.

1. Click on your Team in Figma.
2. Go to the Settings tab.
3. Select ‘Enable Libraries for all team files’
4. Turn off libraries your team isn’t building with.
5. Turn on the libraries your team is building with.

The latest version of Canvas will receive minor updates and bug-fixes to improve the version you’re building with. Please continue to accept these updates as they will not change the version of Canvas you’re building with.

Custom Component Libraries

Canvas Libraries are not the only shared libraries available for you to use. In fact, we encourage teams to use other team’s custom component libraries!

Learn more about Extended Systems and Custom Component Libraries.

Canvas Components

Canvas Components in our Figma libraries are designed, built, and QA’d to ensure flexibility and efficiency when you are designing. Each component references Canvas Tokens and Assets and is built using other Canvas Components when appropriate. Our mission is to provide you with high quality flexible building blocks so you may efficiently build a diverse set of cohesive Workday experiences.

Identifying Canvas Components

The Asset Panels can feel very overwhelming when searching for what you need. To make searching and identifying Canvas Kit Components easier, we’ve assigned a visual signifier, a Watermelon 300 background color, to help you quickly identify the most up-to-date version of that component.

We’ve also added descriptive tooltips to all our components to specify which platform they are built for. To access this information, simply hover over the component of interest. You can also see this information in the right-hand panel when the component is selected in your artboard.

Searching for Components

Browse, search, and drag and drop components from the Assets tab.

Auto Layout and Variants

Most of our components are built with auto-layout and as Variants. Selecting a component built with Variants will show you the properties located in the right panel.

Auto Layout

Auto Layout helps your designs in Figma to behave more like working code does. This is great when you need to add new items in a list, accommodate longer text strings, or maintain alignment as your designs resize. Canvas components are set up in this way, so they will adapt depending on their size.

Variants

Variants introduces a new way to group and organize variants of the same component. This reduces the overall number of components, and makes components more intuitive to use. Canvas has many components set up this way already, so changing the states of a button or other components can be achieved more easily.

To learn more about Auto-Layout and Variants, check out these resources from Figma auto-layout and variants.

Canvas Spaces

These are projects or groups of projects in Figma that help us organize Canvas resources so they’re easy to find. Canvas Web and Canvas Native Mobile work exist under the “Canvas” or “Canvas Internal” teams.

Canvas Libraries

The Canvas libraries are the spaces to provide the designers and Product teams with all the Design System elements that are ready to be used. If it exists in the library, it is built (code) already.

Canvas Specs

Canvas Specs are the spaces to provide the Engineering teams with the final solutions coming from the work done in ‘Playgrounds’.

Canvas Playgrounds

The Playground is the space to explore new ideas, design, iterate and collaborate on new or existing Tokens, Assets, Components and Patterns. Every designer/team works in different ways. This space doesn’t aim to change this, but to organise and facilitate the visibility of the work by creating a single common place where to work before building and documenting.