[](https://greenkeeper.io/)
Automate the generation of design tokens and specs from your Figma documents. Inspired by Salesforce Theo.
A typical use case for the generated documents is to use the extracted values as a token base in CSS systems that support external values (such as Styled Components or Sass).
Please note: Figmagic requires that your document structure is identical to what I show in the template site at https://www.figma.com/file/KLLDK9CBSg7eAayiTY3kVqC8/Figmagic-Design-System-Example.
Built initially as an internal handoff tool for Humblebee.
There's a lot to say here about the use cases and approaches taken by other tools. I will be writing an article on the motivations behind the project later on.
The basic idea of Figmagic is to support an informed handoff between designers and developers. I believe the best way to do this in a solid, mature, and non-impeding way is:
An example project—using React, Webpack and Styled Components—is available at https://github.com/mikaelvesavuori/figmagic-example.
You can use Figmagic either as an NPM package in its own folder, or as part of your projects. It is assumed you will use it as a dependency.
Figmagic uses ESM imports, so make sure you have a recent Node version, preferably version 10+.
Running it standalone might be fine if you wish to isolate the tokens/spec generation, or if you don't have a project in which to place Figmagic, or if it simply makes more sense to have it on its own (for example doing a project in a non-Node environment).
Use . as a value in the path in the NPM config block to resolve from the Figmagic root.
You will probably want to use it as a straight dependency.
yarn add figmagic -S or npm install figmagic -Spackage.json: In the scripts block you will need to change the blanks to your actual file and tokenbin/meta/keys.mjs: In the options object you will also need to change to your actual values; these are then used by Figmagic's functionsThe Figmagic commands (NPM scripts block) is below, listing what commands are available to you.
"config": {
"figmagicPath": "node_modules/figmagic"
},
"scripts": {
"figmagic": "yarn figmagic:clean && yarn figmagic:saveFromApi && yarn figmagic:build && yarn figmagic:getImages && yarn figmagic:downloadImages",
"figmagic:clean": "rm -rf specs/ && rm -rf tokens/ && rm -rf grid/ && rm -rf figma && mkdir tokens && cp .gridTemplate.mjs tokens/ && mv tokens/.gridTemplate.mjs tokens/grid.mjs",
"figmagic:saveFromApi": "mkdir -p figma && wget 'https://api.figma.com/v1/files/{URL}' --header='X-Figma-Token: {TOKEN}' -O figma/figma.json",
"figmagic:tokens": "yarn figmagic:clean && yarn figmagic:saveFromApi && yarn figmagic:build",
"figmagic:build": "node --experimental-modules bin/index.mjs",
"figmagic:getImages": "node --experimental-modules bin/getImages.mjs",
"figmagic:getGraphics": "node --experimental-modules bin/getImages.mjs --graphics",
"figmagic:downloadImages": "node --experimental-modules bin/downloadImages.mjs",
"figmagic:downloadGraphics": "node --experimental-modules bin/downloadImages.mjs --graphics",
"figmagic:optimizeGraphics": "svgo -f ./specs/graphics/ --multipass --disable=removeViewBox --enable=removeDimensions",
"precommit": "echo Running pre-commit linting... && pretty-quick --staged && npm --no-git-tag-version version patch && git add package.json"
}
Your structure needs to correspond to the following:
See a demo/template at https://www.figma.com/file/KLLDK9CBSg7eAayiTY3kVqC8/Figmagic-Design-System-Example.
Note: You must follow the document structure as seen in the image below and in the template linked above.
Figma styles became publicly available in June 2018 and are incredibly valuable for designers to create single-sources-of-truth when it comes to design values (tokens). When using Figmagic though, the thinking and usage is a bit different from how Figma styles work.
A Figma style is multidimensional: It contains any number of properties wrapped into one style, acting as kind of a package. This is extremely handy in a design environment and is very practical from a user standpoint. The user doesn't have to think too hard about storing "redundant" values that are the same in another component, such as N number of units for line height: They are all taken care of.
Figmagic instead expresses tokens as instances of every individual value, thus being unidimensional – storing only one value per item. Examples could be sets of line heights, font weights, or font sizes, each one individually specified. This means that values can be used and mixed as pleased in any number of contexts, not becoming bound to one specific context such as a certain kind of heading. This is good for a developer because we would rather just map out the definitive values for something, onto a component (a "context" so to speak).
Because of this difference, the appropriate way to structure a Figmagic-compatible Figma design document is to display one or more items/tokens in the respective frames that correspond to the accepted token types (line height, font size...) where each item has only one key property that's changed in-between them (such as one text using size 48, the next using size 40...), since those items are what Figmagic loops through when creating your code tokens.
Whatever suits you! As long as you remember that what Figmagic fetches are those single (unidimensional) values from each design item/token it should all work. Figma styles may help you to work though, and is probably just a good thing. Again, Figmagic does not use those values.
Uses any combination of rows, columns, and grid (but only one of each type). Grid sizes will use the native Javascript Math.floor() function to round down any decimal values. This may or may not cause issues, but is at least more hygienic than leaving potentially weird numbers for grid sizes.
Postscript name (eg. FiraSans-Regular).
Work in progress.
Rem units based on global font size (base 16px, change this within Figmagic also, if you've altered this value in your CSS).
Unitless.
RGBA colors.
Em units.
Specifications for components are generated into the specs folder. A component will be anything that Figma catches as a component, regardless if they exist in your "Components" page or not.
const buttonFigma = {
name: "Button Figma",
gridWidth: 1,
perfectlyFitsGrid: true,
pxWidth: 200,
pxHeight: 40,
description: "Regular button\nBold text\nLine height medium",
subComponents: ["Box", "Button Text"],
id: "5:9"
};
export default buttonFigma;
bin contains the project's MJS files; bin/functions contains most of the functionsfigma will contain the extracted Figma JSON and various build-time JSON filestokens will contain the token files (in .mjs format)specs will contain specifications for all Master Componentsspecs/images will contain generated images for your componentsspecs/graphics will contain generated graphics for your components (you will need to add the parameter -- graphics to the call to getImages and downloadImages)package.json commands uses Bash syntax which means it's all Mac (or Windows Bash) for nowgrid.mjs file in the tokens folder, so the clean command puts an empty grid file there on wipe (if you ever wonder about why there is a .gridTemplate.mjs file in the root!)perfectlyFitsGrid property is currently a uni-dimensional boolean, and is therefore true only for one grid size, so it doesn't really work for a set of sizes (mobile, tablet, desktop)You are very welcome to contribute to the project! Pull requests welcome, as well as issues or plain messages.
FAQs
Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.
The npm package figmagic receives a total of 4,387 weekly downloads. As such, figmagic popularity was classified as popular.
We found that figmagic demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.