Skip to main content
Solved

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


Sony_Chen

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);
    }

}

Best answer by Gleb

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);

View original
This topic has been closed for replies.

2 replies

Gleb
  • Power Member
  • 4708 replies
  • Answer
  • March 12, 2024

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);


Sony_Chen
  • Author
  • 1 reply
  • March 13, 2024

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.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings