Figmaのスタイルは、文字・色・効果などの設定を名前付きで再利用する機能です。たとえば見出しのフォント、サイズ、行間をテキストスタイルにすると、複数の見出しを同じ設定で管理できます。スタイルの定義を編集すると、そのスタイルを適用したレイヤーにも変更が反映されます。
まず同じファイル内のローカルスタイルを作り、別ファイルでも使う場合にライブラリ公開を検討します。以下の手順は公式の作成・編集ガイドに基づきます。既存の画面例は2024年の参考画像で、現在のUIと配置・名称が異なります。
スタイルで管理する対象
| 種類 | 保存する設定の例 | 確認すること |
|---|---|---|
| テキスト | フォント、サイズ、行間、字間 | 文章の内容ではなく書式を共通化する |
| 色 | 塗り・線の色、グラデーション等 | 色を取得する操作とスタイル適用を区別する |
| エフェクト | 影、ぼかし等 | 複数の効果を組み合わせて管理する |
| レイアウトガイド | グリッド、列、行 | フレームで使う配置の基準。旧名称はLayout Grid |
Figma Motionのアニメーションスタイルは製品・用途が異なるため、このFigma Designの操作手順には含めません。単独の値やモードを管理したい場合は、Variablesとの違いも確認してください。
テキストスタイルを作る
- テキストレイヤーを選び、フォント・サイズ・行間等を設定します。
- 右側の文字設定から、スタイルを適用するメニューを開きます。
- 新規作成のメニューでスタイルを選び、名前と必要な説明を入力します。変数の作成と取り違えないようにします。
- 設定を確認して作成します。
- 別のテキストレイヤーに適用し、書式が揃うか確認します。
名前は Text/Heading/L、Text/Body/M など、用途を区別できるものにします。見出しと本文を同じスタイルにすると、後で片方だけを変更しにくくなります。
色スタイルを作る
対象の塗りや線を設定し、そのプロパティのスタイルメニューから新しい色スタイルを作ります。名前は Color/Brand/Primary、Color/Text/Default など、色の用途を区別します。
色選択パネルから色だけを選ぶ操作では、スタイルへの参照が付かない場合があります。共通設定として更新したい対象には、プロパティの「スタイルとバリアブルを適用」メニューからスタイルを適用してください。公式の適用ガイドも、色の取得とスタイルの適用を区別しています。
エフェクト・レイアウトガイドのスタイルを作る
エフェクトは対象に影やぼかしを設定してから、そのセクションのスタイルメニューで作成します。影を複数重ねている場合は、保存した設定と適用後の見た目を照合します。
レイアウトガイドはフレームを選び、列・行・グリッドを設定してから保存します。旧画像にある「レイアウトグリッド」は現在のLayout guidesに相当する名称です。オートレイアウトの余白や間隔を保存する機能とは異なります。
登録したスタイルを適用・編集する
スタイルを適用したいレイヤーを選び、対応するプロパティのスタイルメニューで検索して適用します。ライブラリの候補は、そのファイルで利用できるライブラリと権限によって変わります。
何も選択していない状態の右側には、ローカルスタイルの一覧があります。ここから定義を編集できます。別ファイルのライブラリで提供されるスタイルは、定義元のファイルで編集して再公開し、利用側で更新を確認します。対象のレイヤーだけを編集する操作とは区別してください。管理と共有の公式説明
フォルダーで整理する
名前に / を含めると階層として整理できます。Text/Heading/L と Text/Heading/M のように用途を揃えると、適用時に探しやすくなります。フォルダーへの移動はスタイル名にも影響するので、共有している命名ルールと照合してください。
解除・削除・移動の違い
| 操作 | 対象 | 影響 |
|---|---|---|
| スタイルを解除する | 選択したレイヤー | 現在の書式を残して、定義との参照を外す |
| スタイル定義を削除する | 元ファイルのスタイル | 参照しているレイヤーや共有先への影響を確認する |
| コピーする | スタイルの複製 | コピー先に新しい定義を作る |
| 公開スタイルを移動する | 定義の所在 | ライブラリの参照と再公開を伴う移動になる |
一部だけ文字サイズを変えたい場合は、スタイル解除と編集できない場合の確認を参照します。解除後は、元のスタイルを変えてもそのレイヤーの書式は追従しません。
公開済みスタイルの移動は、通常の複製と同じではありません。公式では、切り取りと貼り付けによる移動後に関係するライブラリの再公開が必要で、通常のUndoやバージョン復元では移動を取り消せないと案内しています。整理だけが目的なら、先に名前やフォルダーでの整理を検討します。
スタイルが出ない・更新されないとき
- 選択したレイヤーに、その種類のプロパティがあるか確認する。
- 色や書式を直接入力しただけで、スタイルが適用されていない状態を確認する。
- 解除済みのレイヤーと、まだ参照しているレイヤーを区別する。
- ライブラリ元の再公開と、利用ファイルでの更新確認を分ける。
- 文字を編集できない場合は、不足フォントと編集権限も確認する。
部品全体を共通化する場合はコンポーネントとアセット、数値・色・モードを管理する場合はVariablesへ進んでください。