Four Kitchens

Bring design and development together with Emulsify and Figma

5 Min. ReadDesign and UX

This post is co-authored by Randy Oest and Brian Lewis

Website production has always progressed while navigating a broad divide: the line separating visual design and frontend development

When your designer needs to change a component’s color, text size, or any other detail in your style guide, a developer needs to process those changes into code. If your team uses a design tool like Figma, then designers create a sheet that outlines the text sizes, colors, and other elements of the project. Then a developer has to review those choices and begin the tedious process of copying and pasting every update into the codebase

Maybe your team uses a plugin like Zeplin, which provides a handoff of design updates from Figma to your frontend developers. But communication between both sides involving vital details is still a manual process of looking for changes and plugging them into code. It doesn’t have to be that way

Now, through Emulsify harnessing Figma’s design tokens plugin, design and development teams can enjoy an automated communication connection. Emulsify is a suite of open-source tools to facilitate creating your design system, including reusable components and usage guidelines. When you export design tokens from Figma, every decision about your project is recorded, pushed into a repository, and exported to Emulsify as data. Depending on your build setup, any design change can be reflected in your site’s code as soon as tokens are exported

By bringing Emulsify together with Figma, the historic barrier between design and development is blown apart. In this preview of our upcoming presentation at Decoupled Days in New York, we’ll show you how any web project can progress faster and more efficiently than before.

How design tokens streamline digital production

Over the years, the norms of website production have evolved through multiple stages. Some have included the best practices outlined in W3 web standards as well as advances such as responsive design and atomic design. Now we’re entering the era of design tokens

Adopted by design systems around the web and introduced as a third-party plugin in Figma, design tokens gather every decision about a UI into one source. The tokens incorporate details about a component’s visual makeup, such as primary color, secondary color, sizing, and spacing. Figma then allows designers to export the tokens in a standard format (JSON), which can be transformed into values that are building blocks for development. These details can be applied to websites, iOS or Android apps, or any coding environment

Ultimately, tokens are a delivery system that allow information about design decisions to travel from a designer to the corresponding code a developer needs. But the most important aspect comes down to how quickly that information travels. Rather than forcing a developer to comb through information thrown over the wall from design, tokens allow a designer to make changes to a component that are instantly reflected in code

Though still a relatively new technology by development standards, design tokens mark a massive shift in how websites are made.

Emulsify further streamlines the use of design tokens in Figma

Along with streamlining how information is expressed between teams, design tokens establish a connection that works both ways. If you want to change a color in your project, a developer or designer can make the adjustment. When you’re using Emulsify, the update is reflected in the design file and the corresponding code

design tokens
Design tokens branding by Tim Van Damme

Website production requires a certain level of repetition. For example, every site incorporates a button. Before developers can create that button in code, they need to know all the variables around its use. What does the button look like in relation to its background color? How does the button respond when a user hovers over it? What does the button look like when it’s clicked? As designers define those details, Figma updates the UI kit and the corresponding token

When Figma exports design tokens, it delivers the code for all the details about how a button (or another component) should look and behave. Frontend engineers only have to worry about any design detail that is not defined as a token

Rather than working to resolve whatever variables a designer didn’t account for in the UI kit, your developers have all the use cases laid out for them. That way, they’re free to focus on the more challenging aspects of building your site and its features

At its core, Emulsify acts as the glue holding your style guide, component library, and website tools together. Instead of creating and exporting design tokens from Figma and setting it up to work with your system, Emulsify gives you a leg up with a connection that’s already in place

Think of website development as a process that defines how cars come together on an assembly line. Emulsify isn’t that process or even what you drive off the lot—it’s the factory that ensures your teams have all the machinery in place to create what your organization needs to keep moving.

Connecting Emulsify and Figma frees production teams to excel

Incorporating Figma’s design token functionality into Emulsify makes life easier for both designers and frontend engineers. Plus, preventing developers from having to make decisions about building components based on incomplete information reduces design debt. Just as technical debt bogs down site performance, design debt diminishes your site through visual inconsistencies

The information collected in design tokens provides developers with all the choices they need to create a component. Instead of measuring a design element’s spacing by measuring from a comp, a developer can review the spacing variables outlined in the token. Once the code is in place, a designer can approve the results. All the details impacting how your website should look are decided by the right people

By connecting Figma with Emulsify, you enable the specialists working on your project to remain focused on their discipline. Designers make design decisions. And developers make code decisions

When everyone working on your website project focuses on what they do best, your organization is more likely to see the best results. From a design and development standpoint, what could be better than that?