Studioのテンプレートを編集する際、文字色は変えられるものの、テキストの背景色が変更できずに困った経験はないでしょうか。
本記事では、Studioでテキストの背景色が変更できない場合の対処法を解説します。
テキストの背景色が変更できないときの対処手順
テキストの背景色は、StudioとFigmaで考え方が違います。
| 使っているもの | 背景色を持っているもの | 操作 |
|---|---|---|
| Studio | テキストを入れているボックス | 設定パネルを「ボックス」に切り替えて塗りを変える |
| Figma | テキストを包むフレーム | テキストを選んで Shift + A、フレームの塗りを指定する |
どちらも文字そのものではなく、その入れ物に色を付けるという点は同じです。
文字の色を変える欄を探しても、背景は出てきません。
Studioで背景色を変える
設定箇所の切り替えにより解決できます。
画面上部にある設定パネルのタブを「テキスト」から「ボックス」へと切り替えます。
ボックス設定内にある塗りに色が指定されているため、このカラー設定を変更します。
設定を変更すると、テキストの背景色を反映できます。
手順は以上です。
Studioでリッチテキストになっている場合
Figmaから取り込んだテキストで、設定の出方が違うことがあります。
STUDIO公式によると、テキストボックスの中に複数のスタイルが混ざっていると、リッチテキストボックスとして取り込まれます。
1つのテキストの中で、一部だけ太字や色違いにしている場合が当てはまります。
この場合も、色を変える場所は「ボックス」のタブ側です。
文字ごとの色を変えたい場合は、テキストの中でその部分を選んでから指定してください。
Figmaでテキストに背景色を付ける
Figmaのテキストレイヤーには、背景の塗りがありません。
塗りの欄は文字そのものの色なので、ここを変えても背景は付きません。
背景を付けたい場合は、テキストをフレームで包みます。
- 背景を付けたいテキストを選ぶ
- Shift + A を押す
- できたフレームを選び、右パネルの塗りに色を指定する
Auto Layoutはフレームにしか付かない仕組みです。
レイヤーを選んだ状態で押すと、Figmaがそのレイヤーを囲むフレームを作ります。
右クリックから「Add auto layout」を選んでも同じです。
フレームの幅をHug contentsにすると、文字数に合わせて背景の幅が変わります。FixedやFillでは幅の決まり方が異なるため、選択したフレームのサイズ設定も確認します。
余白は、フレームのパディングで調整してください。
※ Figmaの仕様はFigma公式ヘルプ「Toggle on auto layout in designs」、Studioの取り込みはSTUDIO公式ヘルプ「Figma to Studio」で2026年9月19日に確認しました。
非表示にした要素を再表示する手順は、以下の記事で解説しています。
Figmaなどのデザインツールの関連記事は、まとめから確認できます。
Figma Studioに関する記事は、ほかにもあります。
よくある質問：Studio・Figmaでテキストの背景色を変えるときのチェックリスト
Studioで、テキストの背景色を変えられないのは、なぜですか？
テキストの背景色は、文字そのものではなく、テキストを入れているボックスが持っています。文字の色を変える欄を探しても、背景は出てきません。設定パネルを「ボックス」に切り替えて、塗りを変えます。
Studioでの、背景色の変え方は？
画面上部の設定パネルのタブを「テキスト」から「ボックス」へ切り替えます。ボックス設定内にある塗りに色が指定されているため、このカラー設定を変更します。
Figmaから取り込んだテキストで、設定の出方が違うのは、なぜですか？
STUDIO公式によると、テキストボックスの中に複数のスタイルが混ざっていると、リッチテキストボックスとして取り込まれます。この場合も、色を変える場所は「ボックス」のタブ側です。文字ごとの色を変えたい場合は、テキストの中でその部分を選んでから指定します。
Figmaで、テキストに背景色を付けるには？
Figmaのテキストレイヤーには、背景の塗りがありません。背景を付けたいテキストを選び、Shift + Aを押してフレームで包み、できたフレームを選んで、右パネルの塗りに色を指定します。
Figmaの背景の幅を、文字数に合わせるには？
フレームの幅をHug contentsにすると、文字数に合わせて背景の幅が変わります。FixedやFillでは、幅の決まり方が異なるため、選択したフレームのサイズ設定も確認します。余白は、フレームのパディングで調整します。
この手順は、いつ確認した内容ですか？
記事では、Figmaの仕様は公式ヘルプ「Toggle on auto layout in designs」、Studioの取り込みは公式ヘルプ「Figma to Studio」で、2026年9月19日に確認したと説明しています。