忙しい人のためのFigma Plugin開発手引

9569 ワード
初心者 Plugin figma Plugin テキストリンク

この記事は さくらインターネット Advent Calendar 2019 21日目の記事です。

UXデザイングループ所属のkgsiです。最近Figmaを副業でよく使ってます。さくらインターネット社内でも初学者向けにハンズオンを開催したり、導入推進をしたりしています。そんな中でプラグイン開発に言及していなかったなぁと思い、まとめてみた次第です。

この記事について

細かくプラグイン開発について説明している記事はすでにいくつもあるので、忙しい人向けに要点を短くまとめた記事です。自分が単に時間がないからでは決して有りません。

Figma について


https://www.figma.com/

  • Webベースのプロトタイプ・デザインツール
  • チームのためのデザインツールがコンセプト

Figma Pluginについて

  • Figmaが今年から開始したPluginプラットフォーム
  • Figmaのアカウントがあれば、無料有料プランを問わず誰でも開発可能
  • 開発言語はTypeScript推奨（JavaScriptでも一応かける）
  • 開発ツールはVisual Studio Code推奨
  • プラグインの有料化は可能、広告表示によるマネタイズはNG

できること・（まだ）できないこと

できること

基本的にできることはシンプルで、Figma Pluginは開いているドキュメントに対して操作が行えます。

  • ドキュメント内のレイヤー、レイヤープロパティの読み取り
  • 対象レイヤーの編集・書き換え
  • モーダルUI（iframe）を通してブラウザAPIにアクセス

（まだ）できないこと

主だったできないことは以下の通りです。

  • ローカルファイル、ユーザー、チーム情報、コメントへのアクセス
  • チームライブラリへのアクセス
  • プラグイン側でキーボードショートカットを操作する
  • イベントトリガーのカスタマイズ

これらはアップデートされることで改善するものも含まれます。一方で外部フォントの読み込み、デスクトップAPIへのアクセスは、互換性やライセンスの問題で実装は行われないと明言されています。詳しくは以下を参照してください。

公式： https://www.figma.com/plugin-docs/whats-supported/

開発方法

環境整備

ステップとしては以下のとおりです。公式にも書かれていますが、特に難しいこともなく、簡単にプラグインの実行が可能です。

  1. FigmaのPlugin > Development > 「+」アイコンをクリック
  2. nameを設定して、Templateを選んで雛形をローカルに保存
  3. VS Codeのインストール
  4. sudo npm install -g typescriptでTypeScriptをローカルにインストール
  5. VS Codeでディレクトリを開き、 ターミナル > タスクを実行 を選択。tsc: ウォッチ - tsconfig.jsonを選んでタスク実行
  6. デザイン画面でPlugin > development > プラグイン名で実行

公式： https://www.figma.com/plugin-docs/setup/

デバック方法

デバック方法は通常のフロントエンド開発と同じ要領で行えます。

  • デザイン画面のPlugin > development > Open Consoleを開くと、開発コンソールが開く。
  • 標準だとビルドされるたびにプラグインを実行し直す必要がある
  • 実行ステップを確認しつつ行う場合はDeveloperVMを使う
  • ショートカットによる簡易実行(最後に開いたプラグインの実行)で、都度開かなくても実行可能 Windows: Alt-Ctrl-P Mac: Command-Option-P

開発のポイント

ブラウザAPIへのアクセスについて

DOMの操作やネットワークへのアクセスなどの、ブラウザAPIは、UIパネル上(<iframe>)でしか利用できません。ブラウザAPIを使いたい場合は、UIパネル越しにアクセスする必要があります。

UIパネルでできること

UIパネル上(ui.html)は完全なhtmlで、JS・CSSも自由に利用可能です。サードパーティ製のプラグインも読み込むことができます。もちろんReactやVueなどのフレームワークも利用可能なので、高度なUI設計も可能です。

レイヤー操作の基本

基本的に画面に配置されているレイヤーをfor文で探索し、keyやtypeで判定して編集・操作を行うシンプルな構造です。実装方法によっては処理コストが大きく、パフォーマンスに影響が出てしまうので、注意が必要です。

プラグイン実行の仕組み

一度だけ実行するタイプ

UIパネルを利用させず、Pluginを一度だけ実行する場合は、code.tsに処理を書くだけで実行できます。

for (const node of figma.currentPage.selection) {
  if ("opacity" in node) {
    node.opacity *= 0.5;
  }
}
figma.closePlugin('Edited Layers'); //引数にトーストメッセージを入れられる

UIパネルを通して実行するタイプ

メインコード（code.ts）とUIパネル（ui.html）は完全に独立しており、お互いの値を受け渡して利用するには、postMessageメソッドを使い、オブジェクトデータの受け渡しをする必要があります。

ui.html
document.getElementById('send').onclick = () => {
  parent.postMessage({ pluginMessage: { type: 'create-message', 10 } }, '*')
}
code.ts
// ui.htmlを使う宣言
figma.showUI(__html__)

// ui.htmlからcallbackを受け取る
figma.ui.onmessage = msg => {
  if (msg.type === "create-message") {
     console.log(msg.count) //受け取ったデータ
  }
}

参考

公式ドキュメント

Plugin参考

Pluginについて