Figmaでテキストを編集する方法

Figmaを使い始めたばかりの頃は、フォント・サイズの変更、誤字脱字の修正、テキストの移動など、一見簡単そうに見える作業も、理解するのが少し難しいかもしれません。 この wikiHow の記事では、Figma でテキストを追加、選択、修正する方法と、プロジェクト全体に適用できるテキスト・スタイルの作成と編集方法を紹介します。

方法1

フォントサイズ、色、配置を変更する

1. テキストツールをクリックします。これは、Figma の上部にある T アイコンです。テキストを変更するときは、まずこのツールを選択します。

   • テキスト・ツールを開くには、キーボードの T キーを押すのが手っ取り早い方法です。
   • Figmaのすべてのテキストは、他のオブジェクトと同様に、レイヤー上に作成されます。Figmaの左側にあるレイヤー・パネルには、すべてのテキスト・レイヤーが、"T "アイコンで表示されています。
2. 編集したいテキストにマウスカーソルを合わせます。テキストが編集可能であれば、その周りに青い点線が表示されます-これがテキストボックスです。テキストにマウスカーソルを合わせると、ポインタが縦カーソルに変わります。
3. 編集したいテキストを選択します。カーソルをテキスト上でクリック＆ドラッグして、テキストを青くハイライトします。テキストが選択されると、そのプロパティが右側のテキストプロパティパネルに表示されます。

   • テキストの見た目を変えるのではなく、何かを追加、削除、修正したい場合は、代わりにカーソルをクリックして目的の位置に置きます。これで必要に応じて修正できます。
   • 左側のレイヤーパネルでテキストレイヤーをクリックして、テキストを選択することもできます。さらに、複数のテキストレイヤーの見た目を一度に変更したい場合は、Shiftキーを押しながら複数のテキストレイヤーを選択することもできます。
4. このテキストにテキストスタイルが適用されているかどうかを確認します。テキストが選択されている時に右サイドバーに「テキスト」というパネルが表示されていれば、選択範囲にテキストスタイルは適用されていません。しかし、「テキスト」パネルが表示されず、「Ag」というパネルが表示される場合は、そのテキストにテキストスタイルが適用されており、変更を加えることができないことを意味します。詳しくはテキストスタイルをご覧ください。
5. テキストの外観を変更する。テキストまたはテキストレイヤーが選択されている間、サイズ、配置、フォントフェイス、およびテキストパネルで選択したその他のオプションがテキストに適用されます。

   • テキストパネルの右下にある3つの水平ドットをクリックし、タイプ詳細ウィンドウを開きます。ここに、アライメント、装飾、スペーシングのオプションがあります。
   • ストロークパネルを使用して、テキストにアウトライン（または内線）を追加し、そのサイズと色を調整します。
   • エフェクトパネルでは、ドロップシャドウ、インナーシャドウ、ぼかしなどのテキストエフェクトを追加できます。
   • テキストパネルがグレーアウトし、フォント名の横に "A? "と書かれた黄色いアイコンが表示されている場合、そのフォントはコンピュータにインストールされていません。 代替フォントを選択しない限り、テキストを編集することはできません。代替フォントを選択するには、「A?」をクリックして「不足しているフォント」画面を開き、インストール済みのフォントを選択します。
6. テキストの色を変更します。テキストの色は、実際にはテキストパネルではなく、右サイドバーの塗りつぶしパネルでコントロールします。塗りつぶしパネルで希望の色をクリックすると、選択したテキストの色が変更されます。
7. テキストの移動Figmaでテキストを移動すると、テキストレイヤー上のすべてのテキストが移動します。テキストを移動する方法は以下の通りです：

   • キーボードの M キーを押して、移動ツールを選択します。
   • レイヤーパネルで、移動したいテキストレイヤーをクリックします。これでテキストがバウンディングボックスで囲まれます。
   • テキストをクリックし、希望の位置までドラッグします。
8. 拡大縮小ツールでテキストのサイズを変更します。Figmaでは、テキストパネルを使ってテキストのサイズを変更することだけを推奨していますが、拡大縮小ツールを使ってテキストのサイズを変更することもできます。違いは、テキストのサイズが、プレゼンテーション内の他のテキストと異なるサイズに変更される可能性があることです。それでも、これは特定の領域に収まるようにサイズを変更する必要があるテキストを扱う場合に便利です。テキストを拡大縮小する方法は次のとおりです：

   • キーボードのKキーを押し、スケールツールを開く。
   • 左側のレイヤーパネルでテキストレイヤーをクリックします。
   • テキストの角のバウンディングボックスのいずれかを外側にドラッグして拡大し、内側にドラッグして縮小します。

方法2

テキストの追加

1. テキストツールをクリックします。これは、Figma の上部にある T アイコンです。これで、テキストツールが起動します。キーボードの T キーを押しても、このツールを開くことができます。
2. 新しいテキストレイヤーの作成方法を選択します。Figmaにテキストを追加すると、そのテキストを含む新しいレイヤーが追加されます。テキストレイヤーを作成するには、2つの方法があります：

   • 一つは、テキストを追加したい場所をクリックする方法です。これは、テキストを入力すると、テキストボックスの幅が広がることを意味します。
   • もうひとつは、マウスをクリックしてドラッグし、必要な寸法のテキストボックスを描く方法です。これは、入力を開始する前にテキストレイヤーのサイズを定義するだけでなく、テキストのサイズ変更を固定幅に設定し、より多くのテキストを入力できるようにします。また、テキストが次の行にはみ出すように自動的に折り返されます。
3. 入力を開始します。入力したい場所でマウスをクリックしても、テキストボックスを描いても、カーソルが表示され、入力を開始できます。デフォルトでは一般的な黒っぽいフォントが設定されていますが、.NETや.NETで変更することができます。

   • テキストレイヤーは、レイヤーパネルに "T "マーク付きで表示されます。

