figma コンポーネント使い方
2025 年 7 月 31 日 by marukorはじめに
Figmaでは同じUIパーツを何度も作る手間を減らすために、コンポーネントが活躍します。
一度作ったパーツを再利用でき、変更も一括反映できるため、作業効率が上がります。
また、デザインの一貫性を保ちやすく、チームでの共同作業にも便利になります。
コンポーネントとは？
コンポーネントとは、Figmaで再利用できるデザインパーツのことです。
ボタンやカードなどを部品化することで、使い回しや一括管理ができるようになります。
コンポーネントの作り方
ボタンコンポーネントを作成します。
1.フレームの選択
画像の赤枠のフレームを選択し、適当にボタンの形にします。
図形でボタンを作りたくなりますが、オートレイアウトという強力な整列機能が使えなくなるので図形ではなくフレームで作成するようにしましょう。
2.コンポーネントの作成
先ほど作成した、フレームを以下の方法でコンポーネント化します。
・右クリック → 「Create Component」
・ショートカット（Cmd/Ctrl + Alt + K）
画像のように紫色になればコンポーネント作成成功です。
コンポーネント使い方
1.インスタンスを作成する
左側のメニュータブ ＞ アセット ＞ 先ほど作成したコンポーネント（ここではbutton）＞ インスタンスの挿入
そうすると先ほど作成したボタンコンポーネントのインスタンスが作成されます。
紫色のひし形マークがインスタンスという意味になります。
これでボタンの部品化に成功したわけです。
こうすることで親コンポーネントを変更するだけで、複数のボタンをひとつずつ変更することなく共通部分はまとめて変更できてとっても便利なわけです。
例えばこのように、３つインスタンス化されたボタンを作成しました。
この場合親コンポーネントを赤色にすると、それに紐づくインスタンスも赤色に変わります。
バリアントの使い方
バリアントとはbuttonコンポーネントの中に、いくつかの種類を持たせたい場合に使用します。
1.バリアントの作成
先ほど作成したコンポーネントを選択 ＞ 赤枠の部分を選択
buttonコンポーネントの中に二つボタンが作成されます。
これがバリアントになります。
バリアントを作成するとプロパティから、バリアントを選択してどのボタンを使うか選択できるようになります。
実際に使うとこのようになります。
わかりやすいように「ボタン１」「ボタン２」としました。
先ほどと同じようにアセットからボタンコンポーネントを選択して、インスタンスを作成します。
下の画像の「ボタン１」がインスタンスになります。
これを「ボタン２」を使用したいときは、プロパティ ＞ ボタン２ を選択します。
「ボタン２」に切り替わりました。
このようにbuttonコンポーネントの中にも複数の種類を持たせたい場合にバリアントを作成します。
タグ: figma
