Figmaでテキストを使った便利なテクニック集

今回はFigmaでテキストを扱い際に便利なテクニックやプラグインを紹介します。デザイナーだけでなく、エンジニアやUXライターやマーケターなど、Figmaでコラボレーションする際にテキストを編集する際にご活用ください。

紹介するテクニック一覧

• テキストを省略表示する

• テキスト内にアイコン（Font Awesome）を挿入する

• テキストを縦書きにする

• テキストを斜めに変形する

• フォントのプレビューを表示する

• テキストを検索・一括置換する

• テキストが編集できない場合の解決方法

テキストを省略表示する

「テキストの省略（Turncate text）」機能で、テキストを幅や任意の行数で省略表示（…）する方法です。

Figmaでテキストを行数で自動的に省略表示（…）する方法

今回は、Figmaのテキストを幅や任意の行数で省略表示（…）することができる「テキストの省略（Turncate text）」の使い方の紹介です。コレクションのリスト表示やカードビューなどで、規定のサイズに対してテキストの表示量を制御したい場合に便利です。 ... 続きを読む

テキスト内にアイコン（Font Awesome）を挿入する

テキスト・オブジェクト内で「Font Awesome 6 Free」のアイコンを挿入する方法です。

Figmaでテキスト内にアイコンを挿入する方法

今回は、Figmaのテキスト・オブジェクト内で「Font Awesome 6 Free」のアイコンを挿入する方法を紹介します。画面のリード文のテキストリンクなどにアイコンを添付したい場合などに利用でき、フォントと同じようにスタイルを適用できます。 ... 続きを読む

テキストを縦書きにする

Figmaで擬似的に日本語を縦書き表示に対応する方法です。一部の日本語フォントに対応しています。

Figmaでテキストを縦書きに対応する方法

今回はFigmaでテキストを縦書きに対応する方法を紹介します。和風のWebサイトや広告バナー・フライヤーなどをデザインする際に、縦書きのテキストを配置したりできるようになるので、制作の幅も広がると思います。 ... 続きを読む

テキストを斜めに変形する

テキストや図形オブジェクトを斜め方向に変形させることができるプラグイン「SkewDat」の紹介です。

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

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

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

フォントのプレビューを表示しながら選択できるプラグイン「Font Viewer」の紹介です。

Figmaでフォントのプレビューを表示する方法

今回はFigmaでテキスト入力するときに、フォントのプレビューを表示しながら選択できるプラグイン「Font Viewer」を紹介します。バナーやアイキャッチ用などのコピーを考えるときにどのフォントにするかをプレビューの一覧を見ながら確認できるのでおすすめです。 ... 続きを読む

テキストを検索・一括置換する

ファイル内のオブジェクト名やコンテンツ内のテキストを検索・置換する方法です。

Figmaでファイル内のテキストを検索・一括置換する方法

今回はFigmaのファイル内のオブジェクト名やコンテンツ内のテキストを検索・置換する方法を紹介します。ファイル内で特定の文言を一括で置き換えたい場合や、UIコンポーネントをテキスト検索で引き当てたいときに便利です。 ... 続きを読む

テキストが編集できない場合の解決方法

Figmaファイルを開いたらテキストが編集できない場合の解決方法などを紹介しています。

Figmaでテキストや図形を編集できない時に試すこと

Figmaで作成・共有されたファイルで、テキストや図形オブジェクトを選択できない、または編集できない場合に試すTipsの紹介です。 ... 続きを読む