方法3

テキストスタイルの作成と適用

1. 使用したいプロパティを持つテキストを選択します。テキストスタイルを使用すると、チームのどのプロジェクトでも使用できるテキストのプロパティを定義できます。テキストの領域を自分好みにカスタマイズしたら、レイヤーパネルでテキストレイヤの名前をクリックし、そこからスタイルを作成できるようにします。

   • 例えば、ウェブサイトをデザインしていて、すべてのセクションのヘッダーを36ptで右揃えにしたい場合、そのプロパティでヘッダースタイルを作成し、ウェブサイトのすべてのヘッダーに適用できます。
   • テキストスタイルの書体、配置、間隔などのプロパティを後で変更すると、その変更はそのスタイルを適用したすべてのテキストに適用されます。これは、複数のテキストレイヤーを個別に編集する手間をかけずに、デザイン全体のテキストをすばやく変更する素晴らしい方法です。
   • テキストスタイルには色は含まれません。塗り] パネルを使用するか、後で説明する [カラー スタイル] を作成して色を追加できます。
2. テキストパネルのスタイルアイコンをクリックします。テキスト・パネルは、Figma の右側にあるプロパティ・バーの中にあり、スタイル・アイコンは、パネルの右上にある4つの点です。これで、テキスト・スタイル・ウィンドウが開きます。
3. テキスト・スタイル・ウィンドウの + をクリックします。これは右上にあります。新しいテキストスタイルの作成」ウィンドウが開きます。
4. 名前を入力し、スタイルの作成をクリックします。選択したテキストのプロパティを使用して新しいスタイルが作成されます。

   • スタイルには、スタイルを適用するコンテンツを反映した名前（「本文」や「リンク」など）、またはスタイル自体を説明する名前（「赤いヘッダー」など）を付けます。
5. テキストスタイルを他のテキストに割り当てるテキストスタイルを作成したら、プロジェクト内のテキストレイヤーに適用できます。その方法は以下の通りです：

   • レイヤーパネルでスタイルを適用したいレイヤーを選択します。複数のレイヤーを選択するには、Shiftキーを押しながら各レイヤーの名前をクリックします。
   • 右サイドバーのテキストパネルの右上にある4つの点をクリックします。
   • テキストスタイルの名前をクリックして適用します。
   • スタイルが適用されたテキストを修正しようとすると、右側にテキストパネルが表示されず、「Ag」とスタイル名が表示されます。
6. テキストからテキストスタイルを削除するテキストに適用されたスタイルがあり、それを個別に編集したい場合、またはテキストに別のスタイルを割り当てたい場合、テキストからテキストスタイルのリンクを簡単に解除できます。方法は以下の通りです：

   • レイヤーパネルでスタイルを解除したいテキストレイヤーを選択するか、Tキーを押してテキストツールを開き、テキストをハイライトします。
   • 右サイドバーの「Ag」パネルにあるテキストスタイルの名前にマウスカーソルを合わせます。小さなリンクアイコンが表示されます。
   • リンクアイコンをクリックして、テキストからスタイルのリンクを解除します。テキストパネルが右サイドバーに再び表示され、テキストを個別に編集できるようになります。
7. テキストスタイルのプロパティを変更するプロジェクト内のテキストに適用されているテキストスタイル（サイズや色など）を変更すると、その変更はそのスタイルを持つすべてのテキストに影響します。変更の方法は次のとおりです：

   • Tキーを押してテキストツールをアクティブにしますが、テキストは選択しないでください。
   • テキストパネルの右上にある4つの点をクリックし、テキストスタイルウィンドウを開きます。
   • マウスカーソルをスタイル名に合わせます。
   • ローカルスタイル（このプロジェクトで作成したスタイル）を編集している場合は、スタイルを編集するためのすべてのオプションが表示されます。また、3 つの点をクリックすると、さらにオプションが展開されます。
   • スタイルがチーム ライブラリにある場合は、そのようにマークされ、編集方法が少し異なります。スタイル定義に移動]をクリックしてチーム ライブラリ内のすべてのスタイルを表示し、マウス カーソルをスタイル名の上に置いて、2 つのスライダをクリックして編集します。
8. カラー スタイルを作成します。テキストスタイルには色が含まれていないため、カラースタイルを作成して、テキストスタイルに対応するスタイルを簡単に適用できるようにするとよいでしょう。手順はテキストスタイルの作成とよく似ています：

   • テキストを選択し、塗りつぶしパネルから色を選択します。
   • 塗りつぶしパネルのスタイルアイコン（4つの点）をクリックします。
   • をクリックして新しいスタイルを作成します。
   • スタイルに色などの名前を入力し、[スタイルを作成] をクリックします。
   • これで、テキスト・レイヤーを含む Figma のどのレイヤーにも、そのカラー・スタイルを適用できます。
9. チーム ライブラリにテキスト スタイルとカラー スタイルを共有します。チームの一員で、全員が同じドキュメントで作業している場合、スタイルを公開して、チームで利用できるようにすることができます。その方法は次のとおりです：

   • 左サイドバーの[アセット]タブをクリックします。
   • 上部にあるライブラリアイコン（開いた本）をクリックします。
   • 公開]をクリックします。
   • バージョン履歴に、「ヘッダー・スタイルの追加」など、変更の説明を入力します。
   • スタイルとコンポーネント」の横にある下向き矢印をクリックし、公開するスタイルを表示して選択します。
   • 公開をクリックします。
   • Figma でプロジェクトに携わっている人は誰でも、更新を受け取るように促されます。

この記事は、CC BY-NC-SAの下で公開された " How to Edit Text in Figma "を修正して作成されました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。