code.js

figma.showUI(__html__, { width: 920, height: 720, themeColors: true });

var lastSource = null;
var lastBounds = null;

function emitSelection() {
  var sel = figma.currentPage.selection;
  var name = "";
  var supported = false;

  if (sel.length > 0) {
    name = sel[0].name;
    supported =
      !!sel[0].absoluteBoundingBox && typeof sel[0].exportAsync === "function";
  }

  figma.ui.postMessage({
    type: "selection-info",
    count: sel.length,
    name: name,
    supported: supported,
  });
}

figma.on("selectionchange", emitSelection);
emitSelection();

function exportSelection() {
  var sel = figma.currentPage.selection;
  if (sel.length === 0) {
    figma.notify("Select a layer first.");
    return Promise.resolve(null);
  }
  var source = sel[0];
  var bounds = source.absoluteBoundingBox;
  if (!bounds || typeof source.exportAsync !== "function") {
    figma.notify("This layer cannot be exported.");
    return Promise.resolve(null);
  }

  var longSide = Math.max(bounds.width, bounds.height);
  var scale = longSide >= 2000 ? 1 : 2;

  var exportPromise = source.exportAsync({
    format: "PNG",
    constraint: { type: "SCALE", value: scale },
  });

  var timeoutPromise = new Promise(function (resolve) {
    setTimeout(function () {
      resolve({ __timeout: true });
    }, 15000);
  });

  return Promise.race([exportPromise, timeoutPromise])
    .then(function (result) {
      if (result && result.__timeout) {
        figma.notify("Export timed out after 15s. Try a smaller layer.");
        return null;
      }
      lastSource = source;
      lastBounds = bounds;
      return {
        bytes: result,
        name: source.name,
        width: bounds.width,
        height: bounds.height,
      };
    })
    .catch(function (err) {
      figma.notify(
        "Export failed: " + (err && err.message ? err.message : "unknown"),
      );
      return null;
    });
}

function applyZRotation(degrees) {
  var sel = figma.currentPage.selection;
  if (sel.length === 0) {
    figma.notify("Select a layer first.");
    return false;
  }

  var radians = (degrees * Math.PI) / 180;
  var cos = Math.cos(radians);
  var sin = Math.sin(radians);
  var count = 0;

  for (var i = 0; i < sel.length; i += 1) {
    var target = sel[i];
    if (
      !("relativeTransform" in target) ||
      !("width" in target) ||
      !("height" in target)
    ) {
      continue;
    }

    var m = target.relativeTransform;
    var w = target.width;
    var h = target.height;
    var cx = (m[0][0] * w) / 2 + (m[0][1] * h) / 2 + m[0][2];
    var cy = (m[1][0] * w) / 2 + (m[1][1] * h) / 2 + m[1][2];
    var a = m[0][0] * cos + m[0][1] * sin;
    var b = -m[0][0] * sin + m[0][1] * cos;
    var c = m[1][0] * cos + m[1][1] * sin;
    var d = -m[1][0] * sin + m[1][1] * cos;

    target.relativeTransform = [
      [a, b, cx - (a * w) / 2 - (b * h) / 2],
      [c, d, cy - (c * w) / 2 - (d * h) / 2],
    ];
    count += 1;
  }

  return count > 0;
}

function applyRaster(message) {
  if (!lastSource || lastSource.removed || !lastBounds) {
    figma.notify("Source layer is no longer available.");
    return false;
  }

  var image;
  try {
    image = figma.createImage(message.bytes);
  } catch (e) {
    figma.notify("Image too large to apply. Try a smaller layer.");
    return false;
  }

  var rect = figma.createRectangle();
  rect.name = (lastSource.name || "Layer") + " 3D Rotated";
  rect.resize(message.width, message.height);
  rect.fills = [{ type: "IMAGE", scaleMode: "FILL", imageHash: image.hash }];

  var parent =
    lastSource.parent && "insertChild" in lastSource.parent
      ? lastSource.parent
      : figma.currentPage;

  if (parent === figma.currentPage) {
    figma.currentPage.appendChild(rect);
  } else {
    var index = parent.children.indexOf(lastSource);
    parent.insertChild(index + 1, rect);
  }

  var gap = 24;
  var parentOffsetX = 0;
  var parentOffsetY = 0;
  if (parent !== figma.currentPage && parent.absoluteBoundingBox) {
    parentOffsetX = parent.absoluteBoundingBox.x;
    parentOffsetY = parent.absoluteBoundingBox.y;
  }

  rect.x =
    lastBounds.x - parentOffsetX + lastBounds.width / 2 - message.width / 2;
  rect.y = lastBounds.y - parentOffsetY + lastBounds.height + gap;

  figma.currentPage.selection = [rect];
  return true;
}

function resetSelection() {
  var sel = figma.currentPage.selection;
  var count = 0;

  for (var i = 0; i < sel.length; i += 1) {
    var node = sel[i];
    if (
      !("relativeTransform" in node) ||
      !("width" in node) ||
      !("height" in node)
    ) {
      continue;
    }

    var m = node.relativeTransform;
    var cx =
      (m[0][0] * node.width) / 2 + (m[0][1] * node.height) / 2 + m[0][2];
    var cy =
      (m[1][0] * node.width) / 2 + (m[1][1] * node.height) / 2 + m[1][2];

    node.relativeTransform = [
      [1, 0, cx - node.width / 2],
      [0, 1, cy - node.height / 2],
    ];
    count += 1;
  }

  return count;
}

figma.ui.onmessage = function (msg) {
  if (msg.type === "preview-request") {
    exportSelection()
      .then(function (data) {
        if (!data) {
          figma.ui.postMessage({ type: "source-failed" });
          return;
        }
        try {
          figma.ui.postMessage({
            type: "source-loaded",
            bytes: data.bytes,
            name: data.name,
            width: data.width,
            height: data.height,
          });
        } catch (e) {
          figma.notify(
            "Could not send preview to UI: " +
              (e && e.message ? e.message : "too large"),
          );
          figma.ui.postMessage({ type: "source-failed" });
        }
      })
      .catch(function (err) {
        figma.notify(
          "Preview error: " +
            (err && err.message ? err.message : "unknown"),
        );
        figma.ui.postMessage({ type: "source-failed" });
      });
    return;
  }

  if (msg.type === "apply") {
    var ok = false;
    if (msg.axis === "z") {
      ok = applyZRotation(msg.angle);
      if (ok) figma.notify("Applied Z rotation.");
    } else {
      ok = applyRaster(msg);
      if (ok) figma.notify("Applied 3D rotation. Original layer kept.");
    }
    figma.ui.postMessage({ type: "applied", success: ok });
    return;
  }

  if (msg.type === "reset") {
    var n = resetSelection();
    figma.notify("Reset " + n + " layer" + (n === 1 ? "" : "s") + ".");
    figma.ui.postMessage({ type: "reset-done", count: n });
    return;
  }

  if (msg.type === "close") {
    figma.closePlugin();
  }
};