Faster, more effective design and development with the Emulsify UI kit

Design tokens are like shorthand labels for the recurring design choices in a design system’s look and feel. Instead of using hard-to-understand values like color codes, they have simple, descriptive names that make everything easier to understand and use. They are becoming the dominant building blocks of modern website production. In essence, design tokens are the elements of your website’s user experience expressed in data

For example, if your site’s color palette includes 10 shades of red along with two grays, those colors each have a hex value. Those values make up a design token. The spacing on your site, its typography, or any other element of your user interface are also design tokens

You can then bring these tokens together into clusters that also become design tokens. Using a plugin, your team can then export design tokens from Figma in a standard data format (JSON) to a code repository where they can be transformed into code for developers. Then, when you’re working with the right design system, you can create design tokens for each component as well.

With Emulsify, your team gains a suite of open-source tools to facilitate creating a design system that outlines your site’s components along with their usage guidelines. But you also ensure a more collaborative process between your designers and developers by creating individual design tokens within your site’s components

Emulsify allows your team the flexibility to override how your components behave in context. For example, imagine the “summary” field in a text box is built to have a white background. But then your design calls for it to also support secondary summary text with a dark background. Instead of having to manually make that change, your developers can use the Emulsify UI kit to update the value for the component design token

These design tokens allow changes to your project to be reflected to both your design and development team. Emulsify then ensures site updates are reflected in the Figma file and the corresponding code repository. By updating the tokens for shared components, a single change to your UI is quickly reflected site-wide

The Emulsify UI kit’s connection with Figma offers the following benefits:

Accelerates web production

The fundamental purpose of the Emulsify UI kit is to speed up production on the features your website needs. Instead of starting from scratch, your developers gain a 50-yard head start

As designers export these tokens, they arrive at a GitHub repository with tokens represented as JSON files. Depending on your needs, developers can then transform the data into useful code. For example, a design tokens group at W3 is working to define a shared token format that will maximize their use. Amazon’s Style Dictionary offers similar flexibility

Your developers can then apply your project’s design tokens as CSS custom variables, JavaScript, or iOS and Android. Whatever your choice, each design token provides developers with the information they need to create a component that supports every use on your site

Here’s a common scenario: Every website incorporates a button. Before developers can create that button in code, they need to know every variable for its use. What does the button look like when it’s clicked? How does it respond when a user hovers over it? As designers define those details, Figma updates the UI kit and the token.

Improves component quality and accessibility

Emulsify makes sure every component on your site provides an accessible experience for all audiences. In the rush to update your site, your developers or designers may launch new features that fall short of WCAG standards. Retrofitting these elements is costly, and it limits your website’s audience while also leaving your organization vulnerable to legal action

With Emulsify, your teams gain real-time accessibility testing through Storybook as they develop new components. Plus, your developers can run accessibility tests at the command line to ensure your site consistently conforms to the highest standards. Given the stakes involved, the addition of built-in accessibility testing delivers valuable peace of mind to your organization

Additionally, the Emulsify UI kit improves the quality of your components by streamlining visual regression testing. When developers change your code base, they have to take screenshots of your site and make sure components of your design haven’t changed. If your site has hundreds of unique pages, this process grows more tedious — and expensive

The Emulsify UI kit enables designers to push spacing or color changes to the repository to reflect any new variables. When your developers want to verify site changes, they can create a single-view “sticker sheet” of the affected components. If a component doesn’t look right, they can repair it quickly and across the entire site through the Emulsify design system.

A core advantage of Emulsify and its UI kit comes down to its roots. At Four Kitchens, Drupal and the community-driven values of the open source community are at the foundation of all we do

When you use the Emulsify design system, you don’t have to worry about components being held back for a paying tier or to protect some proprietary knowledge. Instead, you gain a free platform that’s supported and improved by users. We want to see Emulsify continuously grow and improve

Consequently, as powerful and efficient as Emulsify is for managing every decision about your website, it’s only going to get better. If this sounds like a design system that will suit your organization’s needs, we should talk about what’s next.