その使い方、本当に合ってる？ Figma「スタイル」と「コンポーネント」の基本
こんにちは！クリーヴァのユーリです。
突然ですが、実は3月からデザイナーとして働いています🧑🎨
まだ3ヶ月目のひよっこデザイナー🐣ですが、日々の学びや気づきを
またnoteで共有していきたいと思います◎
=====
今回は、Figmaの「スタイル」と「コンポーネント」について、
「なんとなく使っているけど、ちゃんと理解できてるか不安…」という方に向けて、つまずきやすい基本をあらためてまとめました📗
私もエンジニア時代、スタイルを毎回外して編集していたのですが、「これって本当に正しい使い方なのかな…？」とモヤモヤしていました。
学び直したことで、少しずつ仕組みが見えてきたように思います。
同じように感じたことのある方のヒントになればうれしいです。
では、早速本編にどうぞ〜↓↓
1. スタイルとは？
それではまず、「スタイル」って何？というところから見ていきましょう。
Figmaにおけるスタイルとは、色やフォント、影などの見た目の設定を名前をつけて保存・再利用できる機能です。
たとえば、以下のような設定をスタイルとしてまとめて管理できます。
■スタイルの種類
テキストスタイル：フォントサイズ、種類、太さ、行間など
カラースタイル：塗り（Fill）・線（Stroke）・背景色など
グリッドスタイル：レイアウトグリッドの設定（列幅やマージン）
エフェクトスタイル：ドロップシャドウやブラーなどの効果
■できること
一括で編集・管理ができる
デザインの一貫性を保てる
修正・更新作業が効率化される
チームや実装者との連携がしやすくなる
➡︎スタイルは「見た目の統一」を助けるだけでなく、
実装や保守の効率化にもつながる仕組みです。
共通のフォントや色をスタイル化しておけば、
後からの変更も一括反映でき、手間やミスを最小限に抑えられます。
2. コンポーネントとは？
続いて、「コンポーネント」についても見ていきましょう。
Figmaのコンポーネントとは、ボタンやカードなどのデザインパーツを「ひな型（元）」として登録し、繰り返し使えるようにする機能です。
■できること
UIパーツをまとめて管理・再利用できる
元を編集すれば、すべてのインスタンス（複製）に自動反映される
チームや実装者との連携がしやすい
一部だけ変更（オーバーライド）も可能なので、柔軟性を保ちつつ統一感を維持できる
➡︎「ボタン」「カード」「ナビゲーションバー」など…
コンポーネントを活用すれば、UIパーツを効率よく量産でき、
保守や修正の工数も削減できます。
特にチーム開発や運用時には、
デザインの一貫性を保ちながら柔軟に調整できるのが大きなメリットです。
■関連用語
コンポーネント：
UIパーツの元になる「ひな型」。編集の起点になる。
インスタンス：
コンポーネントの複製。元を編集すると変更内容が自動で反映される。
オーバーライド：
インスタンスの一部だけ（例：色や文字）を上書き変更すること。
デタッチ：
インスタンスとコンポーネントのリンクを解除し、自由に編集できる通常のオブジェクトに戻すこと。
バリアント：
ボタンなどの状態違い（通常／ホバーなど）をひとつにまとめて管理する機能。
3. 実例で見てみよう！
ここまで読んでいただいたところで、
実際にスタイルやコンポーネントを使った簡単な例を見てみましょう👇
3-1. スタイルの実例
下の画像では、"サンプルテキスト" にそれぞれ別のテキストスタイルを適用しています。
上が Card/Title、下が Heading/medium のスタイルです。
スタイルの設定によって、見た目がガラッと変わっているのがわかるかと思います👇
テキストスタイルを使えば、都度フォントやサイズを手動で設定しなくても、あらかじめ用意されたルールで一括反映できるため、
デザインの統一・作業効率の向上にとても役立ちます。
3-2. コンポーネントの実例
続いて、コンポーネントの使い方をご紹介します。
■インスタンス
まずは、コンポーネントとインスタンスの関係を見てみましょう。
左が「コンポーネント（親）」、右が「インスタンス（子）」です。
インスタンスは、親コンポーネントから複製された部品なので、
親を編集すれば、その内容がすべてのインスタンスに自動で反映されます。
■オーバーライド
続いて、オーバーライドの例です。
下の画像では、「親コンポーネント（左）」の背景色はブルーですが、
「インスタンス（右）」の方で、背景色だけをオレンジに上書きしています。
このように、オーバーライドを使えば、一部だけ見た目を変えることができます。
ただし、上書きした箇所には、親コンポーネントの変更は反映されません。
それ以外の部分は元のままなので、統一感と柔軟さの両立ができます。
■デタッチ
続いては、デタッチの例です。
画像の左側は親コンポーネントで、「Cancel」ボタンに変更を加えています。
しかし、右側のボタンは一度デタッチしているため、親の変更は反映されていません。
このように、デタッチされたパーツは元のコンポーネントとのリンクが切れているため、完全に別のオブジェクトとして扱われます。
■バリアント
続いては、バリアントの例です。
画像では、左が default（通常時）、右が hover（ホバー時）として設定されています。状態（プロパティ）を切り替えることで、見た目のバリエーションを簡単に管理できます。
バリアントを使えば、パーツの状態違いをひとつのまとまりとして扱えるため、デザインの整理や修正がとてもラクになります。
4. スタイルとコンポーネントの違い
ここまで、スタイルとコンポーネントの基本と実例を紹介してきました。
あらためて、それぞれの違いをまとめてみましょう。
▶スタイル
色やフォントなど“見た目のルール”を保存・再利用。
👉イメージ： 共通で使いまわせる「デザインのルール集」
▶コンポーネント
UIパーツ全体を構造ごと再利用。
👉イメージ：「再利用可能なデザインの部品」
➡︎どちらも共通ルールの徹底や効率化のために欠かせない機能です。
5. なぜ必要？
スタイルやコンポーネントを使わないと、どんな問題が起きるのでしょうか？
✋ よくある“困りごと”の例
色が統一されておらず、毎回違うカラーが使われてしまう
パーツの見た目が微妙に違い、実装者が混乱する
修正箇所が多すぎて、更新ミスが頻発する
➡︎"スタイル"と"コンポーネント"を正しく使えば、デザインの一貫性だけでなく、チーム全体の保守・運用コストも大きく削減できます。
6. 制作フローでの活用イメージ
とはいえ、「どう使えばいいの？」というのが気になりますよね。
次は、実務での活用イメージを制作フローに沿ってご紹介します。
💡 制作フローの一例
1. デザイン：
Figma上でスタイルやコンポーネントを活用し、統一感のあるUIを設計する。
↓
2. 共有・フィードバック：
チーム内でデザインルールを共有し、意図や使い方をすり合わせる。
↓
3. 実装：
Figmaのコンポーネントをもとに、開発側で再利用性の高いパーツとして実装する。
↓
4. 運用・更新：
スタイルやコンポーネントを使っていることで、後からのUI変更や保守もスムーズに対応が可能！
あくまで一例ですが、
私も今後プロジェクトに参加する際には、こうした流れを意識しながら取り組んでいきたいと思います。
まとめ・感想
ーいかがでしたか？
今回は、
『 その使い方、本当に合ってる？ Figma「スタイル」と「コンポーネント」の基本』をテーマにお届けしました。
デザイナーに限らず、Figmaを使う全ての方にとって、何かひとつでも参考になる部分があれば嬉しいです。
最後までお読みいただき、ありがとうございます！
クリーヴァ株式会社では様々な企業様のDX開発・新規開発を支援しております！
お気軽なご相談から承っておりますので、DXでお悩みの方は以下よりご相談ください！
https://creava.co.jp/contact/
