Customizing Canvas

Overview

In this Customizing Canvas section you’ll find information to help guide you and your team in creating custom Canvas components, and custom Figma libraries.

Canvas is a collection of building blocks such as components, assets, and tokens which have been created to work universally across multiple different use cases. These building blocks can be used as they are in many scenarios, but in some cases, more tailored solutions are required.

Check below for some common scenarios when customizing Canvas is required.

Common Scenarios

1. I don’t see what we need in Canvas right now

What you need might be not be available right now, but on the way in an upcoming release.

Check in with #canvas to see what’s on the roadmap.

If it’s not upcoming, check out our Creating Custom components content to help you and your team create new custom experiences.

2. Another team has a similar component to what we need

If another team has created a custom component that looks to be suitable, it is recommended to reach out to that team. You can look through Anthology, which is a collection of multiple different product Web component libraries. There may or may not be technical limitations to compatibility between how their product is built compared to yours. Check out how Extended Systems of Canvas work for more info on this.

3. We want to improve the accuracy between what we design and what gets built

Check out our content on Creating Custom Libraries in Figma to improve your teams efficiency.

Related Documentation

Create Custom Components

Creating Custom components content to help you and your team create new custom experiences.

Create Custom Libraries

Creating Custom libraries to create and maintain custom components and assets specific to your product.

What is a Custom Component?

Custom components are new interface elements for your product’s specific needs, which are created using Canvas. These can vary in complexity depending on the use case. Custom components are generally designed and built by the team who needs them for their product area.

Creating Custom Components With Tokens and Components

Before You Start

Firstly, check the Canvas Kit Storybook, Mobile Playgrounds (coming soon!) and Canvas Figma Libraries to see if something similar already exists. When starting to create new custom components it’s important to align with how things are designed in Canvas to ensure you’re making the most of our design system and improving efficiency with your engineers. Components are assembled using Canvas Tokens, which are consistent preset stylings used in both 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.

Ideally, using the existing Canvas components will be the most efficient solution, but if you’re creating something new, it’s important to maintain this connection with the DNA that makes up the Canvas Design System. You can compose existing Canvas components to make more complex ones. Using existing Canvas components and tokens in your design will make your engineering team’s work more accurate and efficient.

Always use Canvas Tokens

To inform the design decisions, such as:

Before you kick off creating new components, be sure that you’re connected to the correct Canvas libraries in Figma. This will ensure you’re getting the latest supported version of buttons, inputs, popups, etc. This is especially important as time goes on. Using the Figma assets panel, you can switch on and off libraries that are available.

Related Documentation

Create Custom Libraries

Creating Custom libraries to create and maintain Figma libraries of custom components and assets specific to your product.

Extended Systems

Learn more about Extended Systems - what they are and how to build your own.

What is a Custom Component Library?

These are a custom Figma library maintained by you and your team that’s dedicated to your product area. The components in your custom library can be built on existing Canvas building blocks (Canvas tokens and Components), so they are in keeping with the styling and behaviours that we see throughout Workday products. Organizing your custom components into a product specific Figma library gives you the power to make updates from a single source of truth and have them roll out across dozens of screens and flows easily.

Benefits for Design Teams

Benefits for Engineering

Benefits for Quality Assurance

Quality assurance can refer to the components in the Figma design library to ensure what gets built is accurate in terms of styling, spacing, padding, margins etc.

How to Create Your Own Custom Figma Library

The screens and flows we design can feel quite complex. But even the most information-heavy screens are just a collection of smaller things compiled together in a logical way. If you look across the flows in your designs it’s likely that several components and patterns show up in more than one place. It makes sense to reuse the same UI elements when we can. So having the ability to make updates across those screens and flows in one place is something you’ll thank your future self for.

The Canvas team has created a Figma starter kit file to help you to create your own custom component library and improve your teams workflow.

Web Starter Kit Overview

This Figma template includes:

Get the Figma Starter Kit

Related documentation

Extended Systems

Learn more about Extended Systems - what they are and how to build your own.