description to plugin data

Author: jake-figma

code-snippet-saver/code.js

@@ -21,10 +21,10 @@ if (figma.mode === "codegen") {
   figma.on("selectionchange", () => {
     handleCurrentSelection();
   });
-
   figma.codegen.on("generate", async (event) => {
     handleCurrentSelection();
     const pluginDataArray = findPluginDataArrayForSelection();
+    console.log(pluginDataArray);
     const snippets = [];
     pluginDataArray.forEach((pluginData) =>
       JSON.parse(pluginData).forEach((a) => snippets.push(a))
@@ -40,31 +40,54 @@ if (figma.mode === "codegen") {
 
     return snippets;
   });
+} else if (figma.command === "description-to-plugin-data") {
+  descriptionToPluginData();
+}
+
+function descriptionToPluginData() {
+  let count = 0;
+  figma.currentPage.selection.forEach((node) => {
+    if (node.description) {
+      count++;
+      node.setPluginData(
+        PLUGIN_DATA_KEY,
+        JSON.stringify([
+          {
+            language: "JAVASCRIPT",
+            code: node.description.replace(/\n/g, "\n"),
+            title: node.name,
+          },
+        ])
+      );
+    }
+  });
+  figma.notify(`Updated snippet to description for ${count} nodes`);
+  figma.closePlugin();
+}
 
-  function findPluginDataArrayForSelection() {
-    const data = [];
-    function pluginDataForNode(node) {
-      const pluginData = node.getPluginData(PLUGIN_DATA_KEY);
-      // skipping duplicates. why?
-      // component instances have same pluginData as mainComponent, unless they have override pluginData.
-      if (pluginData && data.indexOf(pluginData) === -1) {
-        data.push(pluginData);
-      }
+function findPluginDataArrayForSelection() {
+  const data = [];
+  function pluginDataForNode(node) {
+    const pluginData = node.getPluginData(PLUGIN_DATA_KEY);
+    // skipping duplicates. why?
+    // component instances have same pluginData as mainComponent, unless they have override pluginData.
+    if (pluginData && data.indexOf(pluginData) === -1) {
+      data.push(pluginData);
+    }
+  }
+  const currentNode = figma.currentPage.selection[0];
+  pluginDataForNode(currentNode);
+  if (currentNode.type === "INSTANCE") {
+    pluginDataForNode(currentNode.mainComponent);
+    if (currentNode.mainComponent.parent.type === "COMPONENT_SET") {
+      pluginDataForNode(currentNode.mainComponent.parent);
     }
-    const currentNode = figma.currentPage.selection[0];
-    pluginDataForNode(currentNode);
-    if (currentNode.type === "INSTANCE") {
-      pluginDataForNode(currentNode.mainComponent);
-      if (currentNode.mainComponent.parent.type === "COMPONENT_SET") {
-        pluginDataForNode(currentNode.mainComponent.parent);
-      }
-    } else if (currentNode.type === "COMPONENT") {
-      if (currentNode.parent.type === "COMPONENT_SET") {
-        pluginDataForNode(currentNode.parent);
-      }
+  } else if (currentNode.type === "COMPONENT") {
+    if (currentNode.parent.type === "COMPONENT_SET") {
+      pluginDataForNode(currentNode.parent);
     }
-    return data;
   }
+  return data;
 }
 
 function handleCurrentSelection() {

code-snippet-saver/manifest.json

@@ -2,7 +2,7 @@
   "name": "Code Snippet Saver",
   "id": "239174719128739123",
   "api": "1.0.0",
-  "editorType": ["dev"],
+  "editorType": ["dev", "figma"],
   "capabilities": ["codegen"],
   "permissions": [],
   "codegenLanguages": [{ "label": "Snippets", "value": "snippets" }],
@@ -13,6 +13,12 @@
       "label": "Snippet Editor"
     }
   ],
+  "menu": [
+    {
+      "command": "description-to-plugin-data",
+      "name": "Description to pluginData"
+    }
+  ],
   "main": "code.js",
   "ui": "ui.html",
   "networkAccess": { "allowedDomains": ["none"] }

code-snippet-saver/ui.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <style>
+      body {
+        margin: 0;
+      }
       * {
         box-sizing: border-box;
       }
@@ -14,10 +17,15 @@
         display: block;
         width: 100%;
       }
+      textarea {
+        flex: 1;
+      }
       main {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
+        height: 100vh;
+        padding: 0.5rem;
       }
     </style>
   </head>