Figma codegen for Slint in dev-mode and vscode extension

tools/figma-inspector/backend/code.ts

@@ -8,21 +8,18 @@ import {
     dispatchTS,
     getStatus,
     updateUI,
+    getSlintSnippet,
 } from "./utils/code-utils";
 
-figma.showUI(__html__, {
-    themeColors: true,
-    width: 400,
-    height: 320,
-});
-
-listenTS("copyToClipboard", () => {
-    figma.notify("Copied!");
-});
-
-figma.on("selectionchange", () => {
-    updateUI();
-});
-
-// init
-updateUI();
+if (figma.editorType === "dev" && figma.mode === "codegen") {
+    figma.codegen.on("generate", async ({ node }) => {
+        const slintSnippet = await getSlintSnippet();
+        return [
+            {
+                title: "Slint Code: " + node.name,
+                language: "CSS",
+                code: slintSnippet,
+            },
+        ];
+    });
+}

tools/figma-inspector/backend/utils/code-utils.ts

@@ -96,10 +96,10 @@ function transformStyle(styleObj: StyleObject): string {
             }
 
             if (value.includes("linear-gradient")) {
-                return `${finalKey}: @${finalValue}`;
+                return `  ${finalKey}: @${finalValue}`;
             }
 
-            return `${finalKey}: ${finalValue}`;
+            return `  ${finalKey}: ${finalValue}`;
         });
 
     return filteredEntries.length > 0 ? `${filteredEntries.join(";\n")};` : "";
@@ -117,3 +117,16 @@ export async function updateUI() {
 
     dispatchTS("updatePropertiesCallback", { title, slintProperties });
 }
+
+export async function getSlintSnippet(): Promise<string> {
+    const cssProperties = await figma.currentPage.selection[0].getCSSAsync();
+    const slintProperties = transformStyle(cssProperties);
+
+    let elementName = "Rectangle";
+    const node = figma.currentPage.selection[0].type;
+    if (node === "TEXT") {
+        elementName = "Text";
+    }
+
+    return `${elementName} {\n${slintProperties}\n}`;
+}

tools/figma-inspector/figma.config.ts

@@ -10,7 +10,10 @@ export const manifest: PluginManifest = {
     api: "1.0.0",
     main: "code.js",
     ui: "index.html",
-    editorType: ["figma", "dev"],
+    editorType: ["dev"],
+    capabilities: ["codegen", "vscode"],
+    codegenLanguages: [{ label: "Slint", value: "slint" }],
+    codegenPreferences: [],
     documentAccess: "dynamic-page",
     networkAccess: {
         allowedDomains: ["*"],