2024-figma-plugin/src/code/lib/createVariables.ts at ee3ec2f29405fbc6610b06490158e24d14983641 · codegrid/2024-figma-plugin · GitHub

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
export function createVariables() {
  // Primitives
  const primitivesCollection = figma.variables.createVariableCollection("Primitives");
  const whiteVariable = figma.variables.createVariable("white", primitivesCollection, "COLOR");
  const blackVariable = figma.variables.createVariable("black", primitivesCollection, "COLOR");
  const modeId = primitivesCollection.modes[0].modeId;
  whiteVariable.setValueForMode(modeId, {
    r: 1,
    g: 1,
    b: 1,
    a: 1,
  });
  blackVariable.setValueForMode(modeId, {
    r: 0,
    g: 0,
    b: 0,
    a: 1,
  });

  // Semantics
  const semanticsCollection = figma.variables.createVariableCollection("Semantics");
  const lightMode = semanticsCollection.modes[0];
  semanticsCollection.renameMode(lightMode.modeId, "Light");
  semanticsCollection.addMode("Dark");
  const darkMode = semanticsCollection.modes[1];

  const textDefaultVariable = figma.variables.createVariable("text-default", semanticsCollection, "COLOR");
  textDefaultVariable.setValueForMode(lightMode.modeId, {
    type: "VARIABLE_ALIAS",
    id: blackVariable.id,
  });
  textDefaultVariable.setValueForMode(darkMode.modeId, {
    type: "VARIABLE_ALIAS",
    id: whiteVariable.id,
  });

  const backgroundVariable = figma.variables.createVariable("background", semanticsCollection, "COLOR");
  backgroundVariable.setValueForMode(lightMode.modeId, {
    type: "VARIABLE_ALIAS",
    id: whiteVariable.id,
  });
  backgroundVariable.setValueForMode(darkMode.modeId, {
    type: "VARIABLE_ALIAS",
    id: blackVariable.id,
  });
}