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