Figmaのテキストやオブジェクトを斜めに変形・旋回させるプラグイン「SkewDat」

Figmaではオブジェクトを斜めに変形させることができません。

Illustratorであれば［効果］→［ワープ］→［旋回…］で斜めに変形できるので、わざわざ一度Illustratorで編集してからFigmaに持ってくることになります。

今回紹介する「SkewDat」を使うと、このIllustratorの旋回と同じような効果をFigmaだけで完結できます。

SkewDat

Figma

Figma

https://www.figma.com/community/plugin/741472919529947576/SkewDat

Figma Community plugin — It’s stupid simple, and yes you absolutely needs this! Let’s be honest we’ve all at least once tried to skew things up a notch... and admit it, whatever hack you tried was just a dirty hack. Well now you can just say SkewDat! With our plugin you can skew anything & everything in sight within ...

インストールするとメニューバーに［Plugins］→［SkewDat］が追加されます。

基本的な使い方

テキストやオブジェクトを選択した状態で、Figmaメニューバーの［Plugins］→［SkewDat］を選択するとパネルが表示されます。

あとは下のバーと右のバーを上下に動かして変形させるだけです。

下のバーが水平方向に変形、右のバーは垂直方向に変形されて、変形後は「Horizontal Skew」や「Vertical Skew」の左横のアイコンが変わります。
このアイコンをクリックすると「0度」にリセットされますし、両方リセットしたい場合は「Reset」ボタンをクリックします。

調整できたら「Apply」で適用が確定されます。

基準となる辺

Horizontal Skewを指定する場合、上の辺が基準となって変形します。

Vertical Skewを指定するする場合は、左の辺が基準になって変形します。

複数オブジェクトに適用したい

複数オブジェクトを選択すると、一括で効果が適用されます。
1つ1つのオブジェクトが支点になるので、複数オブジェクトをまとめまった状態で変形させたい場合は1度グループ化する必要があります。

ちなみに、「Apply」をクリックする前に他のオブジェクトを選択すると、バーを動かしたタイミングでその選択オブジェクトにも効果が適用されます。

数値入力には対応していないので注意

キーボードで直接数値を入力できないので、マウスで頑張って調整する必要が出てきます。

垂直方向に変形させると、「回転」の値が変化するので連動しているのかと思いきや、回転の値を変えても特にSkewDat側に反映はされません。

マウスで1度レベルの調整をするのは手が疲れるので苦手ですが、そこまで頻繁に使うこともないのでひとまずは問題ありません。