Figma でテキストを編集する方法 — 編集・検索と置換・一括変更

「テキストを直したいのにどこをクリックすればいいか分からない」「同じ単語をまとめて置き換えたい」「文字が枠からはみ出して折り返されない」— Figma のテキスト編集でつまずく点は、たいてい操作の入り口が分かれば解決します。Figma のテキスト編集は、ほぼすべて標準機能で完結します。プラグインを入れなくても、編集・検索と置換・一括変更まで一通りこなせます。

本記事では、テキストの基本編集 → 見た目の変更 → 検索と置換 → 一括変更 → 折り返しの調整 までを、やりたいことの順に整理します。最後に、Adobe XD から移行したテキストで気をつける点もまとめました。

まず覚える 2 つの入り口

テキストを直すなら、レイヤーをダブルクリックして編集モードに入る。複数の同じ単語を一気に置き換えるなら、Cmd + F（Mac）/ Ctrl + F（Windows） で開く検索バーの Replace を使う。この 2 つを押さえれば、Figma のテキスト編集はほとんど迷いません。

この記事で得られること

  • テキストレイヤーを編集モードにして文字を直す基本操作
  • フォント・サイズ・色を変える場所と、関連記事への導線
  • Figma 標準の検索と置換（Find and replace）で単語をまとめて置き換える方法
  • 複数テキストの一括変更と、スタイル・フォント一括との使い分け
  • テキストの折り返し（はみ出し）をリサイズ設定で制御する方法

✏️ テキストを編集する基本

すでにキャンバスにあるテキストを直すには、そのテキストレイヤーをダブルクリックして編集モードに入ります。カーソルが入って文字を編集できる状態になります。

  1. 編集モードに入る。 テキストをダブルクリックする（選択中なら Enter でも入れます）。
  2. 文字を直す。 通常のテキスト入力と同じく、カーソル位置で編集・追加・削除ができます。一部だけ選択して直すことも、Cmd/Ctrl + A で全選択して編集することもできます。
  3. 確定する。 Esc を押すか、テキストの外側をクリックすると編集モードを抜けます。

新しくテキストを作るときは、ツールバーのテキストツール（T）を選んでキャンバスをクリック（1 行入力）またはドラッグ（幅を決めて入力）します。

クリック作成とドラッグ作成の違い

テキストツールでクリックして作ると「自動幅（Auto width）」になり、文字数に合わせて幅が伸びます。ドラッグして枠を作ると「固定サイズ（Fixed size）」になり、決めた枠の幅の中で折り返します。後から右パネルのリサイズ設定で切り替えられるので、最初の作り方にこだわる必要はありません（折り返しは後述）。

🎨 文字の見た目を変える（フォント・サイズ・色）

テキストレイヤーを選択すると、右パネルの Text セクションでフォント・ウェイト・サイズ・行間・字間などを変えられます。色は Fill（塗り）で調整します。

  • フォント・ウェイト・サイズ: Text セクションのフォント名・ウェイト・サイズ欄から変更します。
  • 行間・字間: 同じく Text セクションで行間（Line height）・字間（Letter spacing）を調整できます。
  • 色: Fill の色見本をクリックしてカラーを選びます。

フォントの追加や、フォントが一覧に出ないときの対処は別記事にまとめています。フォントまわりで詰まったら Figma にフォントをインストール・ダウンロードして使う方法 を参照してください。

🔍 テキストを検索・置換する（Find and replace）

同じ単語が複数のテキストに散らばっていて、まとめて直したい — そんなときは Figma 標準の検索と置換（Find and replace） を使います。プラグインは不要です。

  1. 検索バーを開く。 Cmd + F（Mac）/ Ctrl + F（Windows）を押します。左サイドバーから開くこともできます。
  2. 探す語を入力する。 マッチしたテキストレイヤーが候補として一覧表示されます。
  3. 置換語を入力して置き換える。 Replace で選択中のレイヤーだけを、Replace all でページ内のすべてのマッチを一括で置き換えます。

置換できるのはテキストレイヤーだけ

検索はテキスト・フレーム・シェイプなど幅広くヒットしますが、置換の対象になるのはテキストレイヤーのみです。検索と置換はすべてのプランで利用でき、文字列の閲覧は閲覧権限でも可能ですが、置換には編集権限が必要です。より細かい一括処理（プレビュー付き置換など）が必要な場合は Community のプラグインも選択肢になります。

📦 複数のテキストをまとめて変更する

「まとめて変更したい」には 2 つの意味があり、使う機能が分かれます。

  • 同じ単語をまとめて置き換える（内容の一括変更）: 前述の 検索と置換（Find and replace） が最短です。Replace all でページ内のマッチを一気に置換できます。
  • 複数テキストのフォント・サイズ・色などを一度に変える（見た目の一括変更）: 変えたいテキストレイヤーを複数選択し、右パネルでプロパティを変更すると、選択したすべてに同じ値が適用されます。

