【Figma】おすすめのプラグインのご紹介！テキスト・フォント編②

Figmaのプラグイン機能を使用することで、デザインのスピードが格段に早くなったり、普段考えつかないアイデアにひらめくことがあります。
今回は、フォントやテキストのデザインでお悩みの方におすすめしたいプラグインの中から、テキストの配置やデザインの際に役に立つプラグインをご紹介いたします！

ぜひ参考にしてみてくださいね！

テキストの配置・デザインにおすすめなプラグイン

テキストを簡単にさまざまな形状にデザインする「To Path」

Figmaに搭載されている基本的な機能で、テキストを波形に変更するためには、文字を1文字ずつ配置するしか方法がありません。

しかし「To Path」を使えば、IllustratorやCanvaで作るようなロゴデザインなども作ることが可能です！

まずは使用したい文字と、湾曲状のパスを用意します。
※使用できるパスは、曲線パス、もしくは楕円パスのみとなっており、直線上のパスは使用できませんのでご注意ください。

今回は鉛筆ツールで、手書きのパスを用意しました！

次にプラグインより「To Path」を開き、適応させたいテキストとパスを選択し
「Link」をクリックします。

実行すると、上記のように作成したパスに沿ってテキストが配置されました。

文字の後ろに配置しているパスの線は
線の表示を非表示にすることで表示されませんので
デザインに使用するときには表示を無しにした上で使用してください。

To Pathで設定できる数値は下記の通りです。
デザインに合わせて微調整をかけてみてください！

＝＝＝＝＝

Vertical Align：作成したパスとテキストとの距離（設定値：0~1まで）
Horizontal Align：入力したテキスト同士の距離（設定値：0~1まで）

Offset(px)：パスの始点を起点として、どの方向にテキストを配置するか　 　
　左揃え・中央揃え・右揃えから指定　 　
　数値は、始点から何px離れたところからテキストを配置するかを指定できる

characters follow curve rotation：パスの形に合わせて、テキストを傾けるかどうか
reverse direction of text：テキストを反映される方向を反転させる

＝＝＝＝＝

今回、変形させているパスは手書きで作成しましたが
別のプラグイン「Wave & Curve」と併用することで、よりデザインの幅が広がります！

実際に「To Path」と「Wave & Curve」を使用してみるとこんな感じ。

「Wave & Curve」で複雑なパスを作成してみました。
こちらにTo Pathを使用してみると、下記のようなテキストの配置も可能です。

Wave & Curveはより複雑なパスを瞬時に作成することができる、便利なプラグインです。

「To Path」と「Wave & Curve」はぜひ併用して使用してみてください！

「To Path」の使用はこちらから
「Wave & Curve」の使用はこちらから

テキストの形状を自由に歪ませる「Warp It」

Warp Itは、テキストを直感的に歪ませることができるプラグインです。

まずは変形させたいテキストを入力します。
入力したテキストを選択した上で、プラグインよりWarp Itを開くと
画像のように、ウィンドウ上に選択しているテキストが表示されます。

上下左右にあるバツマークを動かすことで、自由に変形することができます。
お好みの形になったら「APPRL RESULTS」をクリックすると実行されます。

一度実行すると、テキストからパスに変更されます。
テキストの変更ができなくなるので注意してください。

印象的なロゴデザインを作成するときに重宝するプラグインですので、ぜひ使用して見てください！

「Warp It」の使用はこちらから

テキストを円形に変形させる「circular text」

円上にテキストを配置したい時に便利なのがこちらのプラグインです。
ロゴやスタンプのようなデザインを作りたい時に使用できます。

まずプラグインより「circular text」を起動します。

次に、T部分に変形させたいテキストを入力します。

「Generate」をクリックすると、円形となったテキストが生成されます。

全て個別のレイヤーとして生成されるので、一文字ずつ調整することも可能です。

数値は、円の丸みの強さを設定できます。
360に近づくほど円に近くなり、1に近いほどなだらかになり、直線に近くなります。

テキストのフォントやサイズ、カラー、円全体の大きさはいつも通りの設定で変形することができます。

「Warp It」の使用はこちらから

複数行のテキストを簡単に分割できる「Nisa Text」

クライアントから納品されたテキストを一度にコピーすると、ペーストした際に分ける作業が発生し、意外と時間を取られてしまいますよね…。

このような複数行で構成されているテキストがあったとします。
レイヤーをみると一つのレイヤーでまとめられてしまっております。

サイトデザインなどを作成する時に、一つのレイヤーでまとまっていると
ブロックごとに自由な移動ができないので、分割する必要があります。

そんな時に便利なプラグインが「Nisa Text」です。

テキストを選択した上で、プラグインより「Nisa Text」を検索し「Split」を起動します。

すると上記のように、改行ごとにテキストボックスを切り分けてくれます。
これでテキストを自由に移動させることができます。

私もサイトLPなどを作成する際に、使用頻度がとても高いプラグインなので
皆さんもぜひ使用してみてください！

「Warp It」の使用はこちらから

まとめ

Figmaのプラグインは、デザインする際に作業時間を格段に縮めてくれたり
デザインの幅を広げてくれるとても便利なツールです！
また予備知識などほとんど必要なく、直感的に使用することができます。

今回はテキストの配置やデザインの際に役に立つプラグインをご紹介いたしました。
下記の記事では、フォント選定やテキスト入力の際にお悩みの方におすすめしたいプラグインを紹介しておりますので、ぜひ合わせてご参考にしてくださいね！

【Figma】おすすめのプラグインのご紹介！テキスト・フォント編①