0.3.3 • Published 1 year ago
figma-parser v0.3.3
figma-parser
Work in progress! Parse Figma design files via Figma API to design tokens
Usage:
Prepare Figma file
Each token has to be a single layer following a specific naming (besides that, organise and style your design file as you want):
- Colors named
color-xxx
with fill as the token value - Space named
space-xxx
with height as the token value - Font family named
font-family-xxx
with font family set as token value - Font size and weight named
font-style-xxx
with font size and weight set as token value - Icons named
icon-xxx
with the vector icon shape as the first child layer - Illustrations named
illustration-xxx
with the vector illustration as the first child layer
The token can also be a group named by the rules. The style will be read by the last (bottom most) layer of the group.
Here's an example file - https://www.figma.com/file/s3DjttpILZzr4LC6WrkJun/Dark-theme?node-id=0%3A1
Download tokens
const FigmaParser = require("figma-parser");
const figma = new FigmaParser({
token: "your-access-token"
});
(async () => {
// Parse all tokens
const output = await figma.parse("figma-file-id");
// Parse optional tokens
const output = await figma.parse("figma-file-id", ["colors", "space", "fonts", "fontSizes", "fontWeights"]);
// Raw JSON file
console.log(output);
// Markup as JSON
console.log(figma.markup("json"));
// Markup as Typescript definitions
console.log(figma.markup("ts"));
// Pass custom markup template, see /lib/templates.ts
console.log(figma.markup("your-custom-template"));
})();
0.3.0
2 years ago
0.3.2
1 year ago
0.3.1
1 year ago
0.3.3
1 year ago
0.2.5
2 years ago
0.2.4
2 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.0
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
6 years ago
0.0.1
6 years ago