Designers
Welcome! This section is for designers and design system maintainers. Your job here isn’t to write code — it’s to organize your Figma file so a tool called Figmage can read it and hand developers the exact colors, type, spacing, and icons you designed. Do it well and the product will look like your designs, automatically, every time you publish a change.
No engineering background required. If you can create a color style and a component in Figma, you can prepare a design system Figmage will love.
The big picture
Section titled “The big picture”You design in Figma as usual. When your work is ready, you publish it as a library. A developer runs one command, and your styles and components become code in the product.
Three habits make this work beautifully, and they’re the thread through every page in this section:
- Make reusable values real. Anything you reuse should be a Figma style, variable, or component — never a one-off.
- Name things like an API. Your names become the names developers type in code.
- Publish when it’s ready. Nothing reaches developers until you publish.
Your part, their part
Section titled “Your part, their part”| Designers handle | Developers handle |
|---|---|
| Create reusable Figma styles and components | Configure which token groups Figmage should sync |
| Keep names stable and easy to understand | Choose output formats, folders, and casing |
| Publish the library after approved changes | Run figmage sync and use the generated files |
| Share handoff notes before renames | Update app code when token names intentionally change |
You do not need to write code or understand figmage.config.js. Your job is to make the source
library clear, published, and predictable.
Useful words
Section titled “Useful words”| Term | Plain-language meaning |
|---|---|
| Token | A named design decision developers can use in code, like primary or spacing.small. |
| Published library | The official version of your Figma file that other files, developers, and Figmage can read. |
| Component set | A family of related Figma components, such as spacing steps or icon variants. |
| File ID | The long ID in the Figma file URL that tells Figmage which file to read. |
| Access token | A private key that lets Figmage read Figma through the API. Developers usually manage this. |
New to the idea? Read Why Figmage for the bigger picture, or Getting Started for a quick orientation.