Merge pull request #94 from Automattic/fix-figma-server-transform-payload

Send Figma assets to WordPress imports

Author: chubes4

plugins/figma-to-wordpress/src/code.ts

@@ -9,6 +9,12 @@ function postToUi(message: PluginToUiMessage) {
   figma.ui.postMessage(message);
 }
 
+type AssetExportFormat = "PNG" | "SVG";
+
+type NormalizeContext = {
+  assets: Map<string, NormalizedAsset>;
+};
+
 function clonePaints(node: SceneNode | PageNode, property: "fills" | "strokes") {
   if (property === "fills" && "fills" in node) {
     return node.fills === figma.mixed ? "mixed" : node.fills;
@@ -21,20 +27,22 @@ function clonePaints(node: SceneNode | PageNode, property: "fills" | "strokes")
   return undefined;
 }
 
-function normalizePaints(paints: unknown) {
+function normalizePaints(paints: unknown, assetId?: string) {
   if (!Array.isArray(paints)) {
     return undefined;
   }
 
   return paints
     .filter((paint) => paint && typeof paint === "object" && "type" in paint)
     .map((paint) => {
-      const typedPaint = paint as SolidPaint;
+      const typedPaint = paint as Paint;
       return {
         type: typedPaint.type,
         visible: typedPaint.visible,
         opacity: typedPaint.opacity,
         imageHash: "imageHash" in typedPaint && typeof typedPaint.imageHash === "string" ? typedPaint.imageHash : undefined,
+        imageRef: "imageHash" in typedPaint && typeof typedPaint.imageHash === "string" ? typedPaint.imageHash : undefined,
+        asset_id: typedPaint.type === "IMAGE" ? assetId : undefined,
         color: "color" in typedPaint ? typedPaint.color : undefined,
       };
     });
@@ -46,6 +54,32 @@ function hasImagePaint(paints: unknown): boolean {
   });
 }
 
+function firstImageHash(paints: unknown): string | undefined {
+  if (!Array.isArray(paints)) {
+    return undefined;
+  }
+
+  for (const paint of paints) {
+    if (
+      paint &&
+      typeof paint === "object" &&
+      "type" in paint &&
+      paint.type === "IMAGE" &&
+      (!("visible" in paint) || paint.visible !== false) &&
+      "imageHash" in paint &&
+      typeof paint.imageHash === "string"
+    ) {
+      return paint.imageHash;
+    }
+  }
+
+  return undefined;
+}
+
+function isVectorLikeNode(node: SceneNode | PageNode): node is SceneNode {
+  return ["VECTOR", "STAR", "LINE", "ELLIPSE", "POLYGON", "BOOLEAN_OPERATION"].includes(node.type);
+}
+
 function normalizeTextStyle(node: TextNode) {
   return {
     fontFamily: typeof node.fontName === "object" ? node.fontName.family : undefined,
@@ -82,31 +116,44 @@ function normalizedNumberAssign(node: NormalizedSceneNode, key: "x" | "y" | "wid
   }
 }
 
-async function normalizeNode(node: SceneNode | PageNode, fallbackType?: string): Promise<NormalizedSceneNode> {
+async function normalizeNode(node: SceneNode | PageNode, context: NormalizeContext, fallbackType?: string): Promise<NormalizedSceneNode> {
   const bounds = "absoluteBoundingBox" in node ? node.absoluteBoundingBox : null;
   const fills = "fills" in node ? clonePaints(node, "fills") : undefined;
   const hasImageFill = hasImagePaint(fills);
+  const shouldExportAsAsset = hasImageFill || isVectorLikeNode(node);
+  const exportedAsset = shouldExportAsAsset && "exportAsync" in node
+    ? await exportAsset(node as SceneNode, isVectorLikeNode(node) ? "SVG" : "PNG", firstImageHash(fills))
+    : null;
+  if (exportedAsset) {
+    context.assets.set(exportedAsset.id, exportedAsset);
+  }
   const normalized: NormalizedSceneNode = {
     id: node.id,
     name: node.name,
-    type: fallbackType || (hasImageFill ? "IMAGE" : node.type),
+    type: fallbackType || (shouldExportAsAsset && exportedAsset ? "IMAGE" : node.type),
     visible: "visible" in node ? node.visible : true,
     x: bounds?.x,
     y: bounds?.y,
     width: bounds?.width,
     height: bounds?.height,
-    fills: normalizePaints(fills),
-    strokes: "strokes" in node ? normalizePaints(clonePaints(node, "strokes")) : undefined,
+    absoluteBoundingBox: bounds ? {
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.width,
+      height: bounds.height,
+    } : undefined,
+    fills: normalizePaints(fills, exportedAsset?.id),
+    strokes: "strokes" in node ? normalizePaints(clonePaints(node, "strokes"), exportedAsset?.id) : undefined,
   };
 
-  if (hasImageFill && "exportAsync" in node) {
-    const asset = await exportAsset(node as SceneNode);
-    if (asset) {
-      normalized.image = {
-        dataUri: asset.dataUrl,
-        alt: node.name,
-      };
-    }
+  if (exportedAsset) {
+    normalized.asset_id = exportedAsset.id;
+    normalized.image = {
+      asset_id: exportedAsset.id,
+      imageHash: exportedAsset.imageHash,
+      dataUri: exportedAsset.dataUrl,
+      alt: node.name,
+    };
   }
 
   if (node.type === "TEXT") {
@@ -123,7 +170,7 @@ async function normalizeNode(node: SceneNode | PageNode, fallbackType?: string):
   }
 
   if ("children" in node) {
-    normalized.children = await Promise.all(node.children.map((child) => normalizeNode(child)));
+    normalized.children = await Promise.all(node.children.map((child) => normalizeNode(child, context)));
     applyDerivedBounds(normalized);
   }
 
@@ -134,22 +181,51 @@ function bytesToDataUrl(bytes: Uint8Array, mimeType: string) {
   return `data:${mimeType};base64,${figma.base64Encode(bytes)}`;
 }
 
-async function exportAsset(node: SceneNode): Promise<NormalizedAsset | null> {
+function assetId(node: SceneNode, format: AssetExportFormat) {
+  return `${node.id}:${format.toLowerCase()}`;
+}
+
+function assetPath(node: SceneNode, format: AssetExportFormat) {
+  const extension = format === "SVG" ? "svg" : "png";
+  const slug = node.name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "") || "asset";
+
+  return `assets/${slug}-${node.id.replace(/[^a-z0-9]+/gi, "-")}.${extension}`;
+}
+
+function contentBase64FromDataUrl(dataUrl: string) {
+  return dataUrl.replace(/^data:[^;,]+;base64,/, "");
+}
+
+async function exportAsset(node: SceneNode, format: AssetExportFormat, imageHash?: string): Promise<NormalizedAsset | null> {
   if (!("exportAsync" in node)) {
     return null;
   }
 
+  const mimeType = format === "SVG" ? "image/svg+xml" : "image/png";
+
   try {
-    const bytes = await node.exportAsync({ format: "PNG", constraint: { type: "SCALE", value: 1 } });
+    const bytes = format === "SVG"
+      ? await node.exportAsync({ format: "SVG" })
+      : await node.exportAsync({ format: "PNG", constraint: { type: "SCALE", value: 1 } });
+    const dataUrl = bytesToDataUrl(bytes, mimeType);
 
     return {
-      id: node.id,
-      name: `${node.name}.png`,
-      format: "PNG",
-      dataUrl: bytesToDataUrl(bytes, "image/png"),
+      id: assetId(node, format),
+      name: `${node.name}.${format.toLowerCase()}`,
+      format,
+      dataUrl,
+      mime_type: mimeType,
+      content_base64: contentBase64FromDataUrl(dataUrl),
+      path: assetPath(node, format),
+      node_id: node.id,
+      imageHash,
     };
   } catch (error) {
-    console.warn("Unable to export selected node", error);
+    console.warn("Unable to export Figma asset", error);
     return null;
   }
 }
@@ -159,7 +235,8 @@ async function getDocument(): Promise<NormalizedDocument> {
     await figma.loadAllPagesAsync();
   }
 
-  const pages = await Promise.all(figma.root.children.map((page) => normalizeNode(page, "PAGE")));
+  const context: NormalizeContext = { assets: new Map() };
+  const pages = await Promise.all(figma.root.children.map((page) => normalizeNode(page, context, "PAGE")));
   const root: NormalizedSceneNode = {
     id: figma.root.id,
     name: figma.root.name || "Figma document",
@@ -175,7 +252,7 @@ async function getDocument(): Promise<NormalizedDocument> {
     type: "DOCUMENT",
     exportedAt: new Date().toISOString(),
     root,
-    assets: [],
+    assets: Array.from(context.assets.values()),
   };
 }
 

plugins/figma-to-wordpress/src/index.ts

@@ -24,6 +24,7 @@ export interface FigmaSceneNode {
   visible?: boolean;
   style?: FigmaTextStyle;
   image?: FigmaImageSource;
+  asset_id?: string;
   href?: string;
 }
 
@@ -32,6 +33,9 @@ export interface FigmaPaint {
   visible?: boolean;
   color?: string | FigmaRgbColor;
   opacity?: number;
+  imageHash?: string;
+  imageRef?: string;
+  asset_id?: string;
 }
 
 export interface FigmaRgbColor {
@@ -50,6 +54,8 @@ export interface FigmaTextStyle {
 }
 
 export interface FigmaImageSource {
+  asset_id?: string;
+  imageHash?: string;
   src?: string;
   dataUri?: string;
   alt?: string;

plugins/figma-to-wordpress/src/payload.ts

@@ -29,7 +29,6 @@ export interface WordPressRunnerRequest {
   };
   goal: string;
   figma: FigmaScenegraphPayload;
-  artifact_bundle: WebsiteArtifactBundle;
 }
 
 export interface FigmaScenegraphPayload {
@@ -80,7 +79,7 @@ function parseDataUri(content: string): { mimeType: string; contentBase64: strin
   };
 }
 
-export function buildWordPressRunnerRequest(bundle: WebsiteArtifactBundle, selection: NormalizedSelection): WordPressRunnerRequest {
+export function buildWordPressRunnerRequest(_bundle: WebsiteArtifactBundle, selection: NormalizedSelection): WordPressRunnerRequest {
   return {
     schema: "figma-to-wordpress/runner-request/v1",
     source: {
@@ -90,7 +89,6 @@ export function buildWordPressRunnerRequest(bundle: WebsiteArtifactBundle, selec
     },
     goal: `Import ${selection.name} into WordPress using Static Site Importer inside a browser Playground session.`,
     figma: toFigmaScenegraphPayload(selection),
-    artifact_bundle: bundle,
   };
 }
 

plugins/figma-to-wordpress/src/types.ts

@@ -1,8 +1,13 @@
 export type NormalizedAsset = {
   id: string;
   name: string;
-  format: "PNG";
+  format: "PNG" | "SVG";
   dataUrl: string;
+  mime_type?: string;
+  content_base64?: string;
+  path?: string;
+  node_id?: string;
+  imageHash?: string;
 };
 
 export type NormalizedSceneNode = {
@@ -14,6 +19,12 @@ export type NormalizedSceneNode = {
   y?: number;
   width?: number;
   height?: number;
+  absoluteBoundingBox?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
   fills?: NormalizedPaint[];
   strokes?: NormalizedPaint[];
   characters?: string;
@@ -27,10 +38,13 @@ export type NormalizedSceneNode = {
     textAlignHorizontal?: string;
   };
   image?: {
+    asset_id?: string;
+    imageHash?: string;
     src?: string;
     dataUri?: string;
     alt?: string;
   };
+  asset_id?: string;
   href?: string;
   children?: NormalizedSceneNode[];
 };
@@ -40,6 +54,8 @@ export type NormalizedPaint = {
   visible?: boolean;
   opacity?: number;
   imageHash?: string;
+  imageRef?: string;
+  asset_id?: string;
   color?: {
     r: number;
     g: number;