見た目の一括変更でも、「テキストスタイル」や「フォント」をまたいで体系的に変えたいなら、専用の手順がある別記事が効率的です。

↩️ テキストの折り返しを調整する

「文字が枠からはみ出す」「途中で折り返してほしいのに 1 行のまま伸びる」— これはテキストのリサイズ設定（折り返しの挙動）で決まります。

テキストレイヤーを選択し、右パネルのリサイズ設定から選びます。

  • 自動幅（Auto width）: 文字数に合わせて幅が伸び、折り返しません（改行は Enter を押したときだけ）。
  • 自動高さ（Auto height）: 幅は固定で、収まらない分は自動的に折り返して高さが伸びます。
  • 固定サイズ（Fixed size）: 幅も高さも固定。幅の中では折り返しますが、縦に収まらない分は下にはみ出します（周囲のレイヤーと重なることがあります）。

「折り返してほしい」なら 自動高さ にして幅を決めるのが基本です。逆に「1 行で伸ばしたい」なら自動幅にします。

折り返さないのは「自動幅」になっているから

どれだけ文字を足しても折り返さず横に伸びる場合、リサイズ設定が自動幅（Auto width）になっています。折り返したいときは自動高さ（Auto height）に切り替え、テキストの幅をドラッグで決めてください。幅が決まれば、その幅で自動的に折り返されます。

🚀 XD のテキストを崩さず Figma へ — Pixel Fine Converter

XD のテキスト内容・スタイルを Figma の構造に変換。Free 版でご自身のファイルの再現度を確かめてから判断できます。

🔄 XD から移行したテキストの注意点

Adobe XD から移行したファイルでは、テキストの内容そのものは保たれていても、フォントや行間・折り返しが見た目に影響することがあります。

  • フォントが環境にない: XD で使っていたフォントが Figma 側の環境に入っていないと、別のフォントに置き換わって字幅や折り返し位置がずれます。フォントを揃えるか、入れ直してください（フォントの導入 参照）。
  • 行間・テキストの縦位置: 日本語テキストは行間やベースラインの扱いで縦位置がずれて見えることがあります。XD → Figma の日本語テキストがどこまで正確に再現されるかは Adobe XD → Figma、日本語テキストはどこまで正確に変換できるか にまとめています。

なお移行手段を選ぶ際は、テキストの内容・スタイルをそのまま Figma の構造に変換できるものを選ぶと、移行後の再構築にかかる負担を減らせます。

💬 よくある質問

Q: Figma でテキストを編集するにはどうすればいいですか？

編集したいテキストレイヤーをダブルクリックすると編集モードに入り、文字を編集できます。選択中なら Enter でも入れます。Esc か外側のクリックで確定します。

Q: Figma に検索と置換（Find and replace）はありますか？

あります。標準機能です。Cmd + F（Mac）/ Ctrl + F（Windows）で検索バーを開き、置換語を入力して Replace（選択分）または Replace all（ページ全体）で置き換えます。置換の対象はテキストレイヤーのみです。

Q: 検索と置換は無料プランでも使えますか？

使えます。Find and replace はすべてのプランで利用でき、文字列の検索は閲覧権限でも可能です。ただし置換を実行するには編集権限が必要です。

Q: 複数のテキストのフォントやサイズを一度に変えたいです。

変えたいテキストレイヤーを複数選択し、右パネルでプロパティを変更すると、選択したすべてに同じ値が適用されます。スタイル単位・フォント単位で体系的に変えるなら、テキストスタイルの一括変更 や フォントの一括変更 の手順が効率的です。

Q: テキストが折り返されず横に伸びてしまいます。

リサイズ設定が「自動幅（Auto width）」になっています。右パネルのリサイズ設定で「自動高さ（Auto height）」に切り替え、幅をドラッグで決めると、その幅で自動的に折り返されます。

Q: XD から移行したテキストの見た目がずれました。

内容は保たれていても、フォントが環境にない場合は別フォントに置き換わって字幅や折り返しがずれます。フォントを入れ直すか揃えてください。日本語テキストの再現度については 日本語テキストの変換精度 を参照してください。

🎯 まとめ

Figma のテキスト編集は、標準機能だけで一通りこなせます。本記事の要点は次の 4 つです。

#やりたいこと使う機能
1文字を直すダブルクリックで編集モード
2同じ単語をまとめて置換検索と置換（Cmd/Ctrl + F → Replace all）
3見た目をまとめて変更複数選択 → 右パネル（スタイル/フォント一括は別記事）
4折り返しを直すリサイズ設定を自動高さに

文字を直すならダブルクリック、まとめて置き換えるなら検索と置換、見た目をそろえるなら複数選択か専用の一括変更。この対応さえ押さえれば、Figma のテキスト編集で迷いにくくなります。そしてファイルのベースが Adobe XD で作成されたものなら、テキストの内容・スタイルを保ったまま移行することが、修正を避けるいちばんの近道です。

🚀 Pixel Fine Converter を Figma Community からインストール

Figma Communityから1クリックで追加できます

関連ページ