Shadow and blur effects support for text layers, Tailwind prefix support and new placeholder service (#166)

* Update placeholder image URLs to use placehold.co and enhance gradient warning messages

* Add support for text shadow and layer blur effects across all text builders (HTML, Tailwind, Flutter and SwiftUI)

* Add custom prefix support for Tailwind classes in code generation

Author: Lampenbauer

apps/plugin/plugin-src/code.ts

@@ -105,40 +105,40 @@ const codegenMode = async () => {
   // figma.showUI(__html__, { visible: false });
   await getUserSettings();
 
-  figma.codegen.on("generate", ({ language, node }) => {
+  figma.codegen.on("generate", async ({ language, node }: CodegenEvent): Promise<CodegenResult[]> => {
     const convertedSelection = convertIntoNodes([node], null);
 
     switch (language) {
       case "html":
         return [
           {
-            title: `Code`,
-            code: htmlMain(
+            title: "Code",
+            code: await htmlMain(
               convertedSelection,
               { ...userPluginSettings, jsx: false },
               true,
             ),
             language: "HTML",
           },
           {
-            title: `Text Styles`,
+            title: "Text Styles",
             code: htmlCodeGenTextStyles(userPluginSettings),
             language: "HTML",
           },
         ];
       case "html_jsx":
         return [
           {
-            title: `Code`,
-            code: htmlMain(
+            title: "Code",
+            code: await htmlMain(
               convertedSelection,
               { ...userPluginSettings, jsx: true },
               true,
             ),
             language: "HTML",
           },
           {
-            title: `Text Styles`,
+            title: "Text Styles",
             code: htmlCodeGenTextStyles(userPluginSettings),
             language: "HTML",
           },
@@ -147,20 +147,20 @@ const codegenMode = async () => {
       case "tailwind_jsx":
         return [
           {
-            title: `Code`,
-            code: tailwindMain(convertedSelection, {
+            title: "Code",
+            code: await tailwindMain(convertedSelection, {
               ...userPluginSettings,
               jsx: language === "tailwind_jsx",
             }),
             language: "HTML",
           },
           // {
-          //   title: `Style`,
+          //   title: "Style",
           //   code: tailwindMain(convertedSelection, defaultPluginSettings),
           //   language: "HTML",
           // },
           {
-            title: `Tailwind Colors`,
+            title: "Tailwind Colors",
             code: retrieveGenericSolidUIColors("Tailwind")
               .map((d) => {
                 let str = `${d.hex};`;
@@ -176,39 +176,39 @@ const codegenMode = async () => {
             language: "JAVASCRIPT",
           },
           {
-            title: `Text Styles`,
+            title: "Text Styles",
             code: tailwindCodeGenTextStyles(),
             language: "HTML",
           },
         ];
       case "flutter":
         return [
           {
-            title: `Code`,
+            title: "Code",
             code: flutterMain(convertedSelection, {
               ...userPluginSettings,
               flutterGenerationMode: "snippet",
             }),
             language: "SWIFT",
           },
           {
-            title: `Text Styles`,
+            title: "Text Styles",
             code: flutterCodeGenTextStyles(),
             language: "SWIFT",
           },
         ];
       case "swiftUI":
         return [
           {
-            title: `SwiftUI`,
+            title: "SwiftUI",
             code: swiftuiMain(convertedSelection, {
               ...userPluginSettings,
               swiftUIGenerationMode: "snippet",
             }),
             language: "SWIFT",
           },
           {
-            title: `Text Styles`,
+            title: "Text Styles",
             code: swiftUICodeGenTextStyles(),
             language: "SWIFT",
           },

manifest.json

@@ -8,7 +8,7 @@
   "capabilities": ["inspect", "codegen", "vscode"],
   "permissions": [],
   "networkAccess": {
-    "allowedDomains": ["none"]
+    "allowedDomains": ["https://placehold.co"]
   },
   "codegenLanguages": [
     { "label": "HTML", "value": "html" },

packages/backend/src/flutter/builderImpl/flutterColor.ts

@@ -56,7 +56,7 @@ export const flutterBoxDecorationColor = (
 export const flutterDecorationImage = (node: SceneNode, fill: ImagePaint) => {
   addWarning("Image fills are replaced with placeholders");
   return generateWidgetCode("DecorationImage", {
-    image: `NetworkImage("https://via.placeholder.com/${node.width.toFixed(
+    image: `NetworkImage("https://placehold.co/${node.width.toFixed(
       0,
     )}x${node.height.toFixed(0)}")`,
     fit: fitToBoxFit(fill),

packages/backend/src/flutter/flutterMain.ts

@@ -148,7 +148,7 @@ const flutterContainer = (node: SceneNode, child: string): string => {
   let image = "";
   if ("fills" in node && retrieveTopFill(node.fills)?.type === "IMAGE") {
     addWarning("Image fills are replaced with placeholders");
-    image = `Image.network("https://via.placeholder.com/${node.width.toFixed(
+    image = `Image.network("https://placehold.co/${node.width.toFixed(
       0,
     )}x${node.height.toFixed(0)}")`;
   }

packages/backend/src/flutter/flutterTextBuilder.ts

@@ -13,6 +13,8 @@ import {
 } from "../common/commonTextHeightSpacing";
 
 export class FlutterTextBuilder extends FlutterDefaultBuilder {
+  node?: TextNode;
+
   constructor(optChild: string = "") {
     super(optChild);
   }
@@ -22,6 +24,7 @@ export class FlutterTextBuilder extends FlutterDefaultBuilder {
   }
 
   createText(node: TextNode): this {
+    this.node = node;
     let alignHorizontal =
       node.textAlignHorizontal?.toString()?.toLowerCase() ?? "left";
     alignHorizontal =
@@ -106,6 +109,12 @@ export class FlutterTextBuilder extends FlutterDefaultBuilder {
         styleProperties.fontFeatures = `[FontFeature.enable("sups")]`;
       }
 
+      // Add text-shadow if a drop shadow is applied
+      const shadow = this.textShadow();
+      if (shadow) {
+        styleProperties.shadows = shadow;
+      }
+
       const style = generateWidgetCode("TextStyle", styleProperties);
 
       let text = segment.characters;
@@ -155,6 +164,10 @@ export class FlutterTextBuilder extends FlutterDefaultBuilder {
 
   textAutoSize(node: TextNode): this {
     this.child = wrapTextAutoResize(node, this.child);
+    // First wrap with SizedBox/Expanded as before, then apply layer blur if any.
+    let wrapped = wrapTextAutoResize(node, this.child);
+    wrapped = wrapTextWithLayerBlur(node, wrapped);
+    this.child = wrapped;
     return this;
   }
 
@@ -165,6 +178,39 @@ export class FlutterTextBuilder extends FlutterDefaultBuilder {
     }
     return "";
   };
+
+  /**
+   * New method to handle text shadow.
+   * Checks if a drop shadow effect is applied to the node and
+   * returns Flutter code for the TextStyle "shadows" property.
+   */
+  textShadow(): string {
+    if (this.node && (this.node as TextNode).effects) {
+      const effects = (this.node as TextNode).effects;
+      const dropShadow = effects.find(
+        (effect) =>
+          effect.type === "DROP_SHADOW" && effect.visible !== false,
+      );
+      if (dropShadow) {
+        const ds = dropShadow as DropShadowEffect;
+        const offsetX = Math.round(ds.offset.x);
+        const offsetY = Math.round(ds.offset.y);
+        const blurRadius = Math.round(ds.radius);
+        const r = Math.round(ds.color.r * 255);
+        const g = Math.round(ds.color.g * 255);
+        const b = Math.round(ds.color.b * 255);
+        // Convert to hex for Flutter Color (e.g., Color(0xFF112233))
+        const hex = ((1 << 24) + (r << 16) + (g << 8) + b)
+          .toString(16)
+          .slice(1)
+          .toUpperCase();
+        return `[Shadow(offset: Offset(${offsetX}, ${offsetY}), blurRadius: ${blurRadius}, color: Color(0xFF${hex}).withOpacity(${ds.color.a.toFixed(
+          2,
+        )}))]`;
+      }
+    }
+    return "";
+  }
 }
 
 export const wrapTextAutoResize = (node: TextNode, child: string): string => {
@@ -201,5 +247,25 @@ export const wrapTextAutoResize = (node: TextNode, child: string): string => {
   return child;
 };
 
+// New helper to wrap with layer blur using Flutter's ImageFiltered widget.
+export const wrapTextWithLayerBlur = (
+  node: TextNode,
+  child: string,
+): string => {
+  if (node.effects) {
+    const blurEffect = node.effects.find(
+      (effect) =>
+        effect.type === "LAYER_BLUR" && effect.visible !== false && effect.radius > 0,
+    );
+    if (blurEffect) {
+      return generateWidgetCode("ImageFiltered", {
+        imageFilter: `ImageFilter.blur(sigmaX: ${blurEffect.radius}, sigmaY: ${blurEffect.radius})`,
+        child: child,
+      });
+    }
+  }
+  return child;
+};
+
 export const parseTextAsCode = (originalText: string) =>
   originalText.replace(/\n/g, "\\n");

packages/backend/src/html/htmlMain.ts

@@ -225,7 +225,7 @@ const htmlAsset = (node: SceneNode, settings: HTMLSettings): string => {
   if (retrieveTopFill(node.fills)?.type === "IMAGE") {
     addWarning("Image fills are replaced with placeholders");
     tag = "img";
-    src = ` src="https://via.placeholder.com/${node.width.toFixed(
+    src = ` src="https://placehold.co/$${node.width.toFixed(
       0,
     )}x${node.height.toFixed(0)}"`;
   }
@@ -268,15 +268,15 @@ const htmlContainer = (
       addWarning("Image fills are replaced with placeholders");
       if (!("children" in node) || node.children.length === 0) {
         tag = "img";
-        src = ` src="https://via.placeholder.com/${node.width.toFixed(
+        src = ` src="https://placehold.co/${node.width.toFixed(
           0,
         )}x${node.height.toFixed(0)}"`;
       } else {
         builder.addStyles(
           formatWithJSX(
             "background-image",
             settings.jsx,
-            `url(https://via.placeholder.com/${node.width.toFixed(
+            `url(https://placehold.co/${node.width.toFixed(
               0,
             )}x${node.height.toFixed(0)})`,
           ),

packages/backend/src/html/htmlTextBuilder.ts

@@ -24,6 +24,18 @@ export class HtmlTextBuilder extends HtmlDefaultBuilder {
     }
 
     return segments.map((segment) => {
+      // Prepare additional CSS properties from layer blur and drop shadow effects.
+      const additionalStyles: { [key: string]: string } = {};
+
+      const layerBlurStyle = this.getLayerBlurStyle();
+      if (layerBlurStyle) {
+        additionalStyles.filter = layerBlurStyle;
+      }
+      const textShadowStyle = this.getTextShadowStyle();
+      if (textShadowStyle) {
+        additionalStyles["text-shadow"] = textShadowStyle;
+      }
+
       const styleAttributes = formatMultipleJSX(
         {
           color: htmlColorFromFills(segment.fills),
@@ -36,12 +48,13 @@ export class HtmlTextBuilder extends HtmlDefaultBuilder {
           "line-height": this.lineHeight(segment.lineHeight, segment.fontSize),
           "letter-spacing": this.letterSpacing(
             segment.letterSpacing,
-            segment.fontSize,
+            segment.fontSize
           ),
           // "text-indent": segment.indentation,
           "word-wrap": "break-word",
+          ...additionalStyles,
         },
-        this.isJSX,
+        this.isJSX
       );
 
       const charsWithLineBreak = segment.characters.split("\n").join("<br/>");
@@ -139,4 +152,49 @@ export class HtmlTextBuilder extends HtmlDefaultBuilder {
     }
     return this;
   }
+
+  /**
+   * Returns a CSS filter value for layer blur.
+   */
+  private getLayerBlurStyle(): string {
+    if (this.node && (this.node as TextNode).effects) {
+      const effects = (this.node as TextNode).effects;
+      const blurEffect = effects.find(
+        (effect) =>
+          effect.type === "LAYER_BLUR" &&
+          effect.visible !== false &&
+          effect.radius > 0
+      );
+      if (blurEffect && blurEffect.radius) {
+        return `blur(${blurEffect.radius}px)`;
+      }
+    }
+    return "";
+  }
+
+  /**
+   * Returns a CSS text-shadow value if a drop shadow effect is applied.
+   */
+  private getTextShadowStyle(): string {
+    if (this.node && (this.node as TextNode).effects) {
+      const effects = (this.node as TextNode).effects;
+      const dropShadow = effects.find(
+        (effect) => effect.type === "DROP_SHADOW" && effect.visible !== false
+      );
+      if (dropShadow) {
+        const ds = dropShadow as DropShadowEffect; // Type narrow the effect.
+        const offsetX = Math.round(ds.offset.x);
+        const offsetY = Math.round(ds.offset.y);
+        const blurRadius = Math.round(ds.radius);
+        const r = Math.round(ds.color.r * 255);
+        const g = Math.round(ds.color.g * 255);
+        const b = Math.round(ds.color.b * 255);
+        const a = ds.color.a;
+        return `${offsetX}px ${offsetY}px ${blurRadius}px rgba(${r}, ${g}, ${b}, ${a.toFixed(
+          2
+        )})`;
+      }
+    }
+    return "";
+  }
 }

packages/backend/src/swiftui/builderImpl/swiftuiColor.ts

@@ -60,7 +60,7 @@ export const swiftuiBackground = (
     return swiftuiGradient(fill);
   } else if (fill?.type === "IMAGE") {
     addWarning("Image fills are replaced with placeholders");
-    return `AsyncImage(url: URL(string: "https://via.placeholder.com/${node.width.toFixed(
+    return `AsyncImage(url: URL(string: "https://placehold.co/${node.width.toFixed(
       0,
     )}x${node.height.toFixed(0)}"))`;
   }