Figmaの保存済みプラグインを全公開＋実演してみました🍐

Arganoの麻生です。

今回は私が現在、Figmaに保存している全プラグインの機能を梨のイラストを用いて実演形式で紹介します。

梨のイラスト

Scripter

まず第一におすすめしたいプラグインです。 Figmaのキャンバス上で直接JavaScriptやTypeScriptを記述し、その場でFigma APIを叩いて実行できます。選択した数百個のレイヤーの名前を特定の正規表現を使って一括置換したり、特定の色を持つオブジェクトだけを抽出し一瞬で整列させたりと、手間がかかる作業を数秒で終わらせることができます。

例えば「選択したフレームを複製し、1/3のサイズに縮小して横に並べ、名前の末尾を/featureから/thumbnailに変更する」といった一連の作業も、以下のコードを実行するだけで一瞬で完了します。

Scripter使用後

const SCALE = 1 / 3;
const GAP = 50; // 隣との余白（px）

function createThumbnail() {
  const selection = figma.currentPage.selection;

  if (selection.length === 0) {
    figma.notify("対象のフレームを選択してください");
    return;
  }

  for (const node of selection) {
    if (node.type === "FRAME" || node.type === "COMPONENT" || node.type === "INSTANCE" || node.type === "GROUP") {
      
      // ① 対象のフレームを複製
      const clone = node.clone();
      
      // 元のフレームと同じ「親」に強制的に格納
      if (node.parent) {
        node.parent.appendChild(clone);
      }
      
      // ② 全体をスケール縮小
      if (typeof clone.rescale === 'function') {
        clone.rescale(SCALE);
      }
      
      // ③ 座標の調整（横に並べる）
      clone.x = node.x + node.width + GAP;
      clone.y = node.y;
      
      // ④ 名前の末尾を変更（標準機能ではできない柔軟なリネーム）
      if (clone.name.endsWith('/feature')) {
        clone.name = clone.name.replace(/\/feature$/, '/thumbnail');
      }
    }
  }
  figma.notify("サムネイルの作成・配置が完了しました！");
}

createThumbnail();

Figma標準のエクスポート機能でも書き出し時に -small などの接尾辞をつけることは可能ですが、「レイヤー名の中の特定の文字列（/featureなど）だけを狙って一括置換する」といった柔軟なリネームはできないため、Scripterが重宝します。

Automator

プラグインページ

ノーコードでFigma上のあらゆる操作をマクロ化できる自動化ツールです。Scripterを書くまでもない単純な反復作業をサクッと自動化したい時に重宝します。

記事の作成にあたって「対象レイヤーを複製して、0.9倍にする」を「5回繰り返す」を試しましたが、長らく更新されておらず、最新のFigmaでは動作しなかったため非推奨です。

Automator使用画面

設定後、runしても何も起こりませんでした。

先ほど紹介したScripterで以下のスクリプトを使うことで、同じようなことが実現できます。（「対象レイヤーを複製して、0.9倍にする」を「5回繰り返す」）

Scripterで実現

const selection = figma.currentPage.selection;

if (selection.length > 0) {
  let current = selection[0];
  
  // 0.9倍に縮小しながら5回複製するループ処理
  for (let i = 0; i < 5; i++) {
    const clone = current.clone();
    if (current.parent) {
      current.parent.appendChild(clone); // 同じ階層（オートレイアウト等）に追加
    }
    clone.rescale(0.9); // 確実に0.9倍に縮小
    current = clone;    // 次のループの基準を更新
  }
  figma.notify("5回複製しました！");
} else {
  figma.notify("対象の要素を選択してください");
}

Downsize

プラグインページ

画質を保ったまま画像サイズをガッツリ圧縮し、ファイル容量を削減してくれます。Figmaファイルが重くなってきた時に使うと便利です。

Downsizeの使用画面

プラグインを開くとこのようなウィンドウが表示されます。今回使った梨のフレームは既に最適化されていたため、「Already optimized. Try lowering the quality.」という文言が表示されました。（軽いファイルは削減してくれない模様）

別の画像を用意しました。（元サイズ: 6000×4000）

Downsizeの使用画面①

プラグインを実行します。

Downsizeの使用画面②

Downsizeの使用画面③

結果は96%削減されました。あくまでFigma内での容量を圧縮しているだけなので、エクスポート（書き出し）する画像ファイルの容量は変わりません。

Web用などに軽い画像を書き出したい場合は、Figmaから書き出した後にTinyPNGなどの外部圧縮ツールを活用しましょう。

Reverse Layer Order

プラグインページ

選択した複数レイヤーの順番を反転させるプラグインです。Auto Layoutの並び替えなどでよく使います。

Outline

プラグインページ

選択したフレームの余白を表示させます。表示させた要素自体は直接フレームの中に入らないので便利です。

Outline使用後

Vertja

プラグインページ

日本語の縦書きを再現するプラグインです。

Vertja 注意点

対象のテキストの横幅が固定になっていると縦文字にならないので、選択する前に確認をしましょう。（サイズ変更の部分が一番左になっていればok）

似たようなプラグインだとVertical Text JPもおすすめです。

Beautiful Shadows

プラグインページ

光源の位置を直感的に動かし、自然で美しいドロップシャドウを生成します。細かい数値を調整する手間が省けます。

Beautiful Shadows使用後

プラグインを実際に使用してみました。たった数秒で梨に立体的な影が追加されました。

Mesh Gradient

プラグインページ

複数のカラーポイントを操作し、今風のリッチで有機的なメッシュグラデーションを簡単に作成できます。

Mesh Gradientを背景使用

作ったグラデーションを背景にしてみました。Dot Gridで紹介する方法でも背景として使用できますが、こちらの場合、(1)生成されたグラデーションを画像で書き出す(2)書き出した画像を「塗り」→「＋（塗りを追加）」→「画像」から選択して使用するのがおすすめです。

Noise & Texture

プラグインページ

デザインにざらつき（ノイズ）を加えることで、ベタ塗りにアナログ感や温かみを出したい時に活躍します。

Noise & Texture使用後

プラグインを使用しました。イラストには既に温かみがあるので、ベクターレイヤーに使うのがおすすめです。

Dot Grid

プラグインページ

背景装飾によく使うドットのグリッドパターンを生成できます。ドットのサイズや間隔、色などを細かく設定できるので便利です。

Dot Gridの使用手順①

①プラグインを開くと画像のようなウィンドウが表示されるので、「Generate」をクリックします。

Dot Gridの使用手順②

②設定した値のDot Gridのフレームが生成されます。今回は梨が入っているフレーム内で実行したので画像のようになります。

Dot Gridの使用手順③

③Dot Gridのフレームを梨の背景として使用します。「梨全体を囲っているフレームを選択」→「塗り」→「＋（塗りを追加）」→「パターン」→「ソースを選択」で生成されたDot Gridのフレームを選択します。また、設定後、ソース元のフレームの方で色や大きさを変更すると梨の背景も同じように変更します。