Automate the generation of design tokens from your Figma documents. Inspired by Salesforce Theo.
Automate the generation of design tokens from your Figma documents. Inspired by Salesforce Theo.
You can currently extract design tokens for:
A typical use-case for the generated documents is to feed the extracted values into CSS systems that support external values (such as Styled Components, Emotion, Styled System, any other CSS-in-JS libraries, or maybe even Sass).
Figmagic uses ESM imports, so make sure you have a recent Node version, preferably version 12.16 or later.
Please note: Figmagic requires that your document structure is identical to what I show in the template site at https://www.figma.com/file/K39TRbltDVcWFlpzw9r7Zh/Figmagic-%E2%80%94-Design-System-for-Tokens?node-id=2605%3A12. The link shows you the current version 2.1.0 Design System example.
Built initially as an internal handoff tool for Humblebee.
.figmagicrc file and with regular CLI inputfigmagic with existing tokens will not insta-delete the old files; now they will simply be put in the trash can (this is a requested safety net, for example when you're combining Figmagic with extra steps and hate having files trashed that have changes in them)rem unitsThere'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 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:
px values in most cases.${colors.midGray} rather than #3C3C3C.Run npm install -g figmagic or yarn global add figmagic.
Local usage should be possible by installing Figmagic as a devDependency with npm install figmagic -D or yarn add figmagic -D, then using a script pointing to the local version, like so:
"scripts": {
"figmagic": "./node_modules/figmagic/index.mjs"
}
Pass in your Figma API token and Figma URL by either:
.figmagicrc under token and url. This is discouraged since you will display these values in clear text and you probably don't want thatThen:
figmagic/figma) and a folder with tokens (default: /tokens) in the rootWhen running figmagic, files will be moved with the Node module trash (multi-platform) into your OS's trash can. Thus, you can recover anything unintentionally overwritten.
This behavior is a new behavior added since the previous version 1 that destroyed all old files.
Your structure needs to correspond to the following:
See a demo/template at https://www.figma.com/file/K39TRbltDVcWFlpzw9r7Zh/Figmagic-%E2%80%94-Design-System-for-Tokens?node-id=2605%3A12. Feel free to simply copy it and paste it into your own document.
Note: Refer to the document structure in the image below and in the template linked above.
An example project—using React, Webpack and Styled Components—is available at https://github.com/mikaelvesavuori/figmagic-example.
There are several ways in which you can provide Figmagic with knowledge about how you want it to parse your tokens. You can combine them, but beware of the below prioritization chart:
.figmagicrc file.env fileIf possible, stick to one way of providing settings.
Non-provided values will fall back to defaults outlined in bin/meta/config.mjs.
.figmagicrcYou can use a JSON-formated configuration file at the root of a project to use its settings. Figmagic will pick up the path by assessing the current working directory and looking at a .figmagicrc file there. If it finds it, it will use it.
An example file is provided in Figmagic, using the default values:
{
"debugMode": false,
"fontUnit": "rem",
"outputFileName": "figma.json",
"outputFolderBaseFile": "figma",
"outputFolderTokens": "tokens",
"outputTokenFormat": "mjs",
"spacingUnit": "rem",
"usePostscriptFontNames": false
}
Run these in your command line environment of choice.
figmagic --debug
Default is false.
figmagic --recompileLocal
Default is null, and will then be taken from local .env file if not explicitly passed in through the CLI.
figmagic --outputTokenFormat [mjs|js]|| or figmagic -tf [mjs|js]
Default is mjs.
figmagic --fontUnit [rem|em] or figmagic -f [rem|em]
Default is rem.
figmagic --spacingUnit [rem|em] or figmagic -s [rem|em]
Default is rem.
figmagic --token [token] or figmagic -t [token]
Default is null, and will then be taken from local .env file if not explicitly passed in through the CLI.
figmagic --url [url_id] or figmagic -u [url_id]
Default is null, and will then be taken from local .env file if not explicitly passed in through the CLI.
figmagic --outputFolderBaseFile [folder] or figmagic -base [folder]
Default is figma.
figmagic --outputFolderTokens [folder] or figmagic -tokens [folder]
Default is tokens.
figmagic --outputFileName [filename] or figmagic -file [filename]
Default is figma.json.
figmagic --usePostscriptFontNames or figmagic -ps
Default is false, i.e. common name.
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 handy in a design environment and is 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 – meaning they store only one value per item. Examples could be sets of line heights, font weights, or font sizes, each one individually specified. What this entails for they developer and designer, is 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. For a developer this is good 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. I've seen that Figma styles make the "contract" between tokens and their day-to-day workflow with designers a lot easier. Again though, Figmagic does not use those values; think of them as a convenient glue.
The font family name, either as its common name (as picked up by Figma; spaces are removed) or its Postscript name (eg. FiraSans-Regular).
Default: Common name.
Note: In previous versions of Figmagic the Postscript font family name was used.
Typical font weight values like 200, 300 etc.
Units based on global font size (base 16px).
Default: rem units. Can be set to rem or em.
Unitless.
RGBA colors.
Default: rem units. Can be set to rem or em.
bin/functions: main functionalitybin/meta: configuration and system texts etc.Generated:
figma (default folder name) will contain the extracted Figma JSONtokens (default folder name) will contain the token files (in .mjs or .js format)2.1.2: Output as per Styled System format2.2.0: Output graphics (SVG or PNG format)2.3.0: Scaffold components and elements with code templatesYou 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 1,941 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
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.