Collapse containers that only have vector children to better handle SVG image downloads and also make output size smaller. (#250)

* Don't include thumbnail link or last modified date in simplified output.
* Collapse containers that only have vector children to better handle SVG image downloads and also make output size smaller.

Author: GLips

.changeset/evil-tools-shave.md

@@ -0,0 +1,5 @@
+---
+"figma-developer-mcp": patch
+---
+
+Collapse containers that only have vector children to better handle SVG image downloads and also make output size smaller.

src/extractors/built-in.ts

@@ -1,4 +1,10 @@
-import type { ExtractorFn, GlobalVars, StyleTypes, TraversalContext } from "./types.js";
+import type {
+  ExtractorFn,
+  GlobalVars,
+  StyleTypes,
+  TraversalContext,
+  SimplifiedNode,
+} from "./types.js";
 import { buildSimplifiedLayout } from "~/transformers/layout.js";
 import { buildSimplifiedStrokes, parsePaint } from "~/transformers/style.js";
 import { buildSimplifiedEffects } from "~/transformers/effects.js";
@@ -196,3 +202,52 @@ export const visualsOnly = [visualsExtractor];
  * Layout only - useful for structure analysis.
  */
 export const layoutOnly = [layoutExtractor];
+
+// -------------------- AFTER CHILDREN HELPERS --------------------
+
+/**
+ * Node types that can be exported as SVG images.
+ * When a FRAME, GROUP, or INSTANCE contains only these types, we can collapse it to IMAGE-SVG.
+ * Note: FRAME/GROUP/INSTANCE are NOT included here—they're only eligible if collapsed to IMAGE-SVG.
+ */
+export const SVG_ELIGIBLE_TYPES = new Set([
+  "IMAGE-SVG", // VECTOR nodes are converted to IMAGE-SVG, or containers that were collapsed
+  "STAR",
+  "LINE",
+  "ELLIPSE",
+  "REGULAR_POLYGON",
+  "RECTANGLE",
+]);
+
+/**
+ * afterChildren callback that collapses SVG-heavy containers to IMAGE-SVG.
+ *
+ * If a FRAME, GROUP, or INSTANCE contains only SVG-eligible children, the parent
+ * is marked as IMAGE-SVG and children are omitted, reducing payload size.
+ *
+ * @param node - Original Figma node
+ * @param result - SimplifiedNode being built
+ * @param children - Processed children
+ * @returns Children to include (empty array if collapsed)
+ */
+export function collapseSvgContainers(
+  node: FigmaDocumentNode,
+  result: SimplifiedNode,
+  children: SimplifiedNode[],
+): SimplifiedNode[] {
+  const allChildrenAreSvgEligible = children.every((child) =>
+    SVG_ELIGIBLE_TYPES.has(child.type),
+  );
+
+  if (
+    (node.type === "FRAME" || node.type === "GROUP" || node.type === "INSTANCE") &&
+    allChildrenAreSvgEligible
+  ) {
+    // Collapse to IMAGE-SVG and omit children
+    result.type = "IMAGE-SVG";
+    return [];
+  }
+
+  // Include all children normally
+  return children;
+}

src/extractors/design-extractor.ts

@@ -76,13 +76,11 @@ function parseAPIResponse(data: GetFileResponse | GetFileNodesResponse) {
     nodesToParse = data.document.children.filter(isVisible);
   }
 
-  const { name, lastModified, thumbnailUrl } = data;
+  const { name } = data;
 
   return {
     metadata: {
       name,
-      lastModified,
-      thumbnailUrl: thumbnailUrl || "",
     },
     rawNodes: nodesToParse,
     extraStyles,

src/extractors/index.ts

@@ -13,7 +13,7 @@ export { extractFromDesign } from "./node-walker.js";
 // Design-level extraction (unified nodes + components)
 export { simplifyRawFigmaObject } from "./design-extractor.js";
 
-// Built-in extractors
+// Built-in extractors and afterChildren helpers
 export {
   layoutExtractor,
   textExtractor,
@@ -25,4 +25,7 @@ export {
   contentOnly,
   visualsOnly,
   layoutOnly,
+  // afterChildren helpers
+  collapseSvgContainers,
+  SVG_ELIGIBLE_TYPES,
 } from "./built-in.js";

src/extractors/node-walker.ts

@@ -81,7 +81,14 @@ function processNodeWithExtractors(
         .filter((child): child is SimplifiedNode => child !== null);
 
       if (children.length > 0) {
-        result.children = children;
+        // Allow custom logic to modify parent and control which children to include
+        const childrenToInclude = options.afterChildren
+          ? options.afterChildren(node, result, children)
+          : children;
+
+        if (childrenToInclude.length > 0) {
+          result.children = childrenToInclude;
+        }
       }
     }
   }

src/extractors/types.ts

@@ -30,6 +30,20 @@ export interface TraversalContext {
 export interface TraversalOptions {
   maxDepth?: number;
   nodeFilter?: (node: FigmaDocumentNode) => boolean;
+  /**
+   * Called after children are processed, allowing modification of the parent node
+   * and control over which children to include in the output.
+   *
+   * @param node - Original Figma node
+   * @param result - SimplifiedNode being built (can be mutated)
+   * @param children - Processed children
+   * @returns Children to include (return empty array to omit children)
+   */
+  afterChildren?: (
+    node: FigmaDocumentNode,
+    result: SimplifiedNode,
+    children: SimplifiedNode[],
+  ) => SimplifiedNode[];
 }
 
 /**
@@ -47,8 +61,6 @@ export type ExtractorFn = (
 
 export interface SimplifiedDesign {
   name: string;
-  lastModified: string;
-  thumbnailUrl: string;
   nodes: SimplifiedNode[];
   components: Record<string, SimplifiedComponentDefinition>;
   componentSets: Record<string, SimplifiedComponentSetDefinition>;

src/mcp/tools/get-figma-data-tool.ts

@@ -1,7 +1,11 @@
 import { z } from "zod";
 import type { GetFileResponse, GetFileNodesResponse } from "@figma/rest-api-spec";
 import { FigmaService } from "~/services/figma.js";
-import { simplifyRawFigmaObject, allExtractors } from "~/extractors/index.js";
+import {
+  simplifyRawFigmaObject,
+  allExtractors,
+  collapseSvgContainers,
+} from "~/extractors/index.js";
 import yaml from "js-yaml";
 import { Logger, writeLogs } from "~/utils/logger.js";
 
@@ -62,6 +66,7 @@ async function getFigmaData(
     // Use unified design extraction (handles nodes + components consistently)
     const simplifiedDesign = simplifyRawFigmaObject(rawApiResponse, allExtractors, {
       maxDepth: depth,
+      afterChildren: collapseSvgContainers,
     });
 
     writeLogs("figma-simplified.json", simplifiedDesign);