Figmaのコンポーネント継承を使いこなす｜チーム設計を劇的に効率化する方法

こんにちは！
今日は「Figmaのコンポーネント継承を使いこなす」について解説します。

ほんま、これはチーム運用で差がつく話やんね。
僕も昔、コンポーネント継承を理解してなくて、プライマリボタンを修正したのに「あれ、サブボタンに反映されてない…」って困った経験があります。

コンポーネント継承とは何か

Figmaのコンポーネント継承は、親コンポーネント（メインコンポーネント）から子コンポーネント（コンポーネント）を派生させる機能です。
簡単に言うと、「このボタンは基本的にプライマリボタンと同じだけど、色だけ違う」みたいなシチュエーションで、ホンマに活躍します。

従来のやり方だと、プライマリボタンとセカンダリボタンを完全に独立した2つのコンポーネントとして作ってました。
でもこれやると、ボタンのサイズを修正するときに2つ修正しなきゃいけないんですよ。
めっちゃ手間やし、修正漏れのリスクもあります。

コンポーネント継承を使えば、プライマリボタンを修正したら、そこから派生してるセカンダリボタンも自動で反映されます。
これが「親コンポーネントの変更が子コンポーネントに伝播する」ってやつです。

プライマリ・セカンダリコンポーネントの設計パターン

実際の設計方法をお伝えしますね。

ステップ1：親コンポーネント（メインコンポーネント）を作る

まずは基本となるプライマリボタンを作ります。
色、サイズ、テキスト、すべての要素を決めたら、これを「メインコンポーネント」として設定します。
Figmaでは右クリック → 「メインコンポーネント」でマークできますよ。

ステップ2：子コンポーネント（バリアント）を作る

セカンダリボタンを作る際は、親となるプライマリボタンのコンポーネントを複製します。
その複製に対して「このコンポーネントは親のコンポーネント」という紐付けをするんです。
Figmaでは、コンポーネント名を「Button/Primary」「Button/Secondary」という階層構造にすると、自動で継承関係が認識されます。

実際には、Button/Primaryをコピーして、色だけ変更したらButton/Secondaryって命名するだけで、Figmaは親子関係を理解してくれるんですよ。

ステップ3：色や状態だけ上書きする

親コンポーネントから派生させたセカンダリボタンでは、異なる部分だけを修正します。
たとえばボタンの背景色を変更する場合、セカンダリボタン側で背景レイヤーの色を上書きするだけでOKです。
親コンポーネントのその他の要素（テキストサイズ、パディング、ボーダーラジウスなど）は自動で同期されます。

現場でよくあるミスと解決方法

ミス1：コンポーネント名を適当につけてしまう

僕も最初やってた失敗なんですが、Button「ボタン2」「ボタン3」みたいに命名するとめっちゃ後で大変です。
なぜなら、Figmaのコンポーネント名は「スラッシュ」で区切ると親子階層として認識されるからです。

正しくはButton/Primary「Button/Secondary」「Button/Disabled」みたいに、「親カテゴリ/子カテゴリ」の構造で命名するんですよ。
こうすることで、コンポーネントパネルで整理され、継承関係も明確になります。

ミス2：細かい修正をすべてのバリアントに加える

コンポーネント継承をちゃんと理解してないと、プライマリボタンの角の丸さ（ボーダーラジウス）を修正したときに、わざわざセカンダリボタンも修正しちゃうんです。
これはホンマに無駄やし、せっかくの継承機能を活かしてません。

親コンポーネントを修正すれば、すべての子コンポーネントに自動反映される。
この仕組みを信頼して、親側だけ修正するクセをつけるといいですよ。

ミス3：エンジニアへの説明を忘れる

これは現場あるあるなんですが、デザイナーだけがコンポーネント継承を理解してて、エンジニアには伝わってないことがあります。
結果、デザインファイルを見たエンジニアが「あれ、ボタンコンポーネントがいっぱいある…」って混乱しちゃうんです。

エンジニアに共有するときは、「このセカンダリボタンは、プライマリボタンから継承してて、色だけ違う」って説明するといいですよ。
そうすれば、CSSコードも親と子で共通部分を活かせるんで、開発効率も上がります。

解決策：親コンポーネントを「Main」フォルダに分ける

おすすめの運用方法は、親コンポーネント（メインコンポーネント）を別の専用フォルダに集約することです。
たとえば_Main/Button/Primaryって感じで「アンダースコア」をつけると、コンポーネントパネルの上部に表示されて、設計思想が一目瞭然になります。
チームメンバーも「ああ、このフォルダが親なんだ」ってすぐに理解できるんですよ。

また、セカンダリボタンを使う際はButton/Secondaryって名称で、プライマリから派生したものだってことが自動でわかります。

まとめ

Figmaのコンポーネント継承は、設計フェーズから理解しておくと、チーム全体の効率がめっちゃ上がります。
親コンポーネントを修正すれば、すべての子コンポーネントに自動反映される。
これが本当の「デザインシステム運用」なんだと、僕も現場で学びました。

重要なのは、正しいコンポーネント名を設計段階でつけることと、エンジニアを含めたチーム全体で「親子関係の仕組み」を理解することです。
最初は複雑に感じるかもしれませんが、一度仕組みを作れば、その後の修正がめっちゃ楽になりますよ。

ぜひ、次のプロジェクトから実践してみてください！