この記事は、Figma Advent Calendar 2023の11日目の記事です。

最近Figmaで面倒な作業が発生し、自動化のためのFigmaプラグインのコードをChat GPTに書いてもらったところ大変はかどりました。その手順を説明します。

きっかけ

エンジニアとの振り返りMTGで、こんな相談を受けました。

解決策はいくつか考えられます。

1. 目視でカウントする

2. Figmaのデザインシステムアナリティクス機能を使う

3. 既存のプラグインを使ってカウントする

4. プラグインを開発してカウントする

対象となる画面数が３画面くらいなら、「1. 目視でカウントする」で解決しそうです。しかし対象となるFigmaファイルで扱われている画面数は100画面を軽く超えるので、この案は却下です。

「2. Figmaのデザインシステムアナリティクス機能を使う」は最も適した解決策のようですが、この機能を利用するにはビジネスプラン以上の契約が必要です。プランを変更するには、編集権限をもったメンバーの人数分の契約更新が必要で、確認したところ年間プランの契約更新料が100万超えでした。そのためこの案も却下です。

「3. 既存のプラグインを使ってカウントする」については、使用しているインスタンスを一覧化するようなプラグインがいくつかあり、うまく活用すれば解決策になりそうです。しかし、一覧化したインスタンスを元にコンポーネントの利用回数をカウントする処理は別途行う必要があり、できればこの手間も減らしたいです。

そこで「4. プラグインを開発してカウントする」に着手します。しかし自分でコードを書くのは面倒です。そこで優秀な部下としてChat GPTさんに働いてもらいます。

事前準備

Figmaプラグインを開発するためには開発環境の設定が必要ですが、単にコードを実行するだけであればFigmaのコンソールから可能です。メニューの「プラグイン」→「開発」→「コンソールを表示」からコンソールを表示します。

以下のようにコンソールが表示されます。ここからコードを実行し、出力結果を確認できます。

要件定義

意図通りのアウトプットを得たいのなら明確な指示が必要です。今回作りたいものはこんな感じの一覧です。マスターコンポーネントの一覧で、それぞれ利用回数が集計された数が表示されています。この形式のCSVファイルを出力するコードを書いてもらいます。

指示とフィードバック

準備が整ったので、ここからはChat GPTさんに働いてもらいます。GPT-4を使用し、以下のように指示します。

指示

回答

コードをコンソールに貼り付けて実行してみます。以下のようにインスタンスの一覧が出力されます。

しかし、よく見ると、これはインスタンスの名前です。必要なのはメインコンポーネント毎に集計された一覧なので、メインコンポーネント名が出力されるように修正を依頼します。

指示

回答

再び、コードを貼り付けて実行します。今度はメインコンポーネント名の一覧が出力されます。

しかし、ところどころ「Property 1=Disabled」のようなプロパティ名と値の組み合わせが出力されています。バリアントを設定したメインコンポーネントの場合は、バリアントの属性と値の組み合わせがメインコンポーネントの名前に設定されるようです。これを修正してもらいます。

指示

回答

実行結果

正しく、メインコンポーネントの名前が出力されるようになりました。次は各コンポーネント毎に集計してもらいます。

指示

回答

実行結果

ちゃんとインスタンスの利用回数をカウントしてくれました。
最後に利用回数が多い順に並び替えたCSVを出力する機能を追加してもらいます。

指示

回答

実行結果

求めていたCSVフォーマットのテキストがコンソールに出力されました。テキストエディタなどに貼り付けて、CSVファイルとして保存すれば完了です。スプレッドシートに読み込んだり、Excelで開いたりして利用できます。

今回はエラーは発生しませんでしたが、場合によってはエラーが出力される場合があります。その場合も、エラーメッセージをそのままフィードバックとして与えて修正を指示すると該当部分のコードを修正してくれます。

最終的なコードは以下の通りです。自己責任の範囲でご利用ください。

// FigmaのAPIを使用して、現在のページのすべてのノードを取得する関数
function getAllNodes(page) {
  let nodes = [];
  let queue = [page];
  
  while (queue.length > 0) {
    let node = queue.shift();

    if ('children' in node) {
      queue.push(...node.children);
    }

    nodes.push(node);
  }

  return nodes;
}

// 各コンポーネントの使用回数を集計する関数
function countComponentUsage(nodes) {
  let componentUsage = {};

  nodes.forEach(node => {
    if (node.type === 'INSTANCE') {
      const mainComponent = node.mainComponent;
      if (mainComponent) {
        let componentName;

        // メインコンポーネントの親がComponentSetNodeの場合、その名前を使用
        if (mainComponent.parent && mainComponent.parent.type === 'COMPONENT_SET') {
          componentName = mainComponent.parent.name;
        } else {
          // そうでない場合は、メインコンポーネント自体の名前を使用
          componentName = mainComponent.name;
        }

        // コンポーネントの使用回数をカウント
        if (componentUsage[componentName]) {
          componentUsage[componentName] += 1;
        } else {
          componentUsage[componentName] = 1;
        }
      }
    }
  });

  return componentUsage;
}

// 使用回数に基づいてコンポーネント名を並び替えてCSV形式で出力する関数
function outputCSV(componentUsage) {
  // オブジェクトを配列に変換
  const sortedComponents = Object.keys(componentUsage)
    .map(key => ({ name: key, count: componentUsage[key] }))
    .sort((a, b) => b.count - a.count); // 降順にソート

  // CSV形式の文字列に変換
  let csvContent = "Component Name,Usage Count\n"; // ヘッダー
  sortedComponents.forEach(item => {
    csvContent += `${item.name},${item.count}\n`;
  });

  return csvContent;
}

// 現在のページのノードを取得
const nodes = getAllNodes(figma.currentPage);

// 各コンポーネントの使用回数を集計
const usageCounts = countComponentUsage(nodes);

// CSV形式で出力
const csvData = outputCSV(usageCounts);

// CSVデータをコンソールに出力（または他の方法で保存）
console.log(csvData);

おわりに

今回試してみて以下のような学びがありました。

• Figmaでの単純な繰り返し作業などはプラグインの仕組みを通じて自動化できる可能性がある

• プラグインのコードはFigmaのコンソールから実行可能。コードはGPT-4さんに依頼できる

• 依頼主には明確な指示、フィードバックなどのディレクションが必要。ディレクション次第でGPTさんは有能な部下として働いてくれる

他にもいろんな使い方ができそうです。例えば以下のように。

面白い使い方があったら教えてください。
TwitterでUIデザインについて発信しています。
感想やコメントなどいただけると嬉しいです！

Twitter (@shingo2000)