Frequently Asked Questions

General Design System

What is a design system?

Check out the Getting Started section to learn all about the Canvas Design System.

Why do I need a design system?

Design systems eliminate the need for teams to start from scratch when designing a new product or feature by providing them with the core building blocks that are reusable and quickly scalable for a variety of product use cases.

Check out the Getting Started section to learn all about the Canvas Design System.

What’s available to me in Canvas?

This depends on the technology that your team is using to build your product. If your product/team is able to use React components, then everything in Canvas is freely available to you:

The contents of Canvas Kit Web are supported and ready to use now. The tokens, assets and components on this site will give you further information on each.

For designers, the components in Canvas Web Figma Library are ready to use now in your design files. They coincide 1:1 with what’s in Canvas Kit Web.

If your product/team is only using metadata-driven UI, then you can only make use of what is provided through the XO platform. This will be a mix of Canvas Kit Web components, and custom components styled to look like Canvas.

Check out the XO Layouts Home Page for an overview, and visit the Dev Hub task in Workday to see them in context.

Designers can reference the Figma components in the Generated UI and WD Components

Note: the above resources contain most, but not all components that can be displayed with the Standard Tooling platform.

Need more details? Reach out to the Canvas team on slack.

• #ask-canvas-design
• #ask-canvas-kit

What is the difference between Canvas and Canvas Kit?

Canvas is the name of Workday’s design system. Within Canvas, there are various touch points or sub-products that help designers and developers fully utilize Canvas. Canvas Kit Web, one of those touch points, is the React code library used by developers to implement tokens, assets, and components made available through the Canvas Design System. Canvas Kit can be found on:

• NPM: the code package that contains libraries, necessary for developers to implement Canvas on their products
• GitHub: contains the source code, including revision history and release notes

Usage

What is the difference between Canvas and our Brand Style Guide?

Canvas defines some foundations for both systems (color, space, etc.), but our Brand Style Guide (Workday Brand Central) should be used as the defacto source for any marketing or branding content. Canvas is designed in a way that is intended to be agnostic of the Workday product, but it is most commonly used for product UI.

As a designer, how can I use Canvas?

Check out the Getting Started for Designers section of this site for guidance on understanding Canvas fundamentals and how to create custom components and custom libraries.

As a developer, how can I use Canvas?

Check out the Getting Started for Developers section of this site for guidance on understanding Canvas fundamentals and how to create custom components and custom libraries.

Platforms

Is Canvas only available for web based design?

As of now, Canvas Kit is only available in CSS and React for web. The mobile equivalent of Canvas Kit is currently being built and released. For mobile component updates, please check the component overview table on the Component Overview Page. For unavailable mobile components, a mobile design library is available in Figma for Canvas designers to use. For more information on Mobile, check out the Mobile UX Design Team Google site to understand more about the Native Mobile team.

Responsive layouts and breakpoints?

Canvas is currently working on guidance for responsive layouts, but this has not been finalised yet. In the meantime please contact the Canvas team for more guidance.

While there is no standardisation of breakpoints, we strongly recommend using the following breakpoints to guide your designs. These are based on common device widths:

• Small (Mobile and small tablet): 320px - 767px
• Medium (Tablet): 768px - 1023px
• Large (Laptop and Small Desktop): 1024 - 1439px
• Extra Large (Desktop and Large Desktop): 1440+

How can I learn more about Native Mobile Patterns for Canvas?

As the guardians of consistency across the app, the Mobile UX Design Team need to keep tabs on all native mobile design work being done. If you are doing mobile design work, their team will provide you with a Mobile Design Partner. They will help you understand mobile design patterns and ensure your work integrates cohesively with the rest of the app.

Tokens

Where can I find guidance on Motion and Animation?

Check out our article on Motion for guidance on motion and animation.

Assets

How can I request a new icon or illustration?

Check out our section on contributing tokens for more details about adding icons, illustrations and components to Canvas.

Where can I find Empty State Illustrations in Canvas?

Check out our article on Empty States for guidance within Canvas and the Canvas Assets library for the design artifacts.

Components

Are Prompts available in Canvas?

