【Figma Plugins】Quick actionsでFigma Pluginsを動かす

はじめに

FigmaのPluginを開発する際、Figma PluginsをQuick actionsから動かしたいと思ったことはありますか？
この記事では、Figma PluginsをQuick actionsから動かす方法を解説します。

Figma PluginsをQuick actionsから動かす

0. Quick actionsの基本

Quick actionsでPluginを動かすには、プラグイン名を入力します。
コマンド名は、任意です。

パラーメーターも一緒に入力することができます。

figma.showUIが実行されていると、Quick actionsのFigma Pluginsで実行しないので、注意してください！

1. command・parameterを決める

まずは、Quick actionsで、入力するcommand・parameterを決めます！
command・parameterを決めるには、manifest.json 以下のようにします。

manifest.json

{
  "menu": [
    {
      "name": "Create Text",
      "command": "text",
      "parameters": [
        {
          "name": "Text",
          "key": "text",
          "allowFreeform": true,
          "optional": true
        }
      ]
    }
  ]
}

menuは、以下のようなInterfaceになっています。

type ManifestMenuItem =
  // Clickable menu item.
  { name: string, command: string, parameters?: ParameterList[], parameterOnly?: boolean } |
  // Separator
  { separator: true } |
  // Submenu
  { name: string, menu: ManifestMenuItem[] }

• Clickable menu item
  • name：メニューアイテムの名前
  • command：メニューアイテムのコマンド
  • parameters（任意）：メニューアイテムに合わすパラメーター
  • parameterOnly（任意）：コマンドなしのパラメータのみ実行するか
• Separator
  • 区切り線
• Submenu
  • name：メニューアイテムの名前
  • menu：サブメニューのアイテム

2. パラメーターにサジェストを表示させるようにする

figma.parameters.on("input", () => {}) を使うことで、サジェストを表示させることができます。

以下のようにすることで、key が color の時に suggestItem が表示されます。

figma.parameters.on("input", (
  ({ parameters, key, query, result }: ParameterInputEvent) => {
    switch (key) {
      case "color":
        const suggestItem = [
          "Color",
          "Color 2"
        ]
        result.setSuggestions(suggestItem.filter(s => s.includes(query)))
      break
    }
  }
))

3. 実行する

figma.on("run", () => {}) を使うことで、Quick actionsからFigma Pluginsを実行することができます。

以下のようにすることで、commandがtextの時に、create 関数（自作）を実行しています。

figma.on("run", ({ command, parameters }: RunEvent) => {
  if (command === "text")
  if (parameters) {
    create(parameters.color, parameters.text);
  }
})

まとめ

この記事では、Figma PluginsをQuick actionsから動かす方法を解説しました。
この記事を参考に Quick actions から Figma Pluginを実行してみてください！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。