Figmaでオブジェクトを傾けるために、アンカーポイントを手作業でずらして調整したり、Illustratorなどで加工してから読み込んだりするのは、意外と手間がかかると感じたことはないでしょうか。
特にデザインに当てはめながら角度を微調整したいときや、変形後のテキスト修正の際は歯がゆさを感じますよね。
本記事では、こうした悩みを解決してくれたプラグイン「Skew」をご紹介します。
Skewとは？
Figma上のオブジェクトを上下・左右に傾けられる無料のプラグインです。
専用パネルのスライダーを動かすだけで変形がリアルタイムに反映されるため、見た目を確認しながら調整できます。
また、変形後もテキストの打ち替えや色の変更が可能です。
https://www.figma.com/community/plugin/1219749104610050886/skew
使い方
1. 準備
まず、変形したいオブジェクトを用意し、Skewを起動します。今回はテキストを例に進めます。
起動すると、変形の方向を調整するための専用パネルが表示されます。
2. 変形の方向や角度を調整
調整できる項目は「Horizontal」と「Vertical」の2つです。
・Horizontal：左右に傾けたい場合に調整
・Vertical：上下に傾けたい場合に調整
変形したいオブジェクトを選択した状態で、パネル内のスライダーを動かすか、数値を直接入力して調整します。
調整が終わったら、パネル右上の「×」ボタンをクリックして閉じれば完了です。
テキスト以外の活用アイデア
Skewはテキストだけでなく、画像や図形にも使用できます。
例えば、画像や装飾を水平方向に15度ほど傾けると、疾走感や視線誘導を生み出せるため、スポーツや求人のLP、バナーなどでよく使われています。
まとめ
今回は、Figmaでオブジェクトを上下・左右に傾けることができるプラグイン「Skew」をご紹介しました。
私は日々のデザイン業務で、オブジェクトを斜めに変形させるなど、Figmaの標準機能だけでは実現が難しい表現にはさまざまなプラグインを活用しています。
こうしたプラグインを知っておくと必要な場面ですぐに使えるため、作業時間の短縮につながるので、気になった方は、ぜひ一度試してみてください。
他にも日々のデザイン業務を通じて培った、制作に役立つナレッジを発信しています。気になる記事があれば、ぜひご覧ください。
