Design Systems: Moving Tokens from XD to Figma

Problem

Working on teams migrating from Adobe XD to Figma (especially as XD is now deprecated into "maintenance mode"), I've found the need to move design tokens to Figma.

A simple setup screen showing two named variables for colors

Color hex codes generated by XD — XD gives us simple CSS variables, each with a Hexadecimal code.

To simplify, Let's say we only have a couple of variables/tokens set up. In reality, we would have many more.

When we export from Adobe XD, it generates CSS and uses Hex codes.

How do we transform these values into Figma variables?

First Steps at a Solution

We need to transform the standard CSS into a JSON format which ready-made importer tools can accept. I've used any number of online tools to do so, and also to translate hex codes into RGBA in case there's any Alpha information.

Our new JSON values — Our new JSON file acts as an interchange format, so that we can import the variables into Figma. Note that this format also supports multiple modes.

fdsafads — Here I'm using a plugin called Variables Pro to facilitate the import.

Now we merely need to import the JSON using one of many plugins which allow us to easily do so.

***Note that because XD does not support "modes" or any nested values, we may need to do some cleanup once we're in Figma.

Imported into Figma successfully — Our Figma file now has the same variables as our XD file. Are we done? Not quite.

Continuing Efforts

We've moved values over to Figma, but we're not actually done. We'll likely need to establish nested values and modes as well.

And what about components? There isn't a perfect way to bring each component over from XD without manual cleanup, so we may need to spend significant time on organization and refactors.

But importantly, we've brought over values! Now, the work of maintenance and improvement can begin.

More Work

REAL ESTATE

Increasing Conversions by 100% via Highly Usable Interfaces

Designing a modern web experience for buyers, sellers, agents, community members, and, of course, for the business.

THINK TANK

Leveraging User Research to Help Clients Make Decisions

We employed tree testing to provide evidence of the most effective new I.A. for a client's site.

HEALTHCARE

Creating a better ZIP code search for patients

When patients search for a doctor, using their ZIP code, is a centerpoint based on a bounding box really the best approach?

NONPROFIT

Helping parents and teens evaluate sports for their children

How do people know which sports may be most beneficial for their teenagers to play? And how might they customize rankings based on what is important to them or their family members?