Figma Plugin resize snippets

gistfile1.txt

// Add element to markup
<div id="resize">
  <svg viewBox="0 0 20 20">
    <path d="...icon..." />
  </svg>
</div>

// Styling
#resize {
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}

// Register event listeners
const resize = document.getElementById(“resize”);

resize.addEventListener("pointerdown", (e) => {
  resize.addEventListener("pointermove", handleResize);
  resize.setPointerCapture(e.pointerId);
});
resize.addEventListener("pointerup", (e) => {
  resize.removeEventListener("pointermove", handleResize);
  resize.releasePointerCapture(e.pointerId);
});

// Send the size to the code
const handleResize = (e: PointerEvent) => {
  const size = {
    width: Math.max(50, Math.floor(e.clientX + 5)),
    height: Math.max(50, Math.floor(e.clientY + 5)),
  };
  parent.postMessage({ pluginMessage: { type: "resize", size } }, "*");
};

// Default size
const size = { width: 400, height: 400 };

// Get size if available
async function init() {
  const { width, height } =
    (await figma.clientStorage.getAsync('size')) ?? size;

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

// Call the function to show the plugin UI
init();

// Update size based on resizing & save it
figma.ui.onmessage = (response) => {
  if (response.type === 'resize') {
    figma.ui.resize(response.size.width, response.size.height);
    figma.clientStorage.setAsync('size', response.size);
  }
};