What you will learn in this lesson#

• Get a broad understanding of approaches to handling design tokens

• Learn what Figmagic is and what it does

Solving the primary issue with technical design systems#

We've just covered how designers went from desktop publishing software in the '90s to today's software like Figma. However, even Figma lacks certain functionality. Luckily for us, Figma's very capable API makes it possible to build tooling around it to do many fantastic things that a non-API-driven tool could never support.

As we've talked about previously, design systems should use design tokens to atomically describe our system. Figma on its own doesn't offer any way to extract tokens. Additionally, Figma itself is completely unaware of this concept in the first place.

We need to solve the following:

1. We need to have a place where we define design tokens.

2. We need a way to take the defined tokens and transport them into a useful format—most likely code.

What to do?

What are the options?#

As I've hopefully made clear in the previous lessons, a common way to transport and transform tokens has been by using either specialized software or tools like plugins to manually export tokens into files.

Manually#

• Error-prone

• Slow

• Tedious

• Likely practical "sync" issues

The most straightforward way of handling tokens would be to store tokens as abstract values in a document, perhaps a JSON file. This additionally needs to be stored and synced somewhere. A workflow needs to exist so that you can use and update it, as well as any code that is being produced. In short, you will need to glue a lot to get this working end to end.

Designers may feel this is a technical and very indirect use of their time and abilities. Developers, however, would maybe have a fully qualified and usable format. This way, for all its mechanical flaws, hits close to the heart of many implementations.

Handoff tools: Zeplin...#

• Old-school

• Not programmable

• Not possible to setup in an automated DevOps way

• May not use formats and conventions you want/need

This class of tooling tends to output generated code and redlines, specifications, or both. The code is often not good enough to use even as a starter. Relying only on specs that may not even use formats you need doesn't feel right in 2021.

Frameworks: Diez, Amazon Style Dictionary...#