UI/UXデザイナーに贈る、最強のオールインワンFigmaプラグインSpaciiing！間隔設定や矢印描画まで全てワンクリックでOK！

Figmaコミュニティには多様なプラグインがあり、「Figmaでのデザイン」の可能性をさらに広げてきました。しかし、さまざまなプラグインを使う中で、次のような悩みも生まれています――それは、いざというときに「使いたいプラグインの名前がどうしても思い出せない」ということです。そこで、もし、よく使う機能をすべてまとめた“スーパープラグイン”があったとしたら、毎日のデザイン作業は、きっともっと楽になるはずです。

僕が作った「Spaciiing（スペーシング）」は、まさにこの願いを叶えるプラグインです。 間隔設定、矢印の描画、選択範囲フィルターなど、10種類以上の強力な機能を搭載しています。どんな機能があるのか、一緒に見ていきましょう！

万全な日本語対応

機能の紹介の前に――『インターフェースが全部英語で、ちょっときついな…』と感じていた方も、きっといるはずです。

いくら便利なプラグインでも、言語の壁があると使う気にならないこともあるかもしれません。しかし、Spaciiingならその心配はありません。Spaciiingはインターフェースが全て日本語に対応しています。これにより、英語が得意でない方もスムーズにプラグインを使用できます。

ワンクリックでオブジェクトの間隔を設定

1つ目のタブにある「Spaciiing」の機能は、ワンクリックでオブジェクト間の間隔を設定できる機能です。Figmaには「オートレイアウト」という機能もありますが、すべての状況に適しているわけではありません。たとえば、画面上にいくつかのフレームを並べたいとき、「オートレイアウト」を使うには、まずオートレイアウトを適用し、そのあとで解除する必要があります。

そんなときに役立つのが、「Spaciiing」機能です。このツールには、8ピクセルを基準としたオプションがあり、レイヤーを横・縦・グリッドパターンで、ワンクリックで整列させることができます。もちろん、カスタムの間隔値を設定することも可能です。また、並べたレイヤーをオートレイアウトとして保存したい場合は、「オートレイアウトを作成」にチェックを入れるだけでOKです。

気楽で矢印を描く

フローチャート作成は、すでにデザイナーの日常の一部です。そして、きれいなフローチャートに欠かせないのが「矢印」。しかし、Figmaで矢印を1つずつ描くのは、正直かなり面倒です。ペンツールで横や縦の線を描いたあと、さらに端点（エンドポイント）の設定まで必要になります。

そこで登場するのが、「矢印を描く」ツール。名前のとおり、矢印を描くことに特化した専用ツールです。このツールを使えば、複数のレイヤー間に矢印を、ワンクリックで簡単に作成できます。もちろん、矢印の色・太さ・角の丸みなども自由に調整可能。さらに、設定したスタイルは保存して、あとから再利用することもできます。

レイヤープロパティを単独に貼り付け

「うわー、うっかり間違ったレイヤーにドロップシャドウを設定しちゃった…」そんな経験、きっと誰にでもあるはずです。

でも大丈夫。「プロパティクリップボード」機能があれば、もう心配いりません。 コピー元のオブジェクトを指定すれば、そのプロパティだけをピンポイントで貼り付けることができます。しかも、貼り付け可能なプロパティは、Figmaで設定できるほぼすべての項目に対応しています。

選択範囲をレイヤーの種類で絞り込む

特定のオブジェクト（例：テキストレイヤー）を一気に調整したい時には、この機能を使いましょう。様々なフィルタ対象を指定できるため、あっという間に作業を完了することができます。さらに、名前を加えてオブジェクトを検索するという高度な操作も可能です。

アスペクト比ヘルパー

特定のアスペクト比を使うことは、デザインをさらに洗練させるための重要なポイントです。 このツールを使えば、ワンクリックでオブジェクトの幅と高さを、指定したアスペクト比に自動調整できます。

一瞬でスタイルカタログを作成

デザインがある程度進んだ段階で、使用しているスタイルや変数をすべて一覧化し、チームのメンバーと一緒に確認・評価する時期がやってきます。

「カタログ」機能を使えば、本来なら時間がかかるこの作業を、わずか1分以内で完了させることができます。この機能は、あなたが使用しているスタイルを、下図のように美しく整理されたカタログに変換します。

そして、どのようなスタイル・バリアブルの種類であっても、統一されたレイアウトで表示されるのが特徴です。さらに素晴らしいのは、作成したカタログをチームメンバーとのディスカッションボードとして活用できる点です。「説明」欄にコメントを追加して議論し、最終的には「ショートカット」機能を使って、その内容をFigmaのフィールドに反映させることができます。

プリセットライブラリー

すぐにデザインを始めたいとき、一番の近道は、有名なデザインシステムの知恵を活用することです。「プリセットライブラリー」を使えば、iOS、Material Design、Ant Design、Tailwind CSS、Bootstrap、Polaris、Carbon などのデザインシステムから、カラー、タイポグラフィ、数値設定などの値を取得し、それらをスタイルやバリアブルとして保存することができます。

JSONでバリアブルを作成

もしあなたがJSON形式に詳しいエキスパートであれば、JSONを使ってFigmaバリアブルを作成することも可能です。これにより、UI上の操作よりもさらに高速なワークフローが実現できます。

このツールでは、JSON形式で数値を編集したり、バリアブルの適用範囲を設定したりして、複数のバリアブルを一括で作成することができます。

プログラミングが苦手な方でもご安心を。「コード生成」ボタンを使えば、単一バリアブルを作成するためのコードを自動生成することもできます。

バーチャルプロフィル

Tom Greeverの著書『Articulating Design Decisions: Communicate with stakeholders, keep your sanity and deliver the best user experience』の中に、こんな一節があります：

……ステークホルダーとの会議中、一時的なモック画像やダミーテキストに気を取られてしまい、本来の会議の目的を見失ったり、混乱や誤解が生じたりすることがある。

これは、たとえ一時的な要素であっても、デザインに使用するモック画像やダミーデータには、論理性と一貫性が必要であることを示しています。そうでなければ、チームメンバーに混乱や誤解を与えてしまう可能性があるのです。

「バーチャルデータ」機能を使えば、こうした問題を簡単に回避できます。

この機能では、ユーザーや商品などのカテゴリごとにグループ（フォルダのようなイメージ）を作成し、その中に名前、ID、登録日などの各項目を自由に設定できます。使いたいときは、テキストレイヤーを選んでワンクリックでデータを適用するだけ。

さらに便利なのは、これらのバーチャルデータがFigmaファイルと自動的に同期される点です。誰がファイルを開いても、Spaciiingプラグインを使えば、常に同じデータにアクセスできます。

他にある機能

• レイヤー名を一括で自動クリーンアップ
• テキストの検索と置換
• 塗りつぶしカラーをテキストラベルに変換
• ダミーテキストの挿入
• カタログ内のテキストをFigmaに反映
• デザイン進行状況を管理する「ステータスタグ」の作成

値段

Spaciiingは、すべての機能を無料で制限なくお試しいただけます（※操作ごとに約60秒の待機時間あり）。サクサク使いたい方には、待機なしの有料プランもご用意しています！

• 月額プラン：$3 USD / 月
• 年額プラン：$36 USD / 年