Why Figmagic and what is it?
Figmagic is the last piece in our toolchain that acts as the glue needed to super-charge your productivity.
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:
We need to have a place where we define design tokens.
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...#
This page is a preview of The newline Guide to React Component Design Systems with Figmagic