Not from Canvas Kit. Prompts are only available in WD-Components due to their complexity. Reach out to the #wd-components slack channel for more detailed enquiries.

How can I create Pex Cards?

Pex cards are owned and maintained by the Pex team, outside of Canvas. The Workday Today Card Crafting Google site should help guide you.

What makes a component “Canvas”?

In an effort to help decide what should/shouldn’t go into Canvas we’ve broken down some points around what we think makes a component a prime candidate for the Design System.

Reusable

• It can be used in a wide variety of contexts or products (beyond a single product or product area)
• It’s in use already, or there is a present need for it in multiple contexts
• It’s not similar to another existing component
• It uses Canvas tokens (spacing, color, typography)

Simple

• It is a component, not a “composition” or “pattern”

  A compositional component is a trivial compilation of primitive components into one, for a specific use case (or simply to reduce technical complexity). If too many of these types of components are contributed, they may dilute the core set of the components.

• It does not have a lot of horizontal or nested complexity

  The majority of our components have no more than ~4 levels of nesting. Too much more and it becomes a “pattern”. Within the levels of “component nesting”, there should not be too much horizontal complexity. Things that have too many elements can become very configurable. This configurability often leads to a pattern more than a component.

Agnostic

• It is core UI (e.g. a UI control), not based on a business process (e.g. a recruiting pipeline)
• It does not contain any business logic
• It could be used in any Cloud Platform integration or external product
• The same type of component could fit within other public design systems

Many shared components at Workday are “reusable”, but not necessarily “simple” or “agnostic”.

What’s the difference between WD-Components and Canvas Kit?

Both WD-Components (WDC) and Canvas Kit Web (CK) are shared component libraries that aim to reduce duplication, improve consistency, and simplify UI development.

WDC is generally a more composed library - think of Canvas Kit as lego bricks, and WDC as an assembly of bricks. While both libraries are made of reusable components, Canvas also requires components to be simple and agnostic. Click here to learn more about the Canvas component guidelines.

Both Canvas Kit Web and WDC components can be used by bespoke teams. Currently, XO metadata UI teams can only make use of these projects if the component has been integrated into the Standard Tooling platform.

There are several differences between the two libraries outlined in the table below:

Canvas Kit	WD-Components
Technology: Makes no assumptions Delivers a standalone design system experience (all components should be usable on their own, outside the Workday context) Supports multiple frameworks/platforms Open source/public for exposure and to allow customers to build with Workday Extend	Technology: Makes some implicit assumptions based on the Workday Single Page Application (SPA) Delivers a design that’s in support of the UI platform, which may mean that it does not directly align with Canvas specifications. May contain business logic or platform dependencies Currently focused on React Inner source, no plans to open source
Components: Basic building blocks that are modular and composable to create higher level interactions “Components”, not “compositions” or “patterns” (No more than ~4 levels of “component nesting”) Core UI (e.g. a UI control), not based on a business process (e.g. a recruiting pipeline) Do not contain any business logic Could be used in any Workday Extend integration or external product Could fit within other public design systems	Components: Uses Canvas Kit modular components where possible to form compositional components Can contain proprietary and/or opinionated interactions that we don’t want to release publicly (competitive advantage) Can contain legacy components we must support that we want to exclude from the design system/public offering Compositional components and patterns (groupings of components to reduce duplication that are not a fundamental part of the design system)

You may occasionally find duplicates between the two projects. While our teams work to avoid this, it may be required for two reasons:

• WDC wrapping a CK component to provide Workday-specific behavior.
• WDC providing an alternative to a CK component to provide Workday-specific behavior.

If you come across a duplicate component you should generally start with the Canvas Kit option and move to the WD-Components option if the CK equivalent does not support a Workday-specific use case.

Globalization and Accessibility

Right to Left (RTL) approaches within Canvas?

Canvas Kit Web has RTL detection and will automatically flip the position of the icon in relation to text, but will not automatically flip icons. Not all icons should be flipped and we have enough context to know which, so that part is left up to the developer. We have ways of detecting RTL or LTR so the correct icon could be provided. Reach out to Canvas on #ask-canvas-kit slack channel for detailed queries.