Frequently Asked Questions

Answers to those common questions about Canvas.

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.

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

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 not available.

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+

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.

Components

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".

Patterns

What are the best practices for using Truncation?

Each use case for truncation or overflow can be unique. Check out our article on the overflow pattern for more information.

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.