Design Tokens are quickly becoming the industry-wide method to organize the lowest level of a visual design. In order to make Drupal the first design system native CMS and modernize our rendering and display building layers, we need to support them in Core.
No hard prerequisites but being familiar with those concepts may help:
- Design Systems methodology
- a design tool like Figma
- CSS variables and scope
After SDC in 2023 for UI Components and the Icon API in 2024, having an API to make Drupal understand and use design tokens is in continuity of making Drupal a design system native CMS.
Design tokens is not a new concept but it became a trend during the last 2 years with more and more people using design systems on their websites and with designers tools enhanced capabilities.
Instead of adding a new drupalism, we are leveraging the new W3C standard format to be compatible with a wide ecosystem of designer and developer tools, introducing the first fully end-to-end automatable design workflow in Drupal.
During this session, we will see:
- what is a design token, what it is not, some pitfalls of understanding
- how it could be used on a Drupal website
- the links with other design system artifacts
- showcase the work done on the Core issue to provide a design token API
- What is a design token
- What is not a design token
- Different types of design tokens
- How it translates on a website
