Spaciiing：デザイン効率を向上させるオールインワンFigmaプラグイン

🌐 本文章はAIによる自動翻訳に基づいて作成されています。

2022年、インターンシップでの業務経験をきっかけに、8ptグリッドシステムに基づいてレイヤー間の間隔をワンクリックで調整できるFigmaプラグイン「Spaciiing（スペーシング）」を開発しました。このプラグインは、私自身のデザイン作業効率を大幅に向上させただけでなく、Figma公式コミュニティにおいても世界中のデザイナーから高く評価されました。

初代Spaciiingをリリースした後も私は改良を続け、プライベート版では自分のニーズに合わせた新機能を継続的に追加しました。しかし当時は技術的な限界もあり、機能が増える一方でコードのメンテナンスが次第に難しくなっていきました。

その後、2024年には新たにReactを学び、コードベース全体とユーザーインターフェースをリファクタリング。その成果をアップデートとして公開し、現在も競合分析やユーザーからのフィードバックを取り入れながら改良を続けています。

初代Spaciiingの誕生

2022年、私はあるデザイン会社でUIデザイナーのインターンシップをしていました。 当時よく任されていた業務は、レイヤー間の間隔を確認し、それらを8ptグリッドシステムに合わせることでした。

この作業は一見すると単純に思えますが、実際に取り組んでみると非常に手間がかかり、集中力を要する仕事でした。というのも、間隔の誤差はたいてい1px程度とごくわずかで、目視では確認できなかったため、レイヤーを一つひとつ丁寧にチェックしなければならなかったのです。

そこで、作業効率を高め、重複する操作を減らすために、私は自分のデザインと開発のスキルを活かしてSpaciiingという小さなツールを開発しました。このツールを使えば、選択したレイヤーを指定した方向に沿って、8ptグリッドシステムに基づきワンクリックで自動的に整列させることができます。

このツールを完成させたことで、間隔の確認作業は大幅に効率化されました。そして、同じ課題を抱えるデザイナーの役に立ちたいと思い、Figma公式コミュニティでSpaciiingを公開し、世界中のデザイナーと成果を共有しました。すると思いがけず大きな反響を呼び、公開から間もなく2,000人以上の方に利用されるまでになりました。そのとき初めて、自分が偶然のように生み出した小さなツールが、実は多くの人にとって必要不可欠な存在であったことに気づいたのです。

プライベート版にて機能を継続的に開発

こうしたプラグイン開発の経験を踏まえ、私は日常で繰り返し行っている操作を記録・分析し、それらを機能として実装しました。新しい機能を完成させるたびに、プライベート版のSpaciiingへ追加しています。

当時、私は各機能ごとに独立したプラグインを開発するという一般的な方法ではなく、すべての機能を一つのプラグインに統合しました。その理由は、ユーザーの認知負荷を軽減するためです。もし各機能が独立したプラグインとして存在していたなら、利用のたびにプラグイン名を検索欄に入力し、名前を覚えておく必要がありました。さらに、複数のプラグインを頻繁に切り替えるのは、ユーザーにとって大きな手間になると考えたのです。

また、新機能をプライベート版のみに実装していたのは、多くの機能がまだ不安定であり、しかも自分のニーズに特化した内容だったためです。

新しい機能を追加するたびにツールは便利になっていきましたが、その一方でコードの規模は急速に膨らみ、複雑さを増していきました。開発経験の浅かった当時の私にとって、そのメンテナンスは大きな壁となっていったのです。

リファクタリングによって生まれ変わったSpaciiing

2024年、「Zica」という作品の制作をきっかけにReactを学びました。複雑になりがちなHTML・CSS・JavaScriptを整理しやすいというReactの強みに触れ、プラグインのコードをReactでリファクタリングできる可能性を感じました。そこで、私はすぐにリファクタリングに着手し、その成果を7月にアップデートとして公開版のSpaciiingでリリースしました。

UI・UXに関する配慮

リファクタリングに着手する前に、私はこれまでのプラグイン使用経験を振り返りました。多くのプラグインは確かに必要な機能を備えていましたが、そのUIはFigma本来のUIと大きく異なり、慣れるまでに時間を要することが多かったのです。ユーザーの視点から見れば、プラグインを使うたびに異なるUIを理解し直さなければならないのは、どう考えても不合理でした。

