ui.html

<style>
  :root {
    --spacing: 0.8rem;
  }

  * {
    box-sizing: border-box;
  }

  body {
    background-color: var(--figma-color-bg);
    color: var(--figma-color-text);
    margin: 0;
    padding: var(--spacing);
  }

  html,
  body,
  main {
    height: 100%;
  }

  main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
  }

  button {
    appearance: none;
    border-radius: 4px;
    padding: var(--spacing);
  }

  textarea {
    background-color: var(--figma-color-bg-secondary);
    border: 2px solid var(--figma-color-border);
    color: var(--figma-color-text-primary);
    flex: 1;
    font-family: Andale Mono, monospace;
    font-size: 0.9rem;
    overflow: auto;
    padding: var(--spacing);
    white-space: pre;
  }
  textarea:focus {
    border-color: var(--figma-color-border-selected);
  }

  button,
  textarea {
    display: block;
    width: 100%;
  }

  button {
    background-color: var(--figma-color-bg-brand);
    border: none;
    color: var(--figma-color-text-onbrand);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
    font-weight: bold;
  }

  button:hover {
    background-color: var(--figma-color-bg-brand-hover);
    color: var(--figma-color-text-onbrand-hover);
  }
</style>
<main>
  <button id="export" type="button">Export Variables</button>
  <textarea
    placeholder="Exported variables will render here..."
    readonly
  ></textarea>
</main>
<script>
  window.onmessage = ({ data: { pluginMessage } }) => {
    if (pluginMessage.type === "EXPORT_RESULT") {
      const textarea = document.querySelector("textarea");
      textarea.innerHTML = pluginMessage.css;
      textarea.focus();
      textarea.select();
    }
  };
  document.getElementById("export").addEventListener("click", () => {
    parent.postMessage({ pluginMessage: { type: "EXPORT" } }, "*");
  });
</script>