はじめに
こんにちは！ 株式会社WebCrewのデザイナー @wc-nakagomi です。
今回は、Figmaプラグイン第2弾 「Text & Shape Utilities」 を作成・公開したのでご紹介します。
第一弾はこちら↓
整列・テキストサイズ・行間・角丸・比率変更・拡大縮小・テキストケース・全角⇔半角・ダミーテキスト生成の9機能を1つのパネルにまとめたプラグインです。
プラグインページはこちら↓
https://www.figma.com/community/plugin/1672442078094249878/
なぜ作ったのか
作った理由は単純で、デザイン時に発生する細かい調整が地味に面倒だったからです。具体的には2つありました。
① パネルが画面の右端に固定されていて、カーソル移動が面倒
Figmaの右パネルは画面の右端から動かせません。
オブジェクトを触る → 右端までカーソルを運ぶ → また戻る
の繰り返しになります。1回の距離は大したことがなくても、何十回も繰り返せば積み重なります。
Adobeのツールは、整列や変形のパネルを作業対象のすぐ近くに独立させて使用できていたので、同じことができないのは地味にストレスでした。
② 同じ数値を何度も打ち込むのが面倒
角丸を8にする、テキストサイズを16にする、行間を150%にする。どれも数値を打ち込む操作です。
UIデザインでは、余白や角丸を4の倍数・8の倍数で組むのが定石です。文字サイズや行間も慣習的にだいたい決まった値を使います。つまり打ち込む値は、はじめから決まった集合の中にあるわけです。
決まった値しか使わないのに、毎回キーボードで入力しなければいけません。
本プラグインのポイント
① 好きな位置に置けて、セクションごとに畳める
プラグインのウィンドウは、キャンバス上の好きな場所に動かせます。作業しているオブジェクトのすぐ横に置けば、右端まで往復する必要がありません。
ただし9機能あると縦に長く、そのままでは作業の邪魔になります。なのでセクションごとに畳めるようにしました。
使わないセクションを畳めば、見出しだけの高さまで縮みます。
普段使うのが整列と角丸だけなら、その2つだけ開いた状態にしておけます。
※開閉した状態は記憶されるので、次に開いたときも同じ状態で展開されます。ウィンドウの高さも中身に合わせて自動で調整されるようにしました（手動で固定することもできます）。
② よく使う値はボタンで
数値を打ち込む代わりに、プリセットのボタンを押すだけで即反映できます！
- 角丸: 0 / 2 / 4 / 8 / 12 / 16 / 24 / 999
- テキストサイズ: 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 48 / 56 / 64 / 72
- 行間: Auto / 100 / 120 / 140 / 150 / 160 / 180 / 200%
- 拡大縮小: 25 / 50 / 75 / 100 / 125 / 150 / 175 / 200%
等間隔配置のプリセット（4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 56 / 64 / 72）は、すべて4の倍数で並べてあります。
もちろん任意の値も入力できます。
そのほかにできること
上の2つが主なポイントですが、ついでに下記の作業を簡略化できる機能も入れました。
- 比率変更 — 16:9 / 4:3 / 黄金比 / 白銀比 / 1:1 / 3:2 にリサイズ。4の倍数・8の倍数へのスナップも
- テキストケース — UPPERCASE / lowercase / Title Case / Sentence case
- 全角⇔半角 — 文字種ごとに変換対象を選べます。記号は26種類を個別にON/OFF可能
- ダミーテキスト生成 — 日本語・英語の文章と氏名。文字数を指定すると、その文字数ちょうどの文章を作ります
まとめ
❶ 「Text & Shape Utilities」は、デザイン時に発生する細かい調整を効率化するプラグイン
❷ 好きな位置に置けるので、右パネルの往復をしなくて良い
❸ よく使う値はボタンで数値入力なしで即反映
❹ その他、デザイン作業を簡略化できる機能がついている
いかがでしたでしょうか？
「パネルまで往復するのが地味に面倒…」「数値入力がめんどくさい…」という方には、ぜひ 本プラグイン を使ってもらえると嬉しいです。
なお次回は、1年前までVSCodeも使えなかったデザイナーでも、AIを使えばプラグインは意外と作れるという話を書く予定です。
【追記】記事を公開しました↓
以上となります！ お読みいただきありがとうございました。