そこでSpaciiingの新しいUIをデザインする際には、自前でデザインシステムを構築するのではなく、Figma本来のデザインシステム「UI3」を採用しました。文字や色、コンポーネントに至るまで統一し、まるでFigma公式UIをそのまま操作しているかのような体験を目指したのです。

機能に関する配慮

私は、ソフトウェア開発は一度で完成するものではなく、長期的に改善を重ねていくべき作業だと常に考えてきました。だからこそ、リファクタリングの成果をすでにリリースした今でも、UXに不十分さを感じる機能に対しては継続的に改善を続けています。

「プロパティクリップボード」モジュールを例に挙げると、その最初の設計アイデアは、私がUIデザインを行っていた際に繰り返し直面していた課題から生まれました。具体的には、Figmaで新たにフレームを作成すると、初期状態ではサイズが100×100に設定されており、その都度手動で調整しなければならない点に不便さを感じていました。この煩雑な操作は、毎回フレームのサイズを記憶・再入力する必要があり、作業効率の低下を招いていました。

こうした背景から、本モジュールは「指定サイズのコピー＆ペースト」をコアとする操作ロジックとして構想され、プライベート版からリファクタリング後のバージョンに至るまで継続して実装されています。

しかし、機能の応用可能性という観点から見ると、「サイズのみコピー可能であること」と「適用対象がフレームに限定されていること」の2点は、明らかに大きな制約となっていました。そこで、本モジュールを再設計するにあたり、「コピー＆ペースト」という基本ロジックはそのまま維持しつつ、コピー対象を「サイズ」から「すべてのプロパティ」へと拡張しました。あわせて、適用対象もフレームのみに限らず、すべてのレイヤータイプに対応するよう改修を行いました。これにより、当初の操作性や利便性を損なうことなく、機能の応用範囲を大幅に広げることができました。

もう一つの例が「Spaciiing」モジュールです。これは最も古くからあるモジュールの一つで、当初は「間隔」タブしか存在せず、ユーザーはプリセットから適用する数値を選択するだけでした。その後、プリセット数値のバリエーションを増やすために、「倍率」タブが追加されました。このような“加算式デザイン”になった背景には、主に私自身の技術的な制約がありました。

左側の改善前UIには、いくつかのUX上の課題が存在します：

1. そもそも「倍率」というロジック自体があまり一般的ではありません。倍率による掛け算の結果（例：2×8=16）をUI上に直接表示したとしても、ユーザーの視点から見ると理解に負担がかかります。
2. 「間隔」タブバーにある「0」と「カスタム」という2つの選択肢は、倍率を適用できないにもかかわらず、バー内のスペースを無駄に占有していました。
3. 「倍率」と「間隔」のすべての組み合わせの中には、重複する選択肢（例：1×24、3×8）がいくつか存在していました。これもまた、スペースの無駄という課題の一つとなっています。

そこで、これらの課題をすべて解決するために、新しいUIでは「倍率」というロジックを完全に廃止しました。代わりに、すべてのプリセット数値をキーボードのレイアウトのように表示する「数値キーボード」UIを導入しました。このUIはカスタムコンポーネントとして設計されており、そのインターフェースや操作ロジックは、Reactだからこそ実現できたものです。こうして、長らくお待たせしていたこのアップデートは、リリースから3年の時を経て、ようやく実現することができました。

改善後のUIでは、8ptグリッドシステムでよく使用される数値を直感的に選択できるようにすることで、UXを大幅に向上させました。さらに、数値の並びにも工夫が施されています。たとえば、アプリUIで頻繁に使われる数値は1列目に、Webデザインで一般的な数値は2列目に配置されています。

エモーショナルデザインに関する配慮

Spaciiingのさまざまなモジュールの中でも、私が特に気に入っているのが「デザイン効率レポート」です。

このモジュールの着想は、ある日ふと頭に浮かんだものでした。「Spaciiingの価値が、ユーザーの重複した非効率な操作を削減することにあるのなら、その“節約された労力”を可視化できれば、さらに意義があるのではないか」と考えたのです。

こうした思いを抱えながら、私はSpaciiingを使用しない場合に必要となるマウスクリック数をさまざまな操作ごとに記録し、その結果をもとに独自の算出式を作成しました。さらに、「実績システム」を開発し、ブロンズ、シルバー、ゴールドといったレベルを達成するために必要なクリック数の基準を設定しました。このように「プロダクトの使用」と「ゲーム実績」を連動させることで、ユーザーはレポートを確認するたびに、「自分がこれほど多くのクリックを節約していたのか」と気づき、心の底から強い達成感が湧き上がります。そして、それがさらなる利用意欲につながっていきます。

