-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
134 lines (107 loc) · 3.47 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import { generateSDAssets } from "./styledictionary.js";
import { processAndWriteBrandColors } from "./processColors.js";
import { processAndWriteSemanticAndComponentTokens } from "./processTokens.js";
import { zip } from "zip-a-folder";
import fs from "fs-extra";
import ora from "ora";
import path from "node:path";
import prompts from "prompts";
import "dotenv/config";
// The Figma project where we can find our icons
const FIGMA_PROJECT_ID = "oHBCzDdJxHQ6fmFLYWUltf";
// Where we store the Figma token
const FIGMA_TOKEN_PATH = "./.FIGMA_TOKEN";
const ENV_PATH = "./.env";
const spinner = ora("Reading Figma access token");
(async function main() {
spinner.start();
let token = process.env.FIGMA_TOKEN;
if (token) {
spinner.succeed("Using Figma access token from environment viariables");
} else {
spinner.warn("No Figma access token found");
token = await getTokenFromPrompt();
}
spinner.start("Loading Figma project");
const res = await fetch(
`https://api.figma.com/v1/files/${FIGMA_PROJECT_ID}/variables/local`,
{
headers: {
"X-FIGMA-TOKEN": token,
},
}
);
if (!res.ok) {
throw new Error(json.err);
}
const json = await res.json();
try {
fs.ensureDirSync("./data/");
fs.outputFileSync("./data/figma.json", JSON.stringify(json), "utf8");
spinner.succeed(`Loaded Figma tokens`);
} catch (e) {
spinner.fail("Unable to load Figma tokens: " + e.message);
return;
}
spinner.start("Transforming Figma tokens to design tokens");
transform();
spinner.succeed("Design tokens written to disk");
spinner.start("Generating Style Dictionary assets");
generateSDAssets();
spinner.succeed("Style Dictionary assets generated");
spinner.start("Zipping assets");
await zipFiles();
spinner.succeed("Assets zipped for publishing");
})();
function writeEnvVarToDisk({ name, value }) {
if (fs.existsSync(ENV_PATH)) {
return fs.appendFileSync(ENV_PATH, `\n${name}=${value}`, "utf8");
}
return fs.writeFileSync(ENV_PATH, `${name}=${value}`, "utf8");
}
async function getTokenFromPrompt() {
let figmaToken;
const tokenPrompt = await prompts({
type: "text",
name: "figmaToken",
message:
"Enter your Figma access token (https://www.figma.com/developers/api#access-tokens)",
});
figmaToken = tokenPrompt.figmaToken;
const { saveToken } = await prompts({
type: "confirm",
name: "saveToken",
message: "Would you like to save the token?",
});
if (saveToken) {
writeEnvVarToDisk({ name: "FIGMA_TOKEN", value: figmaToken });
spinner.succeed("Saved token to " + ENV_PATH);
}
return figmaToken;
}
function transform() {
const token = fs.readFileSync("./data/figma.json", "utf8");
const tokenVariableCollection = "VariableCollectionId:4546:841";
const sourceData = JSON.parse(token);
// Prepare the modes array from your source data
const modes =
sourceData.meta.variableCollections[tokenVariableCollection].modes;
// Process and write brand color files
processAndWriteBrandColors(
sourceData,
sourceData.meta.variableCollections,
sourceData.meta.variables,
tokenVariableCollection
);
// Process and write semantic and component tokens
processAndWriteSemanticAndComponentTokens(
sourceData,
tokenVariableCollection
);
}
async function zipFiles() {
fs.ensureDirSync("./dist");
await zip("./output/android", "./dist/android.zip");
await zip("./output/ios", "./dist/ios.zip");
await zip("./output/web", "./dist/web.zip");
}