Help us understand the problem. What is going on with this article?

Figmaプラグインでcode.tsからui.htmlにNode情報が渡せない

はじめに

こちらはFigmaプラグインAdvent Calendar 2019の8日目の記事です。

今回は2日目の記事でpostMessageなどについて説明しましたが、code.tsからui.htmlにNode情報をまるっと送ろうとしたときに、値が送れなかったので、対応策を書きます。

idしか送られない

code.tsで取得したNodeは下記のようなプロパティを持っています。
before1.png

しかし、それをui.htmlに送ろうとするとIDしか持っていない状態になってしまっています。
before2.png

コードは以下。

  • code.tsでNodeを取得し、ui.htmlに渡す
code.ts
// textNode取得
const textNodes = figma.currentPage..filter(item => {
  return item.type === 'TEXT';
});

// Nodeを送信
figma.ui.postMessage({
  type: 'TEXT_NODES',
  value: textNodes,
});
  • ui.htmlで値を受け取って出力
ui.ts
window.onmessage = event => {
      const msg = event.data.pluginMessage;
      if (!msg) return;
      switch (msg.type) {
        case TEXT_NODES:
          // 受け取った値を出力
          console.log(msg.value)
          break;
        default:
          return;
      }
    };

解決策

一旦はIDとテキスト情報があれば問題なかったので、mapで新しいオブジェクトの配列をつくり、TextNodeとしてではなく、idとcharactersを持ったオブジェクトとして送ると成功しました。

after.png

code.ts
const textNodes = figma.currentPage.children
  .filter(item => {
    return item.type === 'TEXT';
  }) // map処理を追加
  .map(item => {
    if (item.type === 'TEXT') {
      return {
        id: item.id,
        characters: item.characters,
      };
    }
  });

figma.ui.postMessage({
  type: 'TEXT_NODES',
  value: textNodes,
});

これで必要な情報は送れます。
送れなかった原因は、まだちゃんと調べていないので、分かり次第この記事に追記します!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away