文章系列介紹
作為設計師度過的每一個平凡日子。
二年前、毎日のデザイン作業のつまらない部分を少しでも効率化するために、人生初のFigmaプラグイン「Spaciiing(スペーシング)」をリリースしました。シンプルなプラグインのままでも良かったのですが、毎回いろんなプラグインの間でスイッチすることがやはり少し面倒だと感じました。これをきっかけに、様々な便利な機能を全部まとめたスーパープラグインを作りたいと思うようになりました。今日は、その新しく生まれ変わったSpaciiingを皆様に紹介したいと思います。
万全な日本語対応
「インターフェースが全部英語でちょっときつい」と感じている方はいませんか。いくら便利なプラグインでも、言語の壁があると使う気にならないこともあるかもしれません。しかし、Spaciiingならその心配はありません。Spaciiingはインターフェースが全て日本語に対応しています。これにより、英語が得意でない方もスムーズにプラグインを使用できます。
Spaciiing
1個目のタブにある「Spaciiing」機能は、ワンクリックでオブジェクトの間隔を設定できる機能です。Figmaにはオートレイアウトという機能もありますが、それはオブジェクトの位置が整っている場合にしか使えません。その上、オートレイアウトを一度設定すると、後でレイアウトを再調整するのが非常に面倒になります。
不規則なオブジェクトをレイアウトしたい時や、デザインがまだ発想段階にあり、いろんなレイアウトを試したいときには、この機能が非常に役立ちます。
プロパティクリップボード
この機能は、オブジェクトの幅や高さ、名前などのプロパティを記憶し、それを別のオブジェクトに適用することができます。例えば、新しくフレームを作成する際、Figmaは必ずデフォルトサイズ(100×100)で作成しますが、この機能を使えば、よく使うフレームサイズを記憶して適用することができて便利です。
バーチャルプロフィル
大規模なデザインを作るとき、必ずダミーデータを使う機会もあります。しかし、チームメンバーがそれぞれ異なるダミーデータをデザインの様々な部分に使用すると、同僚やクライアントに混乱を招く恐れがあります。実際に、僕がインターンをしていた時にこの問題に直面しました。異なるダミーデータを使用していたため、クライアントが本来同じシステムのデザインを異なるシステムとして解釈したり、異なるユーザーが操作していると誤解したりしてしまったのです。設計者たちが互いに異なるダミーデータを同じシステムの代わりに使用していることを理解できても、クライアントの視点に立ち、彼らがどのように解釈するかを考慮することが重要です。
こんな状況では、バーチャルプロファイル機能が非常に役立ちます。この機能を使えば、たとえ同僚とデザインを同時に作成していても、同じダミーデータを使用していることが確保できます。基本的なユーザー名や年齢、性別だけでなく、雇用状況やフィナンシャルデータまで設定することができます。何より素晴らしいのは、カスタムフィールドも用意されている点です。どんなデザインを作っても対応できるため、柔軟に利用できます。もちろん、同僚間でのバーチャルプロファイルデータの同期も可能です。
選択フィルタ
特定のオブジェクト(例:テキストレイヤー)を一気に調整したい時には、この機能を使いましょう。様々なフィルタ対象を指定できるため、あっという間に作業を完了することができます。さらに、名前を加えてオブジェクトを検索するという高度な操作も可能です。
名前クリーナー
設計が複雑になるにつれて、レイヤーの名前も次第に冗長で理解しづらくなってしまいます。特に、フレームやシェイプなどのオブジェクトでは、レイヤー名の後ろに付く数字が非常に煩わしいです。そんな時には、この機能を使ってレイヤーを自動的にリネームし、レイヤー名を整理することができます。
アスペクト比ヘルパー
ワンクリックでオブジェクトの幅と高さを特定のアスペクト比に調整できるツールです。さらに、調整する際に幅または高さを固定することも指定できます。このツールは、いくつかのプリセットを提供していますが、もし使いたいアスペクト比がない場合はカスタムフィールドも用意されています。
どのアスペクト比を使えば良いか迷っている方のために、ツールの説明文にはよく使用されるアスペクト比の用途も詳しく書かれています。
ショットカット
いろんな便利な操作が集まっている宝箱です。特によく使われるのが、テキストの検索と置換機能です。他にも、レイヤーの塗り色のHEXまたはRGB値を簡単に生成する機能があります。特にウェブデザインをしている方におすすめです。
さらに、各フレームのデザインステータスを一目瞭然に表示できるタグやノートを作成する機能も搭載しています。この機能により、デザインの進捗状況を簡単に把握でき、チームメンバーとのコミュニケーションがスムーズになります。
バリアブルジェネレーター
Figmaのバリアブル機能は便利ですが、各バリアブルのスコープを指定するには、一つ一つ手動で設定しなければなりません。複数のバリアブルを頻繁に作成する場合、非常に面倒な作業になります。
そこで、このバリアブルジェネレーターが役に立ちます。この機能を使えば、簡単に作成したバリアブルのスコープをまとめて指定することができます。さらに、プログラミングでバリアブルを作成できるため、公式UIの複雑な操作を避けることができます。
「デザイナーなのでプログラミングなんかできない」と心配している方もいると思います。でも大丈夫です。このツールは初心者でも直感的に操作できるように作られており、コード例のボタンも用意されています。必要なのは、バリアブルの名前と値を書くことだけです。このボタンを押すと、一つのバリアブルを作成するコードが生成されます。複数のバリアブルを作成したいときは、ボタンを複数回押すだけで簡単に作成できます。
プリセットライブラリー
新しくファイルを作ったときに、知名のデザインシステムからスタイルやバリアブルを素早く生成できるツールです。コレクションには、AppleのiOS、GoogleのMaterial Design、そして人気のAnt Designなどが収録されています。
最後に
いかがでしょうか。プラグインの様々な機能を組み合わせることで、より高度な操作も可能です。例えば、選択フィルターを使ってテキストレイヤーをまとめて選択し、その上でテキスト内容の検索と置換を行うことができます。これにより、効率的に作業を進めることができるでしょう。
Spaciiingは基本の同名機能を無料でご利用いただけます。プロ機能を使うには、月額または年額プランの購読が必要です。月額プランは毎月$4.99(約¥700)ですが、年額プランはさらに20%オフの割引があり、最終的に毎月$3.99(約¥560)になります。お手頃な価格で毎日のデザイン作業効率を一気に上げられることを考えると、非常にお得です。Figmaを毎日仕事ツールとして使っている方には特におすすめです。
購読プランの購入に興味がある方は、こちらのGumroadページから購入手続きを進めてください。画像の中にあるドロップダウンメニューから希望するプランを選択し、あとは「Subscribe(購読)」ボタンを押すだけで、支払い手続きに進みます。支払いが完了すると、ライセンスキーが登録したメールアドレスに届きます。プラグイン内でそのライセンスキーを入力すると、購読資格が有効になります。
※Gumroadは、クリエイターがデジタルコンテンツや商品を簡単に販売できるオンラインプラットフォームです。
RECOMMEND
日檢JLPT N3~N1通過心得、選書策略與學習方法分享
2024.06.11
UI/UX設計師必看!揭秘讓我Figma操作效率提升十倍的秘密武器!
2024.07.05