MENU
CLOSE
DESIGNWEB Edit : 2024.09.19 Update : 2024.09.24

【Figma】コンポーネント機能、現役UIデザイナーがどこよりも分かりやすく解説!

figmaのコンポーネントとは、Figmaファイル、ページ間で利用できるパーツのことを指します。

ボタンやヘッダーなど、よく使われるパーツをコンポーネントしておくことで、さまざまな場所で再利用できます。コンポーネントを活用できると、作業効率が上がります。

コンポーネントとインスタンス

コンポーネントには、親コンポーネントインスタンスの2種類があり、親子関係になっています。

Figmaのコンポーネントとインスタンス機能、現役UIデザイナーがどこよりも分かりやすく解説!

コンポーネントのつくり方


コンポーネントを作成するには、以下の方法があります。

ツールバーのアクションからコンポーネントを作成

ツールバーのアクションからコンポーネントを作成するには、◇が4つ重なったアイコンをクリックします。 Figmaのコンポーネントとインスタンス機能、現役UIデザイナーがどこよりも分かりやすく解説!
フレームワークからコンポーネントマークへ、左のレイヤーパネルの表示が変わったことでコンポーネントが作成できたことが確認できます。
Figmaのコンポーネントとインスタンス機能、現役UIデザイナーがどこよりも分かりやすく解説!
左サイドバーをアセットパネルに切り替えみましょう。

ローカルコンポーネント下に、今作成したコンポーネントが追加されています。
これでコンポーネントの作成は完了です。
Figmaのコンポーネントとインスタンス機能、現役UIデザイナーがどこよりも分かりやすく解説!

他のコンポーネントを作成するには以下の方法があります。

  1. 右クリックメニューから[ コンポーネントの作成 ]を選ぶ
  2. ショートカットキーを使う
(Windows :Ctrl + Alt + K / Mac :⌘ + Option + K)

インスタンスのつくり方

コンポーネントが変わるとインスタンスも変わります。反対にインスタンスを変更してもコンポーネントは変わりません。

アセットパネルからコンポーネントを選択し、[インスタンスを挿入]ボタンを押します。


アイテムの複製のようなものが、キャンバスに追加されました。

アイコンとして、◆が4つ集まっているものがメインコンポーネント、◇がインスタンスを示しています。
Figmaのコンポーネントとインスタンス機能、現役UIデザイナーがどこよりも分かりやすく解説!

インスタンスオプションについて

インスタンスの左側のオプションでインスタンスオプションという設定が用意されています。
Figmaのコンポーネントとインスタンス機能、現役UIデザイナーがどこよりも分かりやすく解説!
オプションで出来る事は以下になります。
インスタンスの切り離し インスタンスを普通の独立したレイヤー(フレームかグループ)に変換
変更をメインコンポーネントにプッシュ インスタンス側の変更をメインコンポーネントへ反映
すべての変更をリセット メインコンポーネントと全く同じ状態にリセット



続いては、コンポーネントのバリエーションを作ることができる「バリアント」について解説しています。

KOHIMOTO

Miki+Yuka / 東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナー🌐 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。