Setting up Figmagic
With all the other hard, boxy stuff behind us, the perspective now moves to the front-end components and Figma.
I'd forgive you if you thought that Figmagic is a pain to set up if we were dependent on all the previous steps. That's actually—thankfully—not the case.
For our design system and the basic application we are making, I think it's entirely fine that you choose what exact colors and so on you use. Using the same colors as in my examples might make it easier to follow me "exactly," for sure, but it may be impractical to copy in detail every exact setting, etc., that I use.
You might want to scrap any configuration files you've made previously if you are still in the same folders you've been working in to ensure you have a clean slate to work with.
Quick recap#
Let's recap very briefly some details of what I went through in module 2:
Design systems almost always use design tokens as a way to communicate design decisions (such as values for colors, typography, and spacing).
We can use Figma to easily create structured objects that represent our tokens.
Figmagic is a command-line interface tool that we use outside of Figma; it effectively lets us extend Figma outside itself.
It lets us do three things: pull design tokens, extract graphics, and generate React components.
From a workflow perspective, Figmagic is usually run by a developer, not a designer (since it's a CLI tool).
For this lesson, let's keep it short and sweet and make a sort of "hello world" implementation. Later, we will use the ready-made starter/example application and component library, but this should get you a good sense of how things work when starting from scratch.
Creating a very basic Figmagic-compliant document outline#
Fire up Figma. Create a new design file by clicking New in the upper right corner and selecting Design file.
In the left panel, click Page 1 and rename it to Design tokens. Figmagic picks up on a certain set of given page names, so it's vital that your naming is in line with what Figmagic expects. In that regard, Figmagic does not do any kind of intelligent inferring of data from a document other than matching its processing with named pages.
On the blank new page, we need to create a frame. Press F and drag one out. Rename the frame Colors. On the design tokens page, the same principle goes for naming: Figmagic assumes that frames use a set of correct names that specify what type of entity they contain.
I recommend having a high degree of hygiene when creating pages for design system usage since, while Figmagic is a tool that does not care about your internal layout, your teammates very surely will if it's all in shambles.
A few tips to you:
Use equal spacing between similar objects and equal sizing/shape among them as well. You can also hold the shift key while you drag out rectangles to force them to a square.
To very quickly place a rectangle, press
Rand just click once. Super quick, and a perfect square! I approve.Continuously sort layers. They are added with the newest on top, so it's often in the reverse order of how I want them logically.
:::
Into the frame, add a few rectangles; I'll go with three rectangles. Change the fills of each to a unique color. I'm thinking red, green, and blue to make very distinct colors. Then, rename their layers to their color (Red, Green, Blue in my case). Note that the names you give the layers will be what these colors are called in the token files that will be produced shortly.
Running Figmagic#
In this lesson, we will use our component library codebase, which includes Figmagic. Navigate into it.
To run Figmagic, it needs to have a Figma URL (or document/file ID) and a Figma API token. We already created a token in lesson 3.1; else, go back to that lesson and see how we get a token.
To get the file ID, right-click the heading of the file and click Copy Link, paste the link in a text editor, and copy the bit immediately after the /file/ section.
This page is a preview of The newline Guide to React Component Design Systems with Figmagic