Figmaでコンポーネントを使うときに欠かせないのが「オーバーライド」です。
インスタンスに対して特定の要素だけを編集できる仕組みで、一部を変更しつつ元のコンポーネント構造は保つことが可能になります。
この記事では、Figma APIの情報も踏まえて「どのプロパティがオーバーライドできるのか」を体系的に整理します。
目次
オーバーライドの基本
Figmaにおけるオーバーライドとは「インスタンスごとに上書き可能なプロパティ」です。
たとえば、テキストの内容や色を変更しても、コンポーネント全体の構造やレイアウトは壊れないという特徴があります。
デザインシステムを効率よく運用する上で非常に重要な仕組みです。
オーバーライド可能な要素一覧
以下は、Figmaでオーバーライドできる主要なプロパティを分類した表です。
サイズ・形状関連
| プロパティ | 説明 | 対象 |
|---|---|---|
size.width / size.height | ノードの幅・高さ（レイアウトモード非考慮） | 全てのサイズを持つノード |
cornerRadius | 角丸半径（単一値の場合のみ） | FRAME, RECTANGLE, ELLIPSE など |
塗り（Fills）関連
| プロパティ | 説明 | 対象 |
|---|---|---|
fills | 塗りのペイント（色、グラデ、画像など） | GeometryMixin |
fillStyleId | 適用中の塗りスタイルID | 同上 |
線（Strokes）関連
| プロパティ | 説明 | 対象 |
|---|---|---|
strokes | 線のペイント設定 | GeometryMixin |
strokeWeight | 線幅 | 同上 |
strokeStyleId | 適用中の線スタイルID | 同上 |
効果（Effects）関連
| プロパティ | 説明 | 対象 |
|---|---|---|
effects | ドロップシャドウやブラー | GeometryMixin |
effectStyleId | 効果スタイルID | 同上 |
描画属性
| プロパティ | 説明 | 対象 |
|---|---|---|
opacity | 不透明度 | GeometryMixin |
blendMode | ブレンドモード | GeometryMixin |
テキスト関連
| プロパティ | 説明 | 対象 |
|---|---|---|
text.characters | 文字列内容 | TEXT |
text.fontName | フォントファミリー＋スタイル | TEXT |
text.fontSize | フォントサイズ | TEXT |
text.textCase | 大文字・小文字変換 | TEXT |
text.textDecoration | 下線・取り消し線 | TEXT |
text.letterSpacing | 字間設定 | TEXT |
text.lineHeight | 行間設定 | TEXT |
text.fills | 文字色 | TEXT |
text.textStyleId | テキストスタイルID | TEXT |
実務での活用例
- デザインシステム運用
例えば「ボタン」のコンポーネントでは、テキスト（ラベル）や色だけを変更して再利用可能です。 - ブランドカラー適用
テキストスタイルや塗りスタイルをオーバーライドしても、後からスタイルを一括更新可能。 - 効率的な修正
サイズや角丸をオーバーライドすることで、レイアウトを壊さずに微調整可能。
まとめ
Figmaのオーバーライドは「変更可能なプロパティが明確に決まっている」という仕組みに基づいています。
テキストやカラー、エフェクトなど柔軟に編集できる一方で、制御できない要素（例：オートレイアウトの構造自体）はオーバーライド対象外です。
デザインシステムを運用する際には、この一覧を意識して「どこまで自由度を持たせるか」を設計すると、効率的かつ崩れにくいコンポーネントを作ることができます。