figma-turncate-text
公開日: 2023.07.14  | 更新日: 2023.07.14

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

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

この記事のターゲット

  • Figmaで不定量のテキストを表示幅に応じて自動的に省略表示したい方

  • Figmaでテキストを折り返す際に、表示する行数を固定したい方


テキストの省略の使い方

テキストを省略表示したい場合は、テキストオブジェクトのオプションで「テキストの省略(Turncate text)」を有効にする必要があります。手順は次のとおりです。

  1. 省略表示したいテキストオブジェクトを選択

  2. 選択状態で右ペインの「テキスト」エリア内の「…(タイプの設定)」を選択

  3. 「タイプの設定」ポップアップウィンドウ内の「テキストの省略」を選択

以下のデモは、1行、2行、3行でそれぞれ指定している様子です。

turncate-text1

コンポーネントに設定しておけば、インスタンスのテキストが変わっても省略の設定が適用されます。

turncate-text3

また、テキストに対して自動的に省略するロジックは次の2パターンがあります。

  • テキストオブジェクトの幅に応じて成り行きで省略する

  • 表示したい行数を数値指定して省略する

具体的な設定方法をそれぞれ見てみましょう。

テキストオブジェクトの縦幅に応じて成り行きで省略する

行数を指定せずに、テキストオブジェクトの縦幅によって溢れたテキストを成り行きで省略するパターンです。

指定方法は、テキストオブジェクトの縦幅を「固定高さ(Fixed)」または「コンテナに合わせて拡大(Fill)」にします。

これによって、テキストオブジェクトの任意の高さ、またはカードビューなどのカード全体のサイズによって相対的に幅が極まる場合に、オブジェクトの領域内に収まる分量で自動的に省略されるようになります。

turncate-text5

表示したい行数を数値指定して省略する

テキストオブジェクトの幅ではなく、直接テキスト表示する行数を数値で指定して省略するパターンです。

指定方法は、テキストオブジェクトの縦幅を「コンテンツを内包(Hug)」にします。

この場合、「タイプの設定」のポップアップウインドウ内の「テキストの省略」に「最大行数」というオプションが設定できるようになります。

「最大行数」を数値(半角)で指定することで、その行数を超える場合に自動的に省略表示になります。

turncate-text4

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

Figmaのオートレイアウトで折り返しできる「Wrap」の使い方

今回はFigmaのオートレイアウト(Auto layout)の機能のひとつである折り返し(Wrap)の使い方を紹介します。これにより、アプリケーションなどの画面レイアウトで横幅が成り行きで決まる場合に自動で折り返しされるようになるため、レスポンシブ対応などで便利です。 ... 続きを読む

figma-auto-layout-wrap

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

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

figma-text-vertical-alternates

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

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

figma-how-to-insert-icons-into-text


最新の記事を見る
広告
この記事を書いた人
うえんつ

うえんつ

X a.k.a Twitter
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
広告