見出し画像

Figmaのテキストまわりで知ってて当たり前そうなんだけど知らなかったこと

テキストボックスのサイズを変更するとボックスサイズが固定された場合の対処

当たり前なんですが、テキストボックスのサイズを変更すると、変更後のサイズで固定されます。その為テキストの量を変更すると、
テキストが、ボックスからはみ出てしまう場合があります。

画像3

テキストボックスのサイズを固定からAutoにするには、以下の設定に変更します。

画像3

テキストの上下にスペースができた場合の対処

和文の場合?テキストの上下に余分なスペースができます。

画像4

スペースを無くす場合は、Line heightをフォントサイズと同じにします。
ただ、Line heightをフォントサイズと同じにするとラインスペーシングが詰まり過ぎてしまいます。

画像5

そこで、Paragraph spacingで調整します。

画像6

フォントをプレビューする

Figmaのフォントリストは、フォントのスタイルが視覚的にわからないので「Font Preview」プラグインを利用するとわかりやすいです。

画像7

似たもので、Better Font Pickerというのもあるみたいです。

テキストをアウトランにする

illustratorなどでよくやるテキストのアウトライン化です。
ツールバーの「Object > Outline Stroke」、ショートカットは「コマンド + Shift + O(Macの場合)」です。

画像8

フォントを検索・置換する

Find and Replaceプラグインは
ファイルのテキストを検索したり、置換できたりする便利なプラグインです。

画像9

パスに沿ってテキストを並べる

illustratorなどでもある機能ですが、To Pathプラグインを利用すればFigmaでもできるようでした。

画像10

テキストだけではなく、オブジェクトも並べることができます。

まとめ

テキスト周りは、まだまだillustratorが扱いやすい印象でした。
ただFigmaもプラグインを利用することで色々便利に使えそうです。


この記事が気に入ったらサポートをしてみませんか?