第3回

Author: tomof

src/code/code.ts

@@ -1,17 +1,10 @@
+import { createVariables } from "./lib/createVariables";
+
 figma.showUI(__html__);
 
 figma.ui.onmessage = (msg: { type: string; count: number }) => {
-  if (msg.type === "create-rectangles") {
-    const nodes: SceneNode[] = [];
-    for (let i = 0; i < msg.count; i++) {
-      const rect = figma.createRectangle();
-      rect.x = i * 150;
-      rect.fills = [{ type: "SOLID", color: { r: 1, g: 0.5, b: 0 } }];
-      figma.currentPage.appendChild(rect);
-      nodes.push(rect);
-    }
-    figma.currentPage.selection = nodes;
-    figma.viewport.scrollAndZoomIntoView(nodes);
+  if (msg.type === "create-variables") {
+    createVariables();
   }
   figma.closePlugin();
 };

src/code/lib/createVariables.ts

@@ -0,0 +1,36 @@
+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, figma.util.rgb("#FFFFFF"));
+  blackVariable.setValueForMode(modeId, figma.util.rgb("#000000"));
+
+  // 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,
+  });
+}

src/ui/ui.ts

@@ -1,15 +1,13 @@
 (() => {
   const createButton = document.getElementById("create");
   const cancelButton = document.getElementById("cancel");
-  const textbox = document.getElementById("count") as HTMLInputElement;
 
-  if (!createButton || !cancelButton || !textbox) {
+  if (!createButton || !cancelButton) {
     return;
   }
 
   createButton.onclick = () => {
-    const count = parseInt(textbox.value, 10);
-    parent.postMessage({ pluginMessage: { type: "create-rectangles", count } }, "*");
+    parent.postMessage({ pluginMessage: { type: "create-variables" } }, "*");
   };
 
   cancelButton.onclick = () => {

ui.html

@@ -1,5 +1,4 @@
-<h2>Rectangle Creator</h2>
-<p>Count: <input id="count" value="5" /></p>
+<h2>Variable Creator</h2>
 <button id="create">Create</button>
 <button id="cancel">Cancel</button>
 <script type="module" src="./src/ui/ui.ts"></script>