Introducing the Emulsify UI Kit Beta: The Open Source Tool Set for Design Systems

Randy Oest, the Creative Director at Four Kitchens, recently gave a lightning talk at DrupalCon Pittsburgh 2023, introducing the beta version of Emulsify UI kit. In this talk, he provided an overview of Emulsify and how it can be used to create design systems for Drupal and other websites.

Emulsify is an open source tool set that combines storybook, configuration, and other resources to make it easy to create design systems. It was created by Four Kitchens to meet the need for an open sourced component library that could be used to display and interact with components.

The Emulsify UI kit beta includes a Figma file and an open source code repository. The Figma component includes example pages and a robust collection of tokens for sizing, spacing, typography, and more. These design tokens are created using the Figma plugin Token Studio, and pushed to your repository as JSON.

When the design tokens are received by the UI kit repository, we run a series of actions that convert the tokens from JSON into a collection of CSS custom properties. (Alternatively, we could us Sass variables, Less variables, or even JavaScript.) The components take these design token variables and apply them to the CSS.

Overall, the Emulsify UI kit beta is a powerful tool set that makes it easy to create custom design systems for Drupal and other websites. It allows designers and front-end engineers to collaborate closely, making sure that the final product is tailored to the client's needs and purpose.