Add Component Annotations Example

component-annotations/README.md

@@ -0,0 +1,5 @@
+# Component Annotations Sample
+
+TODO: [Annotations Plugin Documentation](...)
+
+A demo plugin that adds `"mainComponent"` property reference annotations to every component instance in the current selection.

component-annotations/code.js

@@ -0,0 +1,48 @@
+const selectionNodes = figma.currentPage.selection;
+const nodes =
+  selectionNodes.length === 0 ? [figma.currentPage] : selectionNodes;
+
+nodes.forEach((node) => {
+  if (node.type === "INSTANCE") {
+    addAnnotation(node);
+  } else {
+    node.findAllWithCriteria({ types: ["INSTANCE"] }).forEach(addAnnotation);
+  }
+});
+
+figma.closePlugin();
+
+function addAnnotation(instance) {
+  if (instance.annotations.length) {
+    console.log(instance.annotations);
+
+    /**
+     * The following deletes existing annotations
+     */
+
+    /*
+    instance.annotations = [];
+    */
+
+    /**
+     * The following appends to existing annotations but loses existing rich text formatting.
+     * Rich text is currently unsupported in the plugin API.
+     */
+
+    const current = instance.annotations[0];
+    const currentProperties = current.properties || [];
+    const existingMainComponent = currentProperties.find(
+      (a) => a.type === "mainComponent"
+    );
+    if (!existingMainComponent) {
+      instance.annotations = [
+        {
+          labelMarkdown: current.labelMarkdown,
+          properties: [{ type: "mainComponent" }].concat(currentProperties),
+        },
+      ];
+    }
+  } else {
+    instance.annotations = [{ properties: [{ type: "mainComponent" }] }];
+  }
+}

component-annotations/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "Component Annotation Automator",
+  "id": "239174719123556610",
+  "api": "1.0.0",
+  "editorType": ["dev"],
+  "capabilities": ["inspect"],
+  "permissions": [],
+  "main": "code.js",
+  "networkAccess": { "allowedDomains": ["none"] }
+}