figma logo

    Figma テキストのスタイルを詳細に調整する

    テキストのスタイルを詳細に調整する

    1. Figma
    2. 機能
    3. デザインパネル
    4. テキスト
    eyecatch image

    概要

    テキストに下線を引いたり、箇条書きにするなど、より詳細な設定をすることができます。

    adjust-text-type_image01.png

    詳細設定はテキストプロパティ右下の「・・・」で開くことができます。

    adjust-text-type_image02.png

    1. (テキストボックスの)サイズ変更
    2. 配置
    3. 装飾
    4. 段落間隔
    5. 段落インデント
    6. リストスタイル
    7. リスト間隔
    8. 大 / 小文字

    1. (テキストボックスの)サイズ変更

    ①幅の自動調整:文章の幅に応じて伸縮 ②高さの自動調整:文章の高さに応じて伸縮 ③固定サイズ:任意のサイズで固定 ④テキストを切り捨てる:テキストボックスからはみ出た文字を省略

    adjust-text-type_image03.png

    adjust-text-type_image04.png

    adjust-text-type_image05.png

    adjust-text-type_image06.png

    adjust-text-type_image07.png

    2. 配置

    ①左揃え ②中央揃え ③右揃え ④両端揃え

    adjust-text-type_image08.png

    adjust-text-type_image09.png

    adjust-text-type_image10.png

    adjust-text-type_image11.png

    adjust-text-type_image12.png

    3. 装飾

    ①なし ②下線 ③取り消し線

    adjust-text-type_image13.png

    adjust-text-type_image14.png

    adjust-text-type_image15.png

    adjust-text-type_image16.png

    「メインメニューから装飾をつける」 ●メインメニュー > テキスト > 下線 Mac:Command + U Win:Ctrl + U

    ●メインメニュー > テキスト > 取り消し線 Mac:Shift + Command + X Win:Ctrl + Shift + X

    4. 段落間隔

    新しい段落になった時の、前の段落との間隔を設定する。 Shift + Enterで改行すると段落はそのままに改行し、Enterで改行すると新しい段落になる。

    adjust-text-type_image17.png

    adjust-text-type_image18.png

    5. 段落インデント

    段落の文字のスタート位置を調整する。 入力した数値分、右にずれる。

    adjust-text-type_image19.png

    adjust-text-type_image20.png

    「メインメニューでインデントを調整する」 メインメニュー > テキスト > 調整 > ●インデントを増やす Mac:Command + ] Win:Ctrl + ]

    ●インデントを減らす Mac:Command + [ Win:Ctrl + [

    6. リストスタイル

    ①箇条書きリスト ②番号付きリスト

    adjust-text-type_image21.png

    adjust-text-type_image22.png

    adjust-text-type_image23.png

    「メインメニューから箇条書きにする」 ●メインメニュー > テキスト > 箇条書きリストリスト Mac:Shift + Command + 8 Win:Ctrl + Shift + 8

    ●メインメニュー > テキスト > 番号付きリスト Mac:Shift + Command + 7 Win:Ctrl + Shift + 7

    7. リスト間隔 ※箇条書き設定時にアクティブ

    リスト(箇条書き)の間隔を調整する。

    adjust-text-type_image24.png

    adjust-text-type_image25.png

    8. 大 / 小文字

    ①大文字にする ②小文字にする ③各単語の先頭文字を大文字にする ④スモールキャップス:小文字の大きさの大文字にする(フォントによって適用の可否が変わります)

    adjust-text-type_image26.png

    adjust-text-type_image27.png

    adjust-text-type_image28.png

    adjust-text-type_image29.png

    adjust-text-type_image30.png

    「メインメニューから大文字 / 小文字にする」 メインメニュー > テキスト > 大文字と小文字の設定 > ●元の大文字 / 小文字 大文字または小文字にする前の状態に戻します

    ●大文字 選択した文字を大文字にします

    ●小文字 選択した文字を小文字にします

    author icon

    Designpedia Team

    2024年1月11日(木) 公開

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。