figma-skewdat-plugin
公開日: 2021.09.10  | 更新日: 2021.09.10

Figmaで簡単にテキストや図形を斜めに変形する方法

今回は、Figmaで簡単にテキストや図形オブジェクトを斜め方向に変形させることができるプラグイン「SkewDat」を紹介します。オブジェクトを斜め方向に変形させることで、奥行きを出したり躍動感を表現できます。

この記事のターゲット

  • Figmaの初心者

  • Figmaで斜め方向にオブジェクトを変形したい方

  • Figmaでフォントをきつめの斜体にしたい方


1. 「SkewDat」をインストールする

install-skewdat

Figma Community の「SkewDat」のページからインストールします。

プラグインに関する説明と詳しいインストール方法はこちらの記事を参考にしてください。

Figmaのプラグインのインストール方法と使い方

今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。 ... 続きを読む

figma-how-to-use-plugins

2. ファイルを開いて斜めにしたいオブジェクトをプラグインで変形する

インストールしたら、ファイルを開いてプラグインを起動して、斜め変形を適用していきます。手順は次の通りです。

  1. 斜めにしたいオブジェクトを選択する

  2. 右クリックメニューから「Plugin」を選択し、「SkewDat」を選択する

  3. ポップアップメニューで縦・横方向に変形したい度合いを調節して「Apply」を押す

figma-skewdat1

以上です。非常にシンプルですね。

複数のオブジェクトを同時に選択した状態で変形させると、それぞれのオブジェクトごとに変形が適用されているようでした。

figma-skewdat2

テキストに変形を反映した場合、変形後でもテキストの編集ができました。

プラグインを使わない場合は、アウトライン化した後にベクターを直接変形するしか無かったのでこれは便利ですね。

figma-skewdat3

画像も斜めに変形してみました。猫たちがパタパタしてて可愛いですね。

figma-skewdat4

では、Component や Auto layout に適用するとどうなるのでしょうか。

個人的に気になったので、以下の記事で作成したテーブル・コンポーネントに対して適用してみようと思います。

Figmaでシンプルなテーブル(表)を作る方法

今回は、Figmaでシンプルなテーブル(表)を作る方法を紹介します。ヘッダーと罫線だけのシンプルな表を、「Component」と「Auto Layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 ... 続きを読む

figma-how-to-create-table

結論としては、Component を変形しても、Instanceには反映されないようですね。

figma-skewdat5

Auto layout 化されたFrameを変形するとちゃんと反映されますが、Auto layout の中のコンテンツを変形させると、中身が崩れて不思議な形になりました。

figma-skewdat6

これはこれで面白いですね。


いかがだったでしょうか。

機能は至ってシンプルですが、様々な場面で応用が効く非常に強力なプラグインだと思います。バナー制作や画像素材を作成する際の表現の幅を簡単に広げることができるので、ぜひご活用いただければと思います。

この記事を読んだ方におすすめの記事

Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ... 続きを読む

figma-mobile-and-destop-mockup

Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう

今回は、商品紹介やイベントの告知など、顧客にリーチするためのコンテンツマーケティングで利用するベーシックなバナー画像(ヘッダー画像)を、Figmaを使って作ってみようという試みになります。 ... 続きを読む

figma-basic-banner-design

Figmaで角丸を使った便利なテクニック集

今回は、Figmaでシェイプやパスに角丸を適用するテクニックを紹介します。シェイプに角丸を適用することで、丸っこいUIやグラフィックを実現できるため、柔らかさ・滑らかさを演出することに役立ちます。 ... 続きを読む

figma-how-to-use-corner-radius

Figmaで様々なドロップシャドウ(影)を適用する方法

今回はFigmaで図形オブジェクトやパスに影(ドロップシャドウ、インナーシャドウ)をつける方法を紹介します。WebページのUIを作る上でマウスオーバー(hover)した時のボタンに影をつけたり、グラフィック上の効果をつけたいときによく使う方法になります。 ... 続きを読む

figma-how-to-use-dropshadow

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告