デザインの観点では、この手法は「ゲーミフィケーションデザイン」と呼ばれます。このアプローチの最大の強みは、ユーザーにポジティブな感情を与えると同時に、プロダクトのコアバリューを強調することで、高い満足度やロイヤルティの向上につながる点にあります。

デザインの特徴

Spaciiing：8ptグリッドシステムに基づいてレイヤーの間隔を設定

このモジュールは、初期リリース時から搭載されていた機能です。初期の縦・横モードに加えて、後にグリッドモードが追加されました。さらに、UI全体は従来のタブ式からキーボード式レイアウトへと一新され、プリセット数値をより網羅的に表示できるようになりました。

矢印を描く：フローチャートを簡単に作成

このモジュールでは、レイヤー間の矢印をワンクリックで作成できます。さらに、複数の矢印を一度に生成することも可能です。これは、他の類似プラグインにはない機能であり、大きなメリットとなっています。

プロパティクリップボード：単一のプロパティをコピー＆ペイスト

名前の通り、このモジュールはレイヤーをコピー対象として指定し、そのレイヤーのさまざまなプロパティ（例：幅、高さ、角の半径など）を他のレイヤーに適用することができます。

Figmaにも類似した機能が既に搭載されていますが、その機能では一度にすべてのプロパティをペーストすることしかできず、個別にペーストすることはできません。

カタログ：デザインスペック書類を自動的に作成

私は、世界中のデザイナーが共通して、使用している「スタイル」や「バリアブル」の属性を一つのフレームに整理し、まるでドキュメントのようにまとめていることを観察しました。これは、デザインプロセスにおける迅速な参照ツールとして、あるいはデザイン交付時の説明資料として利用されています。したがって、この機能の設計目的は、この整理作業を自動化し、重複操作を減らし、効率を向上させることにあります。

選択フィルター：選択範囲をレイヤータイプに基づいてフィルターする

スケールの大きいデザインプロジェクトでは、レイヤーが複雑にネストされており、特定のレイヤーを選択することが次第に困難になります。そこで、この機能を使えば、レイヤータイプや名前に基づいて選択範囲をフィルタリングすることができます。

他の機能

前述の機能に加えて、Spaciiingにはそのほかにも多くの機能が搭載されています。

• レイヤーを特定なアスペクト比へ調整
• JSONでバリアブルを一度に作成
• レイヤーの名前を自動的に整理
• 文字内容の検索と置換
• アイコンテンプレートを作成する
• など

振り返りと成長

3年間を経て、Spaciiingは「自分のために作った小さなツール」から「世界中のデザイナー向けのソリューション」へと進化しました。この転換において最大の課題となったのは、もはやユーザーが自分一人ではなく、世界中のデザイナーのニーズを考慮しなければならないという点でした。

この経験を通じて、私は自己中心的なデザイン視点から脱却し、各機能モジュールのコアロジックを改めて見直す必要があることに気づきました。そして、分解・再構築・抽象化というプロセスを通じて、機能により高い汎用性と拡張性を持たせ、より幅広いユーザー層に真に貢献できるようにしました。

限られたスペースの中で機能する「ツール」をデザインするからこそ、私は常にインターフェース設計において「簡潔さ」と「機能性」の間で葛藤してきました。機能を網羅したインターフェースにすれば、どうしても複雑になり、習得のハードルが高くなってしまいます。反対に、初心者ユーザーを意識して画面を簡略化すれば、長期的なユーザー数の増加は見込めるものの、上級ユーザーの操作体験が犠牲になってしまいます。したがって、この二律背反の間で最適なバランスを探ることが、新機能を設計する際の一貫した目標となっています。

Spaciiingを開発・保守する経験を通じて、フロントエンドにおけるモジュール思考やシステム思考のスキルを多く学びました。これは技術面での成長にとどまらず、プロダクト運用に対する深い理解へとつながりました。

これからは、UXリサーチの手法を活用し、ユーザーへのヒアリングを継続的に行うことで、プロダクトの改善につなげていくことを目指しています。

Spaciiingをダウンロード：https://www.figma.com/community/plugin/1129646367083296027