Browse Source

add figma token extraction script for themes

pull/516/head
mrjvs 1 year ago
parent
commit
b42be00744
  1. 1
      .eslintrc.js
  2. 1
      plugins/.gitignore
  3. 43
      plugins/figmaTokensToThemeTokens.mjs

1
.eslintrc.js

@ -22,6 +22,7 @@ module.exports = { @@ -22,6 +22,7 @@ module.exports = {
"/*.js",
"/*.ts",
"/plugins/*.ts",
"/plugins/*.mjs",
"/themes/**/*.ts"
],
parser: "@typescript-eslint/parser",

1
plugins/.gitignore vendored

@ -0,0 +1 @@ @@ -0,0 +1 @@
figmaTokens.json

43
plugins/figmaTokensToThemeTokens.mjs

@ -0,0 +1,43 @@ @@ -0,0 +1,43 @@
/**
* This script turns output from the figma plugin "style to JSON" into a usuable theme.
* It expects a format of "themes/{NAME}/anythinghere"
*/
import fs from "fs";
const fileLocation = "./figmaTokens.json";
const theme = "blue";
const fileContents = fs.readFileSync(fileLocation, {
encoding: "utf-8"
});
const tokens = JSON.parse(fileContents);
const themeTokens = tokens.themes[theme];
const output = {};
function setKey(obj, key, defaultVal) {
const realKey = key.match(/^\d+$/g) ? "c" + key : key;
if (obj[key]) return obj[key];
obj[realKey] = defaultVal;
return obj[realKey];
}
function handleToken(token, path) {
if (typeof token.name === "string" && typeof token.description === "string") {
let ref = output;
const lastKey = path.pop();
path.forEach((v) => {
ref = setKey(ref, v, {});
});
setKey(ref, lastKey, token.hex);
return;
}
for (let key in token) {
handleToken(token[key], [...path, key]);
}
}
handleToken(themeTokens, []);
console.log(JSON.stringify(output, null, 2));
Loading…
Cancel
Save