Zenn
🐺

Figmaでポイント集計するプラグインを作成した話

2024/10/23に公開
Figma
JavaScript
TypeScript
npm
tech

はじめに

Figma Plugin　に入門してみました。

"はじめて" のプラグイン開発でも非常に入りやすかったので
所感などまとめてみました。

Figma Plugin 周りの説明

公式のドキュメントはこちら
https://www.figma.com/plugin-docs/

概要やTipsについてはkiteさんや島袋恵さんの記事などが非常に参考になります。
→ありがとうございます。

https://zenn.dev/ixkaito/articles/how-to-make-a-figma-plugin
https://zenn.dev/monicle/articles/cae2330727c098

所感

  • リリースまでの手順が分かりやすいところ

    • Figma Desktop App を開く
    • Figma が用意してくれているTemplateをダウンロード
    • mainとなる'ts'ファイルにやりたいことを実装する
    • 完成したら公式の手順に沿って申請する
      ※審査は早いと翌日には終わる

  • TypeScriptだけで完結できるところ
    ※HTMLやCSSは必要に応じて利用する

  • デバックの設定が容易なところ
    Desktop App 上で基本的に作業をしますが、Devツールを開けるためconsoleなどでみれる

  • Figmaが大量のSample Repositryを展開してくれていること
    これは非常にありがたい

などなど作る上で必要な知識が意外と少ないことや、公式がサンプルもたくさん用意してくださっており
とても入門しやすいのかなと思います。

Plugin の作成背景

ここ最近、イテレーションをはじめクォーターの管理をFigmaやMiroなどで行う現場も増えている印象
そこではストーリーを書き、見積もりを行うと思います。

見積もりしたのは良いものの、合計のポイントを集計するのがしんどかったので
その"しんどい"をただただ解消するためだけのプラグインを作ってみました。

作成した Plugin

Point Ameba

Point Ameba というプラグインを今回作成しました。

選択した範囲から STICKYとSHAPE_WITH_TEXTの[]で記載された数値を抜き出し集計するPluginです。
（範囲を選択するさま がそれっぽかったので命名してます。）

下記ケースに対応しています。

  • 前後の文字列入力へ対応
  • 全角入力
  • 小数点入力
[2]
[2pt]
[spike2pt]
[２]
[２pt]
[spike２pt]
[0.05]

もし同じような課題感で悩まれている方いらっしゃれば使ってみてください！！

https://github.com/Pianoopera/Point-Ameba にソースも公開していますので、よければご参考までに。

プラグインの仕組みについて

こちらは公式や先駆者の方々がたくさん記載いただいておりますが、一度自分の理解のために書こうと思います。

static.figma.comより
static.figma.com How Plugins Run より

For performance, Figma uses an execution model where plugin code runs on the main thread in a sandbox. The sandbox is a minimal JavaScript environment and does not expose browser APIs. This means that you have all of standard JavaScript ES6+ available, including the standard types, the JSON and Promise APIs, binary types like Uint8Array, etc. We have also added a minimal version of the console API. But browser APIs like XMLHttpRequest and the DOM are not directly available from the sandbox.

To use browser APIs or show a custom UI for your plugin, you need to create an <iframe> with a <script> tag inside. This can be done with figma.showUI(). Inside of this <iframe>, you can write any HTML/JavaScript and access any browser APIs. To see the list of available JavaScript/Browser APIs on the main thread, run console.log(this) as the first line of your plugin.

The main thread can access the Figma "scene" (the hierarchy of layers that make up a Figma document) but not the browser APIs. Conversely, the iframe can access the browser APIs, but not the Figma scene. The main thread and the iframe can communicate with each other through message passing.
https://www.figma.com/plugin-docs/how-plugins-run/

公式より簡潔にまとめてみると

パフォーマンスの観点からプラグインコードがサンドボックス内のメインスレッドで実行するモデルを採用しており、最小限のJS環境であるため、ブラウザAPIを公開していない。

つまり、XMLHttpRequestやDOMのようなブラウザAPIは、サンドボックスから直接利用できないということ

もしDOM操作など行いたい場合は、<script>タグを記述した<iframe>を作成する必要がある。
※figamではfigma.showUIという機構を利用することでブラウザAPIにアクセスできる。

また、メインスレッドはFigmaの"シーン"にアクセスできるが、ブラウザAPIにはアクセスできず
一方で、iframeは、ブラウザAPIにアクセスできるが、Figmaの"シーン"にはアクセスできない。

そのため、メインスレッドとiframeは、メッセージパッシングにより互いに通信をすることができるようです。

具体

  • メインスレッド

    • figma.ui.postMessageで送信を行う
    • figma.ui.onMessageで受け取る

  • UI側

    • parent.postMessageで送信を行う
    • onMessageで受け取る

Tips

これ覚えておくと良さそうなこと

  • debugしたいな〜という時（Devツールの開き方）
    • ⌥ + ⌘ + i コンソールで確認したい時出てくるはず
  • 実装内容が反映されないな〜という時
    • 一度開発中のpluginをremoveし、再度installし直す。

さいごに

Figmaのプラグイン作成が思ったよりも参入障壁が低く
とても楽しみながら作ることができました。

Figmaのプラグイン開発の先駆者の方々の記事も非常に参考になり
感謝しかないです。

今回作成したプラグインはそこまで複雑な仕様ではないため
取り入れはしなかったのですが、Reactなども利用できそうなので
今後も機会があればぜひ是非使ってみたいところです。

Discussion