Work Effectively With Figmagic - File Organization 

Working effectively with Figmagic means understanding how and what it actually parses from a document.

In this post, we will demystify exactly how a Figmagic-compliant Figma file needs to look for it to work as intended.

On a high level, there are three page names that Figmagic looks for:

These correspond to what type of thing Figmagic should process them as.

You can certainly have any number of pages with other names than those within the same document. However, Figmagic itself will only process pages with the names I just listed. You do not need all of those pages—use the ones you need!

Let's recap how we correctly outline our design tokens.

. Next, create a frame, and into it, create a rectangle. Rename the frame 

 because we will use this frame to contain our colors.

Make the rectangle a solid color, and then rename the rectangle into the name of my color.

What we have done is create the basic structure required for Figmagic to create design tokens from our color swatches.

Colors are a typical first use-case and are easily demonstrable, but there are many more types of tokens we can use. At the time of making this course, they are:

The basic idea is the same for all of these, and they follow the pattern we have used a couple of times now for the colors:

 so that we can look at some other examples.

The approach used in Figmagic is to express values as "uni-dimensional," which in common parlance just means that every item (or design token) expresses only a single detail. The effect of this is that we get a very granular design system, but collecting tokens or details together—for example, assembling a more complex design—is something that we have to do in code from the individual tokens.

The opposite approach could be something like a text string that has advanced formatting, with a custom font, some particular size, some font variant, some color, some special kerning setting... and then we would need to either use 

 of those details together, or we somehow still need to disassemble each detail from this set of details.

Some of the token types follow a very straightforward format. For example, 

 value. Here, we use 0, 4, 8, and 100 (for a full circle).

 is the same story. The stroke width is what gets picked up here: 1, 2, 4, or 8 pixels.

For the animation-specific ones, it's a bit different. Instead, these directly 

 or the cubic bezier functions. Since these values cannot be represented in another way, these are somewhat unique in the overall scope of how Figmagic works. 

 are specified by using rectangles that express the width of the token value. The exact height of these objects does not affect anything.

Then for the typography tokens. This is where we need to remember and understand the uni-dimensional tokens. To chisel out our typography, we need to do it methodically. In the template, we can see 

 that correspond to all the allowed weights. In this case, you'll perhaps notice that the 

 are copies, but that's just how it happens to be in this project. Overall, all of the font token frames specify their own respective aspect: weight, family, size, letter spacings...

In practice, then, to get them to work together in a useable way, my recommendation is to add a dedicated 

 frame and create Figma styles from those so that you have a reusable font style as you design 

Notice how Graphics do not need frames. Instead, they need to be packed into Figma components.

Other than that, there's not much to say about graphics. You make them with the provided vector tools, bundle them into a component (with 

), and then tell Figmagic—through CLI or configuration—that you also want graphics to be handled. More on that later.

To properly generate elements requires close adherence to how Figmagic will parse groups and layers and their names. This complex topic deserves deeper attention, but I'll give you a brief lightning tour right here!

) are not required. I am using them here as a visual aid and developer guidance.

An "element" is the Figmagic term for what could be called components. The rationale for calling them elements is that Figmagic elements should correspond closely to HTML elements, thus being relatively basic and not deeply nested. They should thereby also correspond to HTML primitives that already exist, like 

You'll see that the elements are divided into two categories: flat and nested.

, have a shallow model: in this case, it only has a 

, have one additional level of depth, here using the CSS placeholder syntax to enrich the 

These elements are not generated by default, like the graphics were, so they need to be activated in configuration or in the CLI.

Generated elements do not strictly, technically, need to correspond to anything that's set up in the tokens. You would, however, get a warning stating that value so-and-so was hard-coded since it could not be inferred from the tokens.

In reality, you'd, of course, want to design these elements from the atomic design tokens as far as possible. Figmagic won't be your blocker, though, if you need to go out of bounds for a bit!

By now, you should be able to create a Figma document that can be used together with Figmagic. You've also seen all three types of objects you can generate with it and how you need to approach each one of them.

Figmagic makes Figma, an already amazing tool, even better for design-oriented development teams. Use it for simple tokens, or operationalize fully across tokens, graphics output and component generation: it's in your hands.

The newline Guide to React Component Design Systems with Figmagic, 

where we go deep into a design-driven workflow giving you all the pieces—from code to know-how—to implement a design system and make it operational for web-based development. 

If you're looking to improve your whole team's way of working with releasing and designing continuously with a shared basis in a design system, 

The newline Guide to React Component Design Systems with Figmagic

 is the course that puts together the entire picture, from theory, to process, to practical setup.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Figmagic

Work Effectively With Figmagic - File Organization

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript