figmate v0.0.6
Figmate
Enhance your styleguide with design tokens. For Figma lovers <3
It's Alpha version for now.
Installation
The package works with node.js, so be sure that you installed latest version.
You can install in two ways:
Global (preferred way) run npm install -g figmate
Local run npm install figmate --save
or npm install figmate --save-dev
How to use
- CLI run
figmate
in terminal - CommonJS module
const Figmate = require('figmate')
in your .js file
How to configure
All files should be placed your project root folder:
- in package.json
{
"name": "yourproject",
...
"figmate": {
// configuration
}
...
}
- in figmate.config.json
{
// configuration
}
- pass as argument when call Figmate module
import Figmate from 'figmate' // Async function
Figmate({
// configuration
})
Configuration
Token and File id (:string)
Tease options are required
Token and file id can be placed in .env file with keys:
FIGMA_TOKEN = 37-dab #example
FIGMA_FILE_ID = rD3v #example
If you don't have .env you can pass options as other options
Boards(:array of object)
You can choose any boards and any type of design tokens that you need to be parsed
boards: [
...
{
path: "Token/Fonts",
type: "style/text"
},
...
]
As a path you can specify the page or group and it's possible to be nested as you need by divider /
Type | Description |
---|---|
style/text | Text styles |
text | Raw text styles |
style/fill | Color styles |
fill | Raw color styles |
style/shadow | Box-shadow styles |
space | Spacer or indents, name and height are taken from shape |
radius | Border-radius, name and radius are taken from shape |
Platforms(:object)
Figmate is using Style dictionary package to generate files
platforms: {
...
}
Utils
Tease utils helps if you have themes in one file and you don't want to request the same file for every theme
getFigmaFile(:configuration object)
const { getFigmaFile } = require('figmate')
Async function to get Figma file and then parse it as you need. You can provide config as first argument.
buildTokens(:figmaFile JSON, :configuration object)
const { buildTokens } = require('figmate')
Async function to parse Figma file. You need to provide file as first argument and config as second.
Example to use utils
const { getFigmaFile, buildTokens } = require('figmate')
const themes = ['alpha', 'betta', 'gamma']
async function generateTokens(file) {
for (const theme of themes) {
await buildTokens(file, {
boards: [
{
path: `Tokens/${theme}`,
type: 'style/text',
},
],
platforms: {
scss: {
transformGroup: 'scss',
buildPath: `${theme}/`,
files: [
{
destination: `${theme}_tokens.scss`,
format: 'scss/variables',
},
],
},
},
})
}
}
getFigmaFile().then(generateTokens)