Figma SDK

Codia Figma SDK (figma-image-to-design) lets you build Figma plugins that convert UI screenshots into Figma designs. Call the Codia API to fetch design data, then use the SDK to generate the corresponding layers inside Figma.

Usage Flow

1. Plugin UI (ui.html)

Create the plugin UI with a button that triggers design generation. When the user clicks the button, the page calls the Codia API for design data and forwards it to the plugin main thread:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Codia Design Generator</title>
  </head>
  <body>
    <button id="generateBtn">Generate Design</button>

    <script>
      const generateBtn = document.getElementById("generateBtn");
      const CODIA_API_KEY = "YOUR_API_KEY_HERE";
      const IMAGE_URL = "https://your-image-url.com/screenshot.png";

      async function fetchDSLFromCodia() {
        const response = await fetch("https://api.codia.ai/v1/open/image_to_design", {
          method: "POST",
          headers: {
            Authorization: `Bearer ${CODIA_API_KEY}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ image_url: IMAGE_URL }),
        });
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const data = await response.json();
        if (data.code !== 0) throw new Error(data.message || "API request failed");
        return data.data.visualElement;
      }

      generateBtn.addEventListener("click", async () => {
        try {
          const designData = await fetchDSLFromCodia();
          parent.postMessage({ pluginMessage: { type: "generate-design", data: designData } }, "*");
        } catch (error) {
          console.error("Error:", error);
        }
      });

      window.addEventListener("message", (event) => {
        const msg = event.data.pluginMessage;
        if (msg && msg.type === "design-result") {
          if (msg.success) console.log("Design generation successful!");
          else console.error("Generation failed:", msg.error);
        }
      });
    </script>
  </body>
</html>

2. Install Dependencies

Install the SDK package — it provides the core logic for turning design data into native Figma layers:

bash

npm install figma-image-to-design

3. Plugin Main Thread (code.ts)

Receive messages from the UI, process the design data with the SDK, and generate the corresponding Figma layers. Note: Figma plugins don't run TypeScript natively — compile this file to JavaScript before publishing.

typescript

import { DesignGenerator } from "figma-image-to-design";

figma.showUI(__html__, { width: 300, height: 200 });

figma.ui.onmessage = async (msg) => {
  if (msg.type === "generate-design") {
    try {
      const result = await DesignGenerator.generateFromVisualElement(msg.data);
      if (result.status === "SUCCESS") {
        figma.ui.postMessage({ type: "design-result", success: true, result });
      } else {
        figma.ui.postMessage({ type: "design-result", success: false, error: result.message });
      }
    } catch (error) {
      figma.ui.postMessage({ type: "design-result", success: false, error: error.message });
    }
  }
};

Result Structure

typescript

interface DesignGenerateResult {
  message: string;       // Result message
  statusCode: number;    // Status code
  status: "SUCCESS" | "SCRIPT_ERROR" | "CONVERSION_ERROR";
}

Core Flow

UI sends message: user clicks the button → fetch API data → send to the main thread via parent.postMessage().
Main thread receives: figma.ui.onmessage listens → process the data and generate the design.
Result feedback: the main thread sends the result back to the UI via figma.ui.postMessage().

Notes

Replace YOUR_API_KEY_HERE with your actual API key.
Replace the image URL with your actual screenshot URL.

Demo Project

A complete starter project (UI, Webpack + TypeScript build config, and Codia API integration examples) is available for download: codia-sdk-demo.zip. After extracting, follow the README.md in the project root to get started.