Tutorials on Design Tokens

In this post, we'll keep it short and sweet and make a sort of "hello world" implementation. This should get you a good sense of how things work when starting from scratch. Let's recap very briefly what we know about design systems, design tokens and Figmagic: Start Figma. Create a new design file by clicking New in the upper right corner and selecting Design file .

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:

One magic, simple concept (design tokens) and a one-stop shop (Figmagic) to contain our design make one hell of a powerhouse. Let's learn what design tokens are and how you can work with a “structured design” approach using Figmagic, a command-line interface tool that extends what we can do with Figma. Figmagic lets us do three things: pull design tokens, extract graphics, and generate React components. In this post, we will discuss the core concept "design tokens".