Options
All
  • Public
  • Public/Protected
  • All
Menu

figmatik

figmatik

low level toolkit to hack figma rest api.

see examples directory for some ideas.

https://rayuruno.github.io/figmatik/

simple example

collects all component nodes which has name starting with "Icons/"

import figmatik from "figmatik";

const figma = figmatik(/* config: {token,cache,plugins} */);

const file = await figma.files("ZsaaakKEgys8zPMBaUbFz3");

const iconNodes = figma.findAll(
file.document,
(node) => node.type === "COMPONENT" && node.name.startsWith("Icons/")
);

plugins

figmatik comes with few built in plugins

export

enables figma exports as in the app itself

const nodes = getSomeNodes();
const exportSettings = [
{ format: "png", scale: 1, suffix: "@1x" },
{ format: "png", scale: 2, suffix: "@2x" },
];
const images = await figma.export(nodes, exportSettings);
images[0].buffer instanceof Buffer; // true
images[0].node === nodes[0]; // true

selector

enables dom selector api (css selectors) to query nodes

figma.querySelectorAll(file.document, ".component[name^=icons]");
figma.querySelector(file.document, ".component[name^=icons]");

// or
file.document.querySelectorAll(".component[name^=icons]");
file.document.querySelector(".component[name^=icons]");

// or
file.document.$$(".component[name^=icons]");
file.document.$(".component[name^=icons]");

// above are equivalent of
figma.node.findAll(
file.document,
(node) => node.type === "COMPONENT" && node.name.startsWith("Icons/")
);

text

transforms text node into ast

const textNode = {
characters: "Hello World.\nItem1\nEnd",

characterStyleOverrides: [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0,
],

styleOverrideTable: {
1: {
hyperlink: { type: "URL", url: "http://example.com" },
/* rest of the props */
},
},

lineTypes: ["NONE", "UNORDERED", "NONE"],
/* rest of the props */
};

textNode.children === {
/* copy of textNode */

children: [
{
type: "TEXT",
textContent: "Hello World.",
},
{
type: "UNORDERED_LIST",
children: [
{
type: "LIST_ITEM",
children: [
{
type: "LINK",
textContent: "Item1",
attrs: { url: "http://example.com" },
},
],
},
],
},
{
type: "TEXT",
textContent: "End",
},
];
}

style

transform figma node properties into ast compatible with css and react native

node.styleMap.backgroundColor === "rgba(0,0,0,1)";

Generated using TypeDoc