localhost-figma-mcp 1.5.0

package/dist/figma-plugin/code.js

@@ -0,0 +1,455 @@
+"use strict";
+(() => {
+  var __defProp = Object.defineProperty;
+  var __defProps = Object.defineProperties;
+  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(b)) {
+        if (__propIsEnum.call(b, prop))
+          __defNormalProp(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+  // src/plugin/build-layers.ts
+  var AUTO_LAYOUT_TOLERANCE = 2;
+  var WEIGHT_NAMES = {
+    100: ["Thin", "Hairline"],
+    200: ["ExtraLight", "Extra Light", "UltraLight"],
+    300: ["Light"],
+    400: ["Regular", "Normal", "Book"],
+    500: ["Medium"],
+    600: ["SemiBold", "Semi Bold", "DemiBold"],
+    700: ["Bold"],
+    800: ["ExtraBold", "Extra Bold", "UltraBold"],
+    900: ["Black", "Heavy"]
+  };
+  async function createFontPicker(substituted) {
+    var _a;
+    await figma.loadFontAsync({ family: "Inter", style: "Regular" }).catch(() => {
+    });
+    const styles = /* @__PURE__ */ new Map();
+    for (const { fontName } of await figma.listAvailableFontsAsync()) {
+      styles.set(fontName.family, [...(_a = styles.get(fontName.family)) != null ? _a : [], fontName.style]);
+    }
+    const cache = /* @__PURE__ */ new Map();
+    return async (requested, weight, italic) => {
+      var _a2, _b, _c;
+      const key = `${requested}|${weight}|${italic}`;
+      const cached = cache.get(key);
+      if (cached) return cached;
+      const family = styles.has(requested) ? requested : styles.has("Inter") ? "Inter" : [...styles.keys()][0];
+      const have = (_a2 = styles.get(family)) != null ? _a2 : [];
+      const names = WEIGHT_NAMES[Math.min(900, Math.max(100, Math.round(weight / 100) * 100))];
+      const italicNames = names.map((n) => n === "Regular" ? "Italic" : `${n} Italic`);
+      const wanted = italic ? italicNames : names;
+      const style = (_c = (_b = wanted.concat(names, "Regular").find((s) => have.includes(s))) != null ? _b : have[0]) != null ? _c : "Regular";
+      const font = { family, style };
+      if (family !== requested) substituted.add(`${requested} \u2192 ${family}`);
+      else if (!wanted.includes(style)) substituted.add(`${requested} ${wanted[0]} \u2192 ${style}`);
+      await figma.loadFontAsync(font);
+      cache.set(key, font);
+      return font;
+    };
+  }
+  var solid = (c) => ({ type: "SOLID", color: c.rgb, opacity: c.a });
+  async function buildText(layer, context) {
+    const node = figma.createText();
+    node.fontName = await context.pickFont(layer.font, layer.weight, layer.italic);
+    if (layer.requestedFont) context.substitutedFonts.add(`${layer.requestedFont} \u2192 ${node.fontName.family}`);
+    node.characters = layer.text;
+    node.fontSize = Math.max(1, layer.size);
+    node.fills = [solid(layer.color)];
+    if (layer.lineHeight) node.lineHeight = { value: layer.lineHeight, unit: "PIXELS" };
+    if (layer.letterSpacing) node.letterSpacing = { value: layer.letterSpacing, unit: "PIXELS" };
+    node.textAlignHorizontal = layer.align;
+    if (layer.decoration) node.textDecoration = layer.decoration;
+    if (layer.singleLine) {
+      node.textAutoResize = "WIDTH_AND_HEIGHT";
+    } else {
+      node.resize(Math.max(1, layer.w + 2), node.height);
+      node.textAutoResize = "HEIGHT";
+    }
+    return node;
+  }
+  function buildSvg(layer) {
+    try {
+      const node = figma.createNodeFromSvg(layer.svg);
+      if (node.width > 0 && layer.w > 0) node.rescale(layer.w / node.width);
+      return node;
+    } catch (e) {
+      const placeholder = figma.createFrame();
+      placeholder.fills = [];
+      placeholder.resize(Math.max(0.01, layer.w), Math.max(0.01, layer.h));
+      return placeholder;
+    }
+  }
+  function frameFills(layer) {
+    const fills = [];
+    if (layer.bg) fills.push(solid(layer.bg));
+    if (layer.gradients) fills.push(...layer.gradients);
+    if (layer.image) {
+      try {
+        const imageHash = figma.createImage(figma.base64Decode(layer.image)).hash;
+        fills.push({ type: "IMAGE", imageHash, scaleMode: layer.fit === "contain" ? "FIT" : "FILL" });
+      } catch (e) {
+      }
+    }
+    return fills;
+  }
+  var boxes = (kids) => kids.map((k) => ({ x: k.x, y: k.y, w: k.width, h: k.height }));
+  var drifted = (kids, expected) => kids.some((k, i) => {
+    const e = expected[i];
+    return [k.x - e.x, k.y - e.y, k.width - e.w, k.height - e.h].some((d) => Math.abs(d) > AUTO_LAYOUT_TOLERANCE);
+  });
+  function restore(node, layer, kids, expected) {
+    kids.forEach((k, i) => {
+      const e = expected[i];
+      if (Math.abs(k.width - e.w) > 0.01 || Math.abs(k.height - e.h) > 0.01) {
+        if (k.type === "TEXT") {
+          const mode = k.textAutoResize;
+          k.resize(Math.max(1, e.w), Math.max(1, e.h));
+          k.textAutoResize = mode;
+        } else {
+          k.resizeWithoutConstraints(Math.max(0.01, e.w), Math.max(0.01, e.h));
+        }
+      }
+      k.x = e.x;
+      k.y = e.y;
+    });
+    node.resize(Math.max(0.01, layer.w), Math.max(0.01, layer.h));
+  }
+  function revert(node, layer, kids, expected) {
+    for (const k of kids) if (k.layoutPositioning === "ABSOLUTE") k.layoutPositioning = "AUTO";
+    node.layoutMode = "NONE";
+    restore(node, layer, kids, expected);
+    return false;
+  }
+  function spacingFromPositions(settings, flow, w, h) {
+    var _a;
+    const horizontal = settings.direction === "HORIZONTAL";
+    if (settings.wrap || !flow.length || settings.justify !== "MIN" && settings.justify !== "MAX") return void 0;
+    const start = (b) => horizontal ? b.x : b.y;
+    const size2 = (b) => horizontal ? b.w : b.h;
+    const cross = (b) => horizontal ? b.y : b.x;
+    const gaps = flow.slice(1).map((b, i) => start(b) - start(flow[i]) - size2(flow[i]));
+    if (gaps.some((g) => Math.abs(g - gaps[0]) > 1)) return void 0;
+    const padding = [...settings.padding];
+    const last = flow[flow.length - 1];
+    if (settings.justify === "MIN") padding[horizontal ? 3 : 0] = start(flow[0]);
+    else padding[horizontal ? 1 : 2] = (horizontal ? w : h) - start(last) - size2(last);
+    if (settings.align === "MIN" && flow.every((b) => Math.abs(cross(b) - cross(flow[0])) <= 1)) {
+      padding[horizontal ? 0 : 3] = cross(flow[0]);
+    }
+    return padding.some((p) => p < 0) ? void 0 : { gap: (_a = gaps[0]) != null ? _a : settings.gap, padding };
+  }
+  function applyAutoLayout(node, layer) {
+    const settings = layer.autoLayout;
+    const kids = [...node.children];
+    if (!settings || !kids.length) return false;
+    const expected = boxes(kids);
+    const horizontal = settings.direction === "HORIZONTAL";
+    const configure = (gap, padding) => {
+      node.layoutMode = settings.direction;
+      node.primaryAxisSizingMode = "FIXED";
+      node.counterAxisSizingMode = "FIXED";
+      node.layoutWrap = settings.wrap && horizontal ? "WRAP" : "NO_WRAP";
+      if (node.layoutWrap === "WRAP") node.counterAxisSpacing = settings.counterGap;
+      node.itemSpacing = gap;
+      [node.paddingTop, node.paddingRight, node.paddingBottom, node.paddingLeft] = padding;
+      node.primaryAxisAlignItems = settings.justify;
+      node.counterAxisAlignItems = settings.align === "BASELINE" && !horizontal ? "MIN" : settings.align;
+      kids.forEach((k, i) => {
+        var _a;
+        if ((_a = layer.children[i]) == null ? void 0 : _a.absolute) k.layoutPositioning = "ABSOLUTE";
+      });
+      restore(node, layer, kids, expected);
+    };
+    configure(settings.gap, settings.padding);
+    if (drifted(kids, expected)) {
+      const flow = expected.filter((_, i) => {
+        var _a;
+        return !((_a = layer.children[i]) == null ? void 0 : _a.absolute);
+      });
+      const spacing = spacingFromPositions(settings, flow, layer.w, layer.h);
+      if (!spacing) return revert(node, layer, kids, expected);
+      configure(spacing.gap, spacing.padding);
+      if (drifted(kids, expected)) return revert(node, layer, kids, expected);
+    }
+    kids.forEach((k, i) => {
+      const child = layer.children[i];
+      if (!child || child.absolute) return;
+      if (child.grow) {
+        k.layoutGrow = 1;
+        if (drifted(kids, expected)) {
+          k.layoutGrow = 0;
+          restore(node, layer, kids, expected);
+        }
+      }
+      if (child.stretch) {
+        k.layoutAlign = "STRETCH";
+        if (drifted(kids, expected)) {
+          k.layoutAlign = "INHERIT";
+          restore(node, layer, kids, expected);
+        }
+      }
+    });
+    return true;
+  }
+  function trackSpan(position, size2, starts) {
+    const count = (limit) => starts.filter((s) => s < limit).length - 1;
+    const first = Math.max(0, count(position + AUTO_LAYOUT_TOLERANCE));
+    const last = Math.max(first, count(position + size2 - AUTO_LAYOUT_TOLERANCE));
+    return [first, last - first + 1];
+  }
+  function cellAlign(offset, size2, cell) {
+    if (Math.abs(offset - (cell - size2) / 2) <= AUTO_LAYOUT_TOLERANCE && offset > AUTO_LAYOUT_TOLERANCE) return "CENTER";
+    if (Math.abs(offset - (cell - size2)) <= AUTO_LAYOUT_TOLERANCE && offset > AUTO_LAYOUT_TOLERANCE) return "MAX";
+    return "MIN";
+  }
+  function applyGrid(node, layer) {
+    const grid = layer.grid;
+    const kids = [...node.children];
+    if (!grid || !kids.length) return false;
+    const expected = boxes(kids);
+    const starts = (sizes, gap, offset) => {
+      let at = offset;
+      return sizes.map((size2) => {
+        const start = at;
+        at += size2 + gap;
+        return start;
+      });
+    };
+    const columns = starts(grid.columns, grid.columnGap, grid.padding[3]);
+    const rows = starts(grid.rows, grid.rowGap, grid.padding[0]);
+    const extent = (tracks, sizes, first, span) => tracks[first + span - 1] + sizes[first + span - 1] - tracks[first];
+    try {
+      node.layoutMode = "GRID";
+      node.gridColumnCount = grid.columns.length;
+      node.gridRowCount = grid.rows.length;
+      node.gridColumnSizes = grid.columns.map((value) => ({ type: "FIXED", value }));
+      node.gridRowSizes = grid.rows.map((value) => ({ type: "FIXED", value }));
+      node.gridColumnGap = grid.columnGap;
+      node.gridRowGap = grid.rowGap;
+      [node.paddingTop, node.paddingRight, node.paddingBottom, node.paddingLeft] = grid.padding;
+      kids.forEach((k, i) => {
+        var _a;
+        if ((_a = layer.children[i]) == null ? void 0 : _a.absolute) {
+          k.layoutPositioning = "ABSOLUTE";
+          return;
+        }
+        const e = expected[i];
+        const [column, columnSpan] = trackSpan(e.x, e.w, columns);
+        const [row, rowSpan] = trackSpan(e.y, e.h, rows);
+        k.setGridChildPosition(row, column);
+        k.gridColumnSpan = columnSpan;
+        k.gridRowSpan = rowSpan;
+        k.layoutSizingHorizontal = "FIXED";
+        k.layoutSizingVertical = "FIXED";
+        k.gridChildHorizontalAlign = cellAlign(
+          e.x - columns[column],
+          e.w,
+          extent(columns, grid.columns, column, columnSpan)
+        );
+        k.gridChildVerticalAlign = cellAlign(e.y - rows[row], e.h, extent(rows, grid.rows, row, rowSpan));
+      });
+      restore(node, layer, kids, expected);
+      return drifted(kids, expected) ? revert(node, layer, kids, expected) : true;
+    } catch (e) {
+      return revert(node, layer, kids, expected);
+    }
+  }
+  async function buildFrame(layer, context) {
+    const node = figma.createFrame();
+    node.resize(Math.max(0.01, layer.w), Math.max(0.01, layer.h));
+    node.clipsContent = layer.clip;
+    node.fills = frameFills(layer);
+    if (layer.radius) {
+      [node.topLeftRadius, node.topRightRadius, node.bottomRightRadius, node.bottomLeftRadius] = layer.radius;
+    }
+    if (layer.border) {
+      node.strokes = [solid(layer.border.color)];
+      node.strokeAlign = "INSIDE";
+      [node.strokeTopWeight, node.strokeRightWeight, node.strokeBottomWeight, node.strokeLeftWeight] = layer.border.w;
+    }
+    if (layer.shadows) {
+      node.effects = layer.shadows.map((s) => ({
+        type: s.inset ? "INNER_SHADOW" : "DROP_SHADOW",
+        visible: true,
+        blendMode: "NORMAL",
+        color: __spreadProps(__spreadValues({}, s.color.rgb), { a: s.color.a }),
+        offset: { x: s.x, y: s.y },
+        radius: s.blur,
+        spread: s.spread
+      }));
+    }
+    for (const child of layer.children) await buildLayer(child, node, context);
+    if (applyAutoLayout(node, layer) || applyGrid(node, layer)) context.autoLayoutFrames++;
+    return node;
+  }
+  async function buildLayer(layer, parent, context) {
+    const node = layer.type === "TEXT" ? await buildText(layer, context) : layer.type === "SVG" ? buildSvg(layer) : await buildFrame(layer, context);
+    node.name = layer.name || node.name;
+    if (layer.opacity < 1) node.opacity = layer.opacity;
+    parent.appendChild(node);
+    if (layer.scale) {
+      const [sx, sy] = layer.scale;
+      node.rescale(Math.max(0.01, Math.min(sx, sy)));
+      if (sx !== sy && node.type === "FRAME") node.resizeWithoutConstraints(layer.w * sx, layer.h * sy);
+    }
+    if (layer.transform) {
+      node.relativeTransform = layer.transform;
+    } else {
+      node.x = layer.x;
+      node.y = layer.type === "TEXT" ? layer.y + (layer.h - node.height) / 2 : layer.y;
+    }
+    return node;
+  }
+  async function buildHtml(tree, { name, x, y }) {
+    const page = figma.currentPage;
+    const existing = page.children;
+    const substitutedFonts = /* @__PURE__ */ new Set();
+    const context = {
+      pickFont: await createFontPicker(substitutedFonts),
+      substitutedFonts,
+      autoLayoutFrames: 0
+    };
+    const root = await buildLayer(tree, page, context);
+    root.name = name;
+    root.x = x != null ? x : existing.length ? Math.max(...existing.map((n) => n.x + n.width)) + 200 : 0;
+    root.y = y != null ? y : existing.length ? Math.min(...existing.map((n) => n.y)) : 0;
+    page.selection = [root];
+    figma.viewport.scrollAndZoomIntoView([root]);
+    return {
+      id: root.id,
+      name: root.name,
+      layers: "findAll" in root ? root.findAll().length + 1 : 1,
+      autoLayoutFrames: context.autoLayoutFrames,
+      substitutedFonts: [...substitutedFonts]
+    };
+  }
+
+  // src/plugin/execute.ts
+  var AsyncFunction = Object.getPrototypeOf(async () => {
+  }).constructor;
+  var isNode = (v) => typeof v.id === "string" && typeof v.type === "string" && "removed" in v;
+  function toJSON(value) {
+    return JSON.parse(
+      JSON.stringify(value != null ? value : null, (_key, v) => {
+        if (v && typeof v === "object" && isNode(v)) return { id: v.id, name: v.name, type: v.type };
+        if (typeof v === "symbol") return String(v);
+        return v;
+      })
+    );
+  }
+  function errorText(error) {
+    var _a;
+    const e = error;
+    const message = String((_a = e == null ? void 0 : e.message) != null ? _a : error);
+    return (e == null ? void 0 : e.stack) && !e.stack.includes(message) ? `${message}
+${e.stack}` : message;
+  }
+  async function execute({ code, files }) {
+    const logs = [];
+    const log = (...args) => {
+      logs.push(args.map((a) => typeof a === "string" ? a : JSON.stringify(toJSON(a))).join(" "));
+    };
+    const decoded = {};
+    for (const [key, file] of Object.entries(files)) {
+      decoded[key] = "text" in file ? file.text : figma.base64Decode(file.b64);
+    }
+    try {
+      const fn = new AsyncFunction("figma", "console", "files", code);
+      const result = toJSON(await fn(figma, { log, info: log, warn: log, error: log }, decoded));
+      return logs.length ? { result, logs } : { result };
+    } catch (error) {
+      throw new Error(errorText(error) + (logs.length ? `
+logs:
+${logs.join("\n")}` : ""));
+    }
+  }
+
+  // src/plugin/export.ts
+  var MAX_SCREENSHOT_PX = 2048;
+  async function findNode(id) {
+    const node = await figma.getNodeByIdAsync(id);
+    if (!node || !("exportAsync" in node)) throw new Error(`Node not found or not exportable: ${id}`);
+    return node;
+  }
+  function size(node) {
+    if (node.type !== "PAGE") return { w: node.width, h: node.height };
+    const kids = node.children;
+    if (!kids.length) return { w: 1, h: 1 };
+    const left = Math.min(...kids.map((n) => n.x));
+    const top = Math.min(...kids.map((n) => n.y));
+    return {
+      w: Math.max(...kids.map((n) => n.x + n.width)) - left,
+      h: Math.max(...kids.map((n) => n.y + n.height)) - top
+    };
+  }
+  async function screenshot({
+    nodeId,
+    scale
+  }) {
+    var _a;
+    const node = nodeId ? await findNode(nodeId) : (_a = figma.currentPage.selection[0]) != null ? _a : figma.currentPage;
+    const { w, h } = size(node);
+    const value = Math.min(scale, MAX_SCREENSHOT_PX / Math.max(w, h, 1));
+    const bytes = await node.exportAsync({ format: "PNG", constraint: { type: "SCALE", value } });
+    return { b64: figma.base64Encode(bytes) };
+  }
+  async function exportNodes({
+    nodeIds,
+    format,
+    scale
+  }) {
+    const nodes = nodeIds ? await Promise.all(nodeIds.map(findNode)) : figma.currentPage.selection;
+    if (!nodes.length) throw new Error("Nothing selected and no nodeIds given");
+    const settings = format === "PNG" || format === "JPG" ? { format, constraint: { type: "SCALE", value: scale } } : { format };
+    const out = [];
+    for (const node of nodes) {
+      out.push({ name: node.name, b64: figma.base64Encode(await node.exportAsync(settings)) });
+    }
+    return out;
+  }
+
+  // src/plugin/main.ts
+  var WIDTH = 340;
+  figma.showUI(__html__, { width: WIDTH, height: 200, themeColors: true, title: "Localhost MCP Bridge" });
+  var reply = (message) => figma.ui.postMessage(message);
+  function run(request) {
+    switch (request.type) {
+      case "execute":
+        return execute(request);
+      case "screenshot":
+        return screenshot(request);
+      case "export":
+        return exportNodes(request);
+      case "html":
+        throw new Error("html is measured in the UI first");
+    }
+  }
+  figma.ui.onmessage = async (message) => {
+    if (message.type === "ready") {
+      reply({ type: "file", name: figma.root.name });
+      const fonts = await figma.listAvailableFontsAsync();
+      return reply({ type: "fonts", families: [...new Set(fonts.map((f) => f.fontName.family))] });
+    }
+    if (message.type === "resize") return figma.ui.resize(WIDTH, message.height);
+    try {
+      const result = message.type === "build" ? await buildHtml(message.tree, message) : await run(message);
+      reply({ type: "response", id: message.id, result });
+    } catch (error) {
+      reply({ type: "response", id: message.id, error: errorText(error) });
+    }
+  };
+})();

package/dist/figma-plugin/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "Localhost MCP Bridge",
+  "id": "localhost-figma-mcp-bridge",
+  "api": "1.0.0",
+  "documentAccess": "dynamic-page",
+  "main": "code.js",
+  "ui": "ui.html",
+  "editorType": [
+    "figma",
+    "figjam",
+    "slides",
+    "dev"
+  ],
+  "capabilities": [
+    "inspect"
+  ],
+  "networkAccess": {
+    "allowedDomains": [
+      "http://localhost:38470"
+    ],
+    "reasoning": "Connects only to the MCP server running on your own machine (localhost), which relays commands from your AI assistant. Nothing is sent anywhere else."
+  }
+}