ui.html

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css"
/>

<style>
  body {
    padding: 1em;
  }
  input {
    display: block;
  }
  textarea {
    width: 100%;
    display: block;
  }
</style>

<h1>Custom Color Data Generator ver.0.2.1</h1>

<div>
  <h2>file type</h2>
  <div class="radio">
    <input
      id="radioButton1"
      type="radio"
      class="radio__button"
      name="filetype"
      value="JSON"
      checked
    />
    <label for="radioButton1" class="radio__label">JSON</label>

    <input
      id="radioButton2"
      type="radio"
      class="radio__button"
      name="filetype"
      value="XML"
    />
    <label for="radioButton2" class="radio__label">XML</label>

    <input
      id="radioButton3"
      type="radio"
      class="radio__button"
      name="filetype"
      value="CSS"
    />
    <label for="radioButton3" class="radio__label">CSS</label>
  </div>

  <div>
    <button class="button button--primary" id="submit-create">Generate</button>
  </div>

  <div>
    <label for="output-area">CODES</label>
    <textarea rows="10" id="output-area"></textarea>
  </div>
</div>
<script>
  const codeOutPutArea = document.getElementById("output-area");
  const createButton = document.getElementById("submit-create");
  console.log(createButton);

  // 処理を受け取って表示する
  window.addEventListener("message",(event) => {
    const message = event.data.pluginMessage

    switch (message.type) {
      case "render":
        console.log(message.body)
        codeOutPutArea.innerHTML = message.body;
        break
    }
  })

  // Generateボタンが押されたら処理を渡す
  createButton.addEventListener('click', () => {
    const fileType = document.querySelector('input[name="filetype"]:checked').value;
    console.log(fileType);
    parent.postMessage({pluginMessage: {fileType}}, '*');
  })
</script>