WebDesigner's Memorandumウェブデザイナーの備忘録

Figmaのテキスト編集周りの基本操作|テキストの追加方法からグラデーション設定や縦書き、アウトライン化

Figmaのテキスト周りの操作

今回はFigmaのテキスト関連の操作についてまとめておきます。

テキスト追加の基本

まずはツールバーから選択するか、Tを押して、テキストツールに切り替えます。

あとはテキストを追加したい位置をクリックすると、黒い線が表示されるので、キーボードで文字を打ち込みます。
esccommand + enterで入力完了です。

Figmaのテキスト追加

テキストオブジェクトとなるので、入力後は移動ツールで移動させられます。

修正したい場合は、移動ツールの状態でテキストオブジェクトをダブルクリックするか、テキストツールでクリックすれば編集状態に切り替わります。

ポイントテキストとテキストボックス

テキストツールの状態でクリックすると「ポイントテキスト」と呼ばれる状態になりますが、ドラッグアンドドロップすると「テキストボックス」を作成できます。

ポイントテキストと違い、テキストボックスの場合は右端で自動的にテキストが折り返します。
複数行の文を流し込む場合はテキストボックスを使用しましょう。

Figmaのテキストボックス追加

ちなみに、ポイントテキストの横幅や高さを選択ツールで変更するとテキストボックスに変更されます。

テキスト選択時のプロパティエリア

テキストを選択しているときに、画面右のプロパティエリアの表示項目もテキスト用に切り替わります。

Text

[Text]プロパティでテキストの基本的な設定をします。

[Text]プロパティ

 内容備考
フォントフォント名を指定する 
太さフォントの太さを指定する 
フォントサイズフォントサイズの指定 
行間行間の指定 
文字間1文字1文字の間隔を指定 
段落の間隔改行だけの行の間隔を指定 
横幅や高さの設定

下記の中から横幅や高さの設定を指定する

  • Auto width:横幅が文字に合わせてなりゆきになる(ポイントテキスト)
  • Auto height:横幅固定になる(テキストボックス)
  • Fixed size:横幅固定になる(テキストボックス)
このボタンでポイントテキストとテキストボックスの切り替えも可能
文字揃え(横)

下記の中から文字揃えの設定を指定する

  • Text align left:左揃え
  • Text align center:中央揃え
  • Text align right:右揃え
 
文字揃え(縦)

下記の中から文字揃えの設定を指定する

  • Align top:上揃え
  • Align middle:中央揃え
  • Align bottom:下揃え
 

Fill

[Fill]プロパティではテキストの色を設定します。

[Fill]プロパティ

色をクリックすると、別パネルが開いて色の指定ができます。

カラー設定パネル

左上の「Solid」をクリックするとグラデーションや画像を塗りとして設定できたり、「バツボタン」の左隣にある「しずくアイコン」をクリックするとブレンドモードの変更ができます。

Stroke

[Stroke]プロパティではテキストのボーダー設定をします。

[Stroke]プロパティ

色の設定は[Fill]プロパティと同じですが、それに追加で「線の太さ」と「線の位置」を指定します。

線の位置に関しては下記の3つから選択します。

  • Outside:文字の外側に線がつく
  • Inside:文字の内側に線がつく
  • Center:文字の中央に線がつく

拡大すると、Insideではテキストの塗りがどんどん埋まっていってしまうことが分かります。

OutsideとInsideの違い

Effects

[Effects]プロパティではテキストの特殊効果を設定します。

[Effects]プロパティ

  
Inner shadowテキストの内側にシャドウをつける
Drop shadowテキストの外側にシャドウをつける
Layer blurテキストをぼかす
Background blur塗りや線に透明度が設定されてある場合、その後ろの要素がぼけて表示される

それぞれ左についてあるアイコンをクリックすると詳細な設定画面が表示されます。

Effects設定パネル

やりたいこと

グラデーション

[Fill]プロパティで色を選択するときに「Solid」となっている部分を「Linear」に変更します。

グラデーションの設定

あとは、開始色と終了色を選んで、テキストの上に表示されている線をドラッグしてどこからどこにグラデーションをかけるのか設定します。

開始地点と終了地点の設定

「Linear」は直線のグラデーションですが、他にも下記があります。

  • Radial:円形グラデーション
  • Angular:時計回りグラデーション
  • Diamond:ひし形グラデーション

カーニング調整

カーニング(文字詰め)調整を行いたい場合はテキスト編集の状態でoption + <もしくは>で文字間の調整ができます。

カーニング調整したい部分を選択した状態で、行いましょう。
ちなみに、テキストそのものを選択していると全体のカーニングが一気に変更されます。

縦書き

Figmaは縦書きに正式に対応しているわけではないので少々無理矢理になりますが、横幅とフォントサイズを同じにすることで、事実上縦書きになります。

縦書きの設定

ただこのままでは、「、」「。」「ー」などの記号が横書きの表示のままです。
そこで、[Text]プロパティの右下の「・・・」をクリックし、詳細パネルの中の「Letterforms」→「Vertical alternates」を選択します(フォントによってはこの設定がない場合もあります)。

「Letterforms」→「Vertical alternates」を選択

これで記号も縦書き用になりました。

複数行の場合はコピーして必要な行だけ作る必要が出てくるので、Figmaで縦書きは「一応可能だが、適さない」と覚えておきましょう。

テキストのアウトライン化

アウトライン化をしたい場合は、メニューの[Object]→[Outline stroke]を選択するか、ショートカットキーでshift + command + Oが設定されてあるのでそれでアウトライン化しましょう。

テキストのアウトライン化

アウトライン化すると、レイヤーパネルに表示されているアイコンも、テキスト用のアイコンからパス用のアイコンに変化します。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね