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 !