Export images for HTML (#181)

* Added simple image export using Base64 - groups with image bg not supported yet.

* added a (flawed) way to export images from groups by exporting the paint objects

* reworked background images in a much simpler way

* store base64 in node so it's only done once

* added some minor changes to messaging and re-drawing while trying to track down issues with the infinite image conversion issue

* Fix missing prop in debug view

* Prevent run from happening multiple times due to changing document during conversion

* hopefully clarified the steps of exporting an image when there are child nodes.

* Added toggle that allows you to disable exporting of images

* embedImages is disabled for non-html languages.

Author: mimshwright

apps/debug/pages/index.tsx

@@ -19,6 +19,7 @@ export default function Web() {
             <PluginFigmaToolbar variant="(Light)" />
             <PluginUI
               code={"code goes hereeeee"}
+              isLoading={false}
               selectedFramework={selectedFramework}
               setSelectedFramework={setSelectedFramework}
               htmlPreview={null}
@@ -36,6 +37,7 @@ export default function Web() {
             <PluginFigmaToolbar variant="(Dark)" />
             <PluginUI
               code={"code goes hereeeee"}
+              isLoading={false}
               selectedFramework={selectedFramework}
               setSelectedFramework={setSelectedFramework}
               htmlPreview={null}

apps/plugin/plugin-src/code.ts

@@ -28,6 +28,8 @@ export const defaultPluginSettings: PluginSettings = {
   roundTailwindValues: false,
   roundTailwindColors: false,
   customTailwindColors: false,
+  customTailwindPrefix: "",
+  embedImages: false,
 };
 
 // A helper type guard to ensure the key belongs to the PluginSettings type
@@ -63,14 +65,23 @@ const initSettings = async () => {
   safeRun(userPluginSettings);
 };
 
-const safeRun = (settings: PluginSettings) => {
-  try {
-    run(settings);
-  } catch (e) {
-    if (e && typeof e === "object" && "message" in e) {
-      const error = e as Error;
-      console.log("error: ", error.stack);
-      figma.ui.postMessage({ type: "error", error: error.message });
+// Used to prevent running from happening again.
+let isLoading = false;
+const safeRun = async (settings: PluginSettings) => {
+  if (isLoading === false) {
+    try {
+      isLoading = true;
+      await run(settings);
+      // hack to make it not immediately set to false when complete. (executes on next frame)
+      setTimeout(() => {
+        isLoading = false;
+      }, 1);
+    } catch (e) {
+      if (e && typeof e === "object" && "message" in e) {
+        const error = e as Error;
+        console.log("error: ", error.stack);
+        figma.ui.postMessage({ type: "error", error: error.message });
+      }
     }
   }
 };
@@ -86,6 +97,10 @@ const standardMode = async () => {
 
   // Listen for document changes
   figma.on("documentchange", () => {
+    // Node: This was causing an infinite load when you try to export a background image from a group that contains children.
+    // The reason for this is that the code will temporarily hide the children of the group in order to export a clean image
+    // then restores the visibility of the children. This constitutes a document change so it's restarting the whole conversion.
+    // In order to stop this, we disable safeRun() when doing conversions (while isLoading === true).
     safeRun(userPluginSettings);
   });
 
@@ -105,121 +120,124 @@ const codegenMode = async () => {
   // figma.showUI(__html__, { visible: false });
   await getUserSettings();
 
-  figma.codegen.on("generate", async ({ language, node }: CodegenEvent): Promise<CodegenResult[]> => {
-    const convertedSelection = convertIntoNodes([node], null);
-
-    switch (language) {
-      case "html":
-        return [
-          {
-            title: "Code",
-            code: await htmlMain(
-              convertedSelection,
-              { ...userPluginSettings, jsx: false },
-              true,
-            ),
-            language: "HTML",
-          },
-          {
-            title: "Text Styles",
-            code: htmlCodeGenTextStyles(userPluginSettings),
-            language: "HTML",
-          },
-        ];
-      case "html_jsx":
-        return [
-          {
-            title: "Code",
-            code: await htmlMain(
-              convertedSelection,
-              { ...userPluginSettings, jsx: true },
-              true,
-            ),
-            language: "HTML",
-          },
-          {
-            title: "Text Styles",
-            code: htmlCodeGenTextStyles(userPluginSettings),
-            language: "HTML",
-          },
-        ];
-      case "tailwind":
-      case "tailwind_jsx":
-        return [
-          {
-            title: "Code",
-            code: await tailwindMain(convertedSelection, {
-              ...userPluginSettings,
-              jsx: language === "tailwind_jsx",
-            }),
-            language: "HTML",
-          },
-          // {
-          //   title: "Style",
-          //   code: tailwindMain(convertedSelection, defaultPluginSettings),
-          //   language: "HTML",
-          // },
-          {
-            title: "Tailwind Colors",
-            code: retrieveGenericSolidUIColors("Tailwind")
-              .map((d) => {
-                let str = `${d.hex};`;
-                if (d.colorName !== d.hex) {
-                  str += ` // ${d.colorName}`;
-                }
-                if (d.meta) {
-                  str += ` (${d.meta})`;
-                }
-                return str;
-              })
-              .join("\n"),
-            language: "JAVASCRIPT",
-          },
-          {
-            title: "Text Styles",
-            code: tailwindCodeGenTextStyles(),
-            language: "HTML",
-          },
-        ];
-      case "flutter":
-        return [
-          {
-            title: "Code",
-            code: flutterMain(convertedSelection, {
-              ...userPluginSettings,
-              flutterGenerationMode: "snippet",
-            }),
-            language: "SWIFT",
-          },
-          {
-            title: "Text Styles",
-            code: flutterCodeGenTextStyles(),
-            language: "SWIFT",
-          },
-        ];
-      case "swiftUI":
-        return [
-          {
-            title: "SwiftUI",
-            code: swiftuiMain(convertedSelection, {
-              ...userPluginSettings,
-              swiftUIGenerationMode: "snippet",
-            }),
-            language: "SWIFT",
-          },
-          {
-            title: "Text Styles",
-            code: swiftUICodeGenTextStyles(),
-            language: "SWIFT",
-          },
-        ];
-      default:
-        break;
-    }
+  figma.codegen.on(
+    "generate",
+    async ({ language, node }: CodegenEvent): Promise<CodegenResult[]> => {
+      const convertedSelection = convertIntoNodes([node], null);
+
+      switch (language) {
+        case "html":
+          return [
+            {
+              title: "Code",
+              code: await htmlMain(
+                convertedSelection,
+                { ...userPluginSettings, jsx: false },
+                true,
+              ),
+              language: "HTML",
+            },
+            {
+              title: "Text Styles",
+              code: htmlCodeGenTextStyles(userPluginSettings),
+              language: "HTML",
+            },
+          ];
+        case "html_jsx":
+          return [
+            {
+              title: "Code",
+              code: await htmlMain(
+                convertedSelection,
+                { ...userPluginSettings, jsx: true },
+                true,
+              ),
+              language: "HTML",
+            },
+            {
+              title: "Text Styles",
+              code: htmlCodeGenTextStyles(userPluginSettings),
+              language: "HTML",
+            },
+          ];
+        case "tailwind":
+        case "tailwind_jsx":
+          return [
+            {
+              title: "Code",
+              code: await tailwindMain(convertedSelection, {
+                ...userPluginSettings,
+                jsx: language === "tailwind_jsx",
+              }),
+              language: "HTML",
+            },
+            // {
+            //   title: "Style",
+            //   code: tailwindMain(convertedSelection, defaultPluginSettings),
+            //   language: "HTML",
+            // },
+            {
+              title: "Tailwind Colors",
+              code: retrieveGenericSolidUIColors("Tailwind")
+                .map((d) => {
+                  let str = `${d.hex};`;
+                  if (d.colorName !== d.hex) {
+                    str += ` // ${d.colorName}`;
+                  }
+                  if (d.meta) {
+                    str += ` (${d.meta})`;
+                  }
+                  return str;
+                })
+                .join("\n"),
+              language: "JAVASCRIPT",
+            },
+            {
+              title: "Text Styles",
+              code: tailwindCodeGenTextStyles(),
+              language: "HTML",
+            },
+          ];
+        case "flutter":
+          return [
+            {
+              title: "Code",
+              code: flutterMain(convertedSelection, {
+                ...userPluginSettings,
+                flutterGenerationMode: "snippet",
+              }),
+              language: "SWIFT",
+            },
+            {
+              title: "Text Styles",
+              code: flutterCodeGenTextStyles(),
+              language: "SWIFT",
+            },
+          ];
+        case "swiftUI":
+          return [
+            {
+              title: "SwiftUI",
+              code: swiftuiMain(convertedSelection, {
+                ...userPluginSettings,
+                swiftUIGenerationMode: "snippet",
+              }),
+              language: "SWIFT",
+            },
+            {
+              title: "Text Styles",
+              code: swiftUICodeGenTextStyles(),
+              language: "SWIFT",
+            },
+          ];
+        default:
+          break;
+      }
 
-    const blocks: CodegenResult[] = [];
-    return blocks;
-  });
+      const blocks: CodegenResult[] = [];
+      return blocks;
+    },
+  );
 };
 
 switch (figma.mode) {

apps/plugin/ui-src/App.tsx

@@ -111,14 +111,26 @@ export default function App() {
   }, []);
 
   const handleFrameworkChange = (updatedFramework: Framework) => {
-    setState((prevState) => ({
-      ...prevState,
-      // code: "// Loading...",
-      selectedFramework: updatedFramework,
-    }));
-    postUISettingsChangingMessage("framework", updatedFramework, {
-      targetOrigin: "*",
-    });
+    if (updatedFramework !== state.selectedFramework) {
+      setState((prevState) => ({
+        ...prevState,
+        // code: "// Loading...",
+        selectedFramework: updatedFramework,
+      }));
+      postUISettingsChangingMessage("framework", updatedFramework, {
+        targetOrigin: "*",
+      });
+    }
+  };
+  const handlePreferencesChange = (
+    key: keyof PluginSettings,
+    value: boolean | string,
+  ) => {
+    if (state.settings && state.settings[key] === value) {
+      // do nothing
+    } else {
+      postUISettingsChangingMessage(key, value, { targetOrigin: "*" });
+    }
   };
 
   const darkMode = figmaColorBgValue !== "#ffffff";
@@ -131,11 +143,9 @@ export default function App() {
         warnings={state.warnings}
         selectedFramework={state.selectedFramework}
         setSelectedFramework={handleFrameworkChange}
+        onPreferenceChanged={handlePreferencesChange}
         htmlPreview={state.htmlPreview}
         settings={state.settings}
-        onPreferenceChanged={(key: string, value: boolean | string) =>
-          postUISettingsChangingMessage(key, value, { targetOrigin: "*" })
-        }
         colors={state.colors}
         gradients={state.gradients}
       />

packages/backend/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@figma/plugin-typings": "^1.105.0",
+    "js-base64": "^3.7.7",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "types": "workspace:*"

packages/backend/src/altNodes/altNodeUtils.ts

@@ -42,6 +42,11 @@ export const isTypeOrGroupOfTypes = curry(
   },
 );
 
+export const isSVGNode = (node: SceneNode) => {
+  const altNode = node as AltNode<typeof node>;
+  return altNode.canBeFlattened;
+};
+
 export const renderNodeAsSVG = async (node: SceneNode) =>
   await node.exportAsync({ format: "SVG_STRING" });
 

packages/backend/src/code.ts

@@ -19,6 +19,7 @@ import { convertToCode } from "./common/retrieveUI/convertToCode";
 
 export const run = async (settings: PluginSettings) => {
   clearWarnings();
+
   const { framework } = settings;
   const selection = figma.currentPage.selection;