Having issue to pass the value from ui.html to code.js

Hi, I’m working on a plugin that features two input fields in the UI. The plugin is designed to create frames based on the values entered by the user. However, I’m encountering issues passing values from ui.html to code.js. I’m wondering what might be wrong with my code.

<div class="input-group">
     <input type="number" id="aspect-ratio-1" name="fname" min="1" max="10000">
     <button class="link-arrow" id="reverse-button">🔄</button>
     <input type="number" id="aspect-ratio-2" name="fname" min="1" max="10000">      
</div>

<script>
  const input1 = document.getElementById('aspect-ratio-1');
  const input2 = document.getElementById('aspect-ratio-2');

const createFrame = document.getElementById('create-frame'); // i have a button on top of the input field for create frame 

  createFrame.addEventListener("click", function() {
    const width = input1.value;
    const height = input2.value;
    parent.postMessage({ pluginMessage: { type: 'create-frame', width: width, height: height } }, '*');
  });
</script>
figma.showUI(__html__, {width: 360, height: 640})

figma.ui.onmessage = msg => {
    if (msg.type === 'create-frame') {
        const { width, height } = msg.pluginMessage;
        const frame = figma.createFrame();
        frame.x = 50;
        frame.y = 50;
        frame.resize(width, height);
    }

}

You can simply open the console and see the errors. You should be getting an error on this line const { width, height } = msg.pluginMessage; as pluginMessage is undefined — you already got the value of plugin message in msg variable. You can do frame.resize(msg.width, msg.height);

1 Like

Hi Gleb, thanks so much for the help, and it works like a charm! I also fixed some errors in converting strings into numbers to create frames.