low level toolkit to hack figma rest api.
see examples directory for some ideas.
https://rayuruno.github.io/figmatik/
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/")
);
figmatik comes with few built in plugins
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
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/")
);
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",
},
];
}
transform figma node properties into ast compatible with css and react native
node.styleMap.backgroundColor === "rgba(0,0,0,1)";
Generated using TypeDoc