Resizable Figma Plugin Window

code.ts

figma.showUI(__html__,{width: 250, height: 250});
// restore previous size
figma.clientStorage.getAsync('size').then(size => {
  if(size) figma.ui.resize(size.w,size.h);
}).catch(err=>{});
figma.ui.onmessage = msg => {
  switch (msg.type) {
    case "resize":
      figma.ui.resize(msg.size.w,msg.size.h);      
      figma.clientStorage.setAsync('size', msg.size).catch(err=>{});// save size
      break;
  }
};

ui.html

<style>
 *{
   font-family: sans-serif;
   font-size: 12px;
   margin: 0;
   box-sizing: border-box;
 }
 #main{
   height: 100%;
   padding: 16px;
 }
 #corner{
   position: absolute;
   right: 1px;
   bottom: 2px;
   cursor: nwse-resize;
 }
</style>
<div id="main">
  <svg id="corner" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16 0V16H0L16 0Z" fill="white"/>
    <path d="M6.22577 16H3L16 3V6.22576L6.22577 16Z" fill="#8C8C8C"/>
    <path d="M11.8602 16H8.63441L16 8.63441V11.8602L11.8602 16Z" fill="#8C8C8C"/>
  </svg>
</div>
<script>
  const corner = document.getElementById('corner');
  function resizeWindow(e) {
    const size = {
      w: Math.max(50,Math.floor(e.clientX+5)),
      h: Math.max(50,Math.floor(e.clientY+5))
    };
    parent.postMessage( { pluginMessage: { type: 'resize', size: size }}, '*');
  }
  corner.onpointerdown = (e)=>{
    corner.onpointermove = resizeWindow;
    corner.setPointerCapture(e.pointerId);
  };
  corner.onpointerup = (e)=>{
    corner.onpointermove = null;
    corner.releasePointerCapture(e.pointerId);
  };
</script>

Thank you Sonny! This works like magic 🤩🪄

this is great! thank you!

Thanks for this code! I think that position of the resize handle should be set to fixed. Otherwise, it moves with scrolling.

How do I set this up?

Worked great, thanks !

I used a modified solution as a Vue 3 component, it works perfectly! Thanks a lot 👍

Thank you!
React way component code:

import { type CSSProperties, FC, useRef } from 'react';

type Props = {
  style?: CSSProperties;
};

const SVG_SIZE = 16;

export const Resizer: FC<Props> = (props) => {
  const { style } = props;

  const svgRef = useRef<SVGSVGElement>(null);
  const isStretchingRef = useRef(false);

  return (
    <svg
      ref={svgRef}
      width={SVG_SIZE}
      height={SVG_SIZE}
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{
        ...style,
        cursor: 'nwse-resize',
      }}
      onPointerDown={(event) => {
        isStretchingRef.current = true;
        svgRef.current?.setPointerCapture(event.pointerId);
      }}
      onPointerMove={(event) => {
        if (isStretchingRef.current) {
          parent.postMessage(
            {
              pluginMessage: {
                type: 'resize',
                size: {
                  width: Math.floor(event.clientX + SVG_SIZE),
                  height: Math.floor(event.clientY + SVG_SIZE),
                },
              },
            },
            '*'
          );
        }
      }}
      onPointerUp={(event) => {
        isStretchingRef.current = false;
        svgRef.current?.releasePointerCapture(event.pointerId);
      }}
    >
      <path d="M16 0V16H0L16 0Z" fill="white" />
      <path d="M6.22577 16H3L16 3V6.22576L6.22577 16Z" fill="#8C8C8C" />
      <path
        d="M11.8602 16H8.63441L16 8.63441V11.8602L11.8602 16Z"
        fill="#8C8C8C"
      />
    </svg>
  );
};