Figma Drawの公開や日々のツールの進化により、Figmaでイラスト・図版を作ることが現実的になってきています。以前からベクターネットワークというベジェ曲線の進化版のようなものが採用されていますし、角丸の大きさや角の形状がアンカーポイントごとに設定できるなど、ベクター絵描きにとって嬉しい機能が満載です。
ただ、Figmaは基本的にはアプリやWebサイト等のプロトタイピングをするための環境です。UIや仕様はその方向に最適化されているので、絵描き作業には少々不便に感じることも。
例えば、選択した複数アイテム全体のバウンディングボックスにて座標やサイズを指定したくなりますが、Figmaのパネル／インスペクターだと複数選択時はMixedになってしまいます。全体の左上がこの座標だとか、幅いくつになるというのがわからないし、指定できないわけです。
Adobe Illustratorに慣れているかたなら、変形パネルを使ってそのような操作をしていたことでしょう。例えば変形基準点をセットし、移動先のX座標をコピーして対象複数アイテムのX座標にペーストして移動する、といった流れです。それができたら嬉しいですね。
またサイズについては、幅や高さを数値で指定する場合、変形は左上基準のみです。Scale機能なら複数アイテムの中心など自由に基点を指定できますが、これの場合必ず線幅や効果も一緒に変形されます。イラストの場合はそれらは同じまま大きさだけ変えたいことも結構多いのですよね。
そこで今回は、Illustratorの変形パネルのように、複数アイテムの座標やサイズを基準点をもとに数値で指定できるFigmaプラグイン、TransformPanel を紹介します。
目次
動画で見たい
TransformPanelって何？
複数アイテムの座標やサイズを数値で指定できるFigma用プラグインです。パネルにて選択アイテムの移動と拡大縮小ができます。
変形基準点を利用し、センターや右上などの位置を固定しながらリサイズ可能です。変形の際には、線の太さ（Stroke weight）・エフェクト（Effects）・角の半径（Corner radius）などを連動して変更するかしないかを選べます。
また、パネルを出したままモーダルダイアログでアイテムの移動（Translate）と拡大縮小（Rescale）が可能です。実行時、数値入力欄にフォーカスした状態になっているため操作が非常にスムーズです。
どうインストールするの？
今回のプラグインはFigmaコミュニティの公開審査をすでに通過しています。Figma Design/Slides/FigJamのプラグインメニューから「TransformPanel」を検索するか、次のリンクからインストールしてください。
使いかたは？
基本的にパネル（以後Transformパネルと呼ぶ）で操作します。プラグインメニューの TransformPanel > Show Panel を選んでください。パネルが表示されます。
キャンバス上で対象のアイテムを選択し、X座標やW（幅）の数値をセットするなどしてアイテムを変形してください。複数のアイテムを選択して操作できます。
パネルを出したまま、タイアログで移動・拡大縮小を発動することも可能です。後述の解説をご参照ください。
Transformパネルを表示する（Show Panel）
プラグインメニューの TransformPanel > Show Panel を選んでください。Transformパネルが表示されます。
ダイアログでアイテムを移動する（Translate…）
- 対象のアイテムを選択します
- プラグインメニューのTranslate…を選んでください
- Transformパネルの前面に移動距離入力欄が現れます。そこに数値をセットします
- Applyボタン、またはEnterキーで確定します
すると、選択アイテムが指定した距離移動します。Transformパネルは開きっぱなしになるので、再調整などはパネルからがおすすめです。
ダイアログでアイテムを拡大縮小する（Rescale…）
- 対象のアイテムを選択します
- プラグインメニューのRescale…を選んでください
- Transformパネルの前面に拡大率（%）入力欄が現れます。そこに数値をセットします
- 変形基準点を変更したい場合は、入力欄の下にある9つのボタンをクリックしてセットしてください
- Applyボタン、またはEnterキーで確定します
すると、選択アイテムが基準点をもとに拡大縮小されます。Transformパネルは開きっぱなしになるので、再調整などはパネルからがおすすめです。
線の太さやエフェクトを連動して変更するかどうかは、パネルのチェックボックス「Scale strokes and effects」で指定してください。ダイアログには出てきません。
パネル詳細
1. 変形基準点（Reference point・Figmaでいうアンカーポイント）
選択アイテムの、どの方向を固定して変形するかを制御します。
2. 数値入力欄
X座標・Y座標・W（Width／幅）・H（Height／高さ）の数値を、ここで取得およびセットします。
- 数値入力欄では矢印キー上下で数値増減。shiftを押しながらだと10倍量
- 四則演算に対応。 ‘200%’／’2x’／’*=2’形式での相対計算機能などで打鍵を少なく
- shiftを押しながら数値確定で縦横比を固定、option/altを押しながらで複製など、グラフィック編集アプリ定番の動作に対応
XとYは、常にグローバル座標の数値を採用します。Frame内座標を使いたい場合、Figma本体のインスペクターをご利用ください。
3. 縦横比を固定（Lock acpect ratio）
ONにすると、幅・高さ変形のとき縦横比を固定して拡大縮小します。この設定はTransformPanelプラグインのみで有効です。Figma本体が持つ環境設定と互換性はありません（プラグインAPIから十分にアクセスできないため）。
4. 線幅と効果を拡大縮小（Scale strokes and effects）
ONにすると、幅・高さ変形のときStroke weight・Effects・Corner radiusを連動して拡大縮小します。OFFの場合はそれらを変更せず、大きさだけを変えます。
テキストの特例
テキストの場合、Lock acpect ratioとScale strokes and effectsが両方ONのときのみテキストのサイズや行送りなどを変更します。OFFのときはフレームの大きさを変えるだけです。OFFが基本動作ですね
5. レイアウト指定メニュー
XYWHの配置レイアウトはアプリにより流派が異なるので、いくつかのパターンから選べるようにしました。これにより、あなたは余計な思考を飛ばして身体感覚で操作するようになることでしょう。
6. Buy Me a Coffeeリンク
プラグイン作者のしたたか企画をBuy Me a Coffeeにてサポートするためのリンクを開きます。開くだけで、クリックした時点では課金は行われません。ぜひ自らの意志でサポートをお願いします。
応用
macOSの場合、OSの機能を使ってメニューにキーボードショートカットを割り当てられます。
Transformパネルを出しておき、Translate…やRescale…のダイアログをショートカットで発動すれば、パネルを出しっぱなしにしながら変形操作をキー入力だけで済ますことができます。
なるべくマウスを使いたくないけど、細かい設定はパネルで操作したいあなたにぴったりです。
作者に感謝を伝えたい！
Buy me a coffeeは、クレジットカード払いなどでクリエイターにコーヒーをおごれるサービスです。ツール・情報が役に立った！ 感謝の気持ちを表現したい！ というかた、おごっていただけましたら嬉しいです☕️
パネルのコーヒーアイコンからも移動できます。
これでまた少し仕事が速くなりました。今日もさっさと仕事を切り上げて好きなことをしましょう！
このサイトで配布しているスクリプトやその他のファイルを、無断で転載・配布・販売することを禁じます。
それらの使用により生じたあらゆる損害について、私どもは責任を負いません。
スクリプトやファイルのダウンロードを行った時点で、上記の規定に同意したとみなします。
