Figma必須機能!コンポーネント・バリアントの使い方・解除方法を紹介

本記事は、webページやアプリケーションのUIデザインツール『Figma』の機能、コンポーネント(について紹介していきます。(Figmaの公式サイトはこちら)

Figmaでバリアントの使用方法

画像出典Figma

Figmaの基本的な使い方や始め方を紹介した記事はこちらになります。初めてFigmaを使うという方は、初めにこちらの記事を読んでいただくと良いかと思います!

それでは、早速コンポーネントについて紹介していきます!

1章 コンポーネントとは?

そもそもFigmaの機能、コンポーネントとは一体どの様な機能なのでしょうか。

Figmaでは、先ほど紹介したようにwebページやアプリケーションのUIデザインができます。これらのレイアウトでは、同じような形や機能の図形を何個も配置することが多くなると思います。そのような図形をコンポーネント機能では、一括管理することができるのです!

具体的には、メインのコンポーネントに変更を加えると、残りの図形に自動的に同じ変更が加わるといったものです。図形の色や大きさの変更が全て一括で行われます。

それぞれの要素をひとまとめに管理しておくことで、ページのレイアウトを効率よくシステマチックに進めることができます。

FIgmaでサイトのレイアウトを作った画像

画像出典Figma

実際にこの画像は前回Figmaを紹介した記事で作った、本サイトの簡単なレイアウトです。こちらの画像の中でも、ページ中央上部の「Home」「人気記事」「ツール名一覧」「AI Tech(アイテック)について」「お問い合わせ」といった同じレイアウトのボタンが5つあることがわかります。

コンポーネント機能では、これらを1つのコンポーネントから一気に作ることができるのです!

2章 コンポーネントの使い方

それでは早速、コンポーネント機能の使い方をご紹介していきます。

2-1コンポーネントの作り方

①図形の配置

初めに適当な図形をフレーム内に配置していきましょう!

Figmaで図形を配置した画像

画像出典Figma

②対象の図形をコンポーネントに設定

続いて作った図形をコンポーネントに設定しましょう。

Figmaのコンポーネントを設定するボタンを示した画像

画像出典Figma

対象の図形をクリックして、画面上部の赤枠内のボタンをクリックするとコンポーネントの設定ができます。図形を右クリックして「コンポーネントの作成」を選択しても同様にコンポーネントの設定ができます。Macの方は、「option,command,K(⌘K)」というショートカットキーも使えるのでお好きな方法で行ってください!

コンポーネントの作成に使ったこの図形を「メインコンポーネント」と言います。以後、本記事でもメインコンポーネントという名称で説明を進めていきます。

③インスタンスの作成

メインコンポーネントから作成する図形を「インスタンス」と言います。次にこのインスタンスを作成していきましょう!

Fimgaでインスタンスを作成している画像

画像出典FIgma

インスタンスの作成方法は主に2つあります。1つ目が、メインコンポーネントをクリックしてコピーアンドペーストするという方法です。

Figmaのアセットパネルを表示する画像

画像出典Figma

2つ目の方法を紹介します。画像の左上の赤枠内「アセット」をクリックすると、アセットパネルが表示されてこちらに「ローカルコンポーネント」という項目が現れます。こちらに先ほど作ったメインコンポーネントが現れるので、こちらをドラックアンドドロップすることでインスタンスを作成できます。

作成の方法については以上になります。

2-2コンポーネントの使い方

次に、このコンポーネントを使ってどのようにインスタンスに変更を加えることができるかを紹介します。

Figmaでメインコンポーネントと2つのインスタンスを用いた画像

画像出典Figma

このようにコンポーネント機能を使ってメインコンポーネント(1番上の長方形)と2つのインスタンスを用意しました。メインコンポーネントの色を変えてみましょう。

Figmaのコンポーネント機能で色を変更したGIF

出典Figma

この様に、メインコンポーネントの色を変更するとインスタンスの色も同時に変化することがわかります。同様に、メインコンポーネントの大きさを変更するとインスタンスの大きさも同時に変化していきます。

しかし、メインコンポーネントとインスタンスが同時に変更されないことがあります。それは、インスタンスに直接変更を加えた時です。インスタンスに直接変更を加えると、メインコンポーネントが変化してもインスタンスの変更が保持されるのです!

文字ではわかりにくいと思うので実際にやってみましょう。

Figmaのコンポーネント変更画面

画像出典Figma

メインコンポーネント(1番上の長方形)は、緑色の長方形に「AI Tech」と書かれています。左下のインスタンスはメインコンポーネントと同様、右下のインスタンスはテキストに「AI Tech AI」と変更を加えました。

Figmaのメインコンポーネントにテキストの変更を加えたGIF

出典FIgma

この様に、テキストの変更を加えていないインスタンスのみが変更されることがわかります。

しかし、変更を変えたインスタンスとメインコンポーネントの同期は完全に解除されたわけではありません。変更を加えていない要素についてはメインコンポーネントの変更に応じて変更していきます。

Figmaで変更を加えたインスタンスが変化するGIF

出典 Figma

色のみを変化させた左側のインスタンスと、テキストのみを変化させた右側のインスタンスを用意してメインコンポーネントの色を変化させます。すると、メインコンポーネントの色を変化させるとテキストのみを変更していた右側のインスタンスのみ色が変化する様子が見られます。

この様にインスタンスに直接変化を加えても変更した要素以外は、メインコンポーネントに同期して変化することがわかります。

この様にコンポーネント機能では、揃えたい要素と替えたい要素をそれぞれ独立して管理することができるのです!

2-3コンポーネントの解除方法

作業を進めていくうちに、インスタンスを独立した図形として扱いたくなることがあるかもしれません。その時は、コンポーネントの解除をすることができます。

Figmaのコンポーネント解除方法を示した画像

画像出典Figma

画像右の黄色枠の「」ボタンをクリックした後、赤枠の「インスタンスの切り離し」をクリックします。これだけで、解除完了です!

3章 バリアントの使い方

コンポーネントの中でも、「通常時」「ボタンをクリックした時」「ボタンにカーソルが合わせられている時」などの状態によってボタンのレイアウトを変更しなければならない場合が存在します。この時に役立つ機能がバリアントです。

3-1バリアントの使い方

FIgmaでサイトのレイアウトを作った画像

画像出典Figma

例えば、本サイトのレイアウトで画面上部の「Home」ボタンのレイアウトを考えてみます。実際にこのサイトでは、「Homeボタンが選択されいない場合」「Homeボタンが選択された状態の場合」「Homeボタンにカーソルが合っている場合」の3パターンが存在します。

①コンポーネントの作成

FigmaでHomeボタンをコンポーネント化した画像

画像出典FIgma

初めに、長方形に「Home」のテキストを追加したホームボタンを作成し、これを先ほどと同様にコンポーネント作成します。

②バリアントの作成

Figmaでバリアントの作成手順を表した画像

画像出典Figma

「Home」ボタンをクリックすると、画面上部赤枠のボタンが表示されます。これをクリックするとバリアントを作成することができます。

Figmaでバリアントの追加の方法を示した画像

画像出典Figma

この様に同じ「Home」ボタンが現れます。画面右側の赤枠の部分でバリアントの名前を変更することができます。

さらに、「バリアントを追加」をクリックすれば、もう1つ「Home」ボタンが追加されます。今回は3つの状態を表したいので、3個のバリアントを使います。

③バリアントの編集

Fimgaの最終的なボタンのレイアウト画像

画像出典Figma

この様に「Home」ボタンを選択された状態では文字の下が黒くなり、「Home」ボタンにカーソルが合わせられている状態ではボタンの色が薄くなるといった3状態を表現できました。

④バリアントの導入

実際に作ったバリアントを使ってみましょう。

Figmaでバリアントの使用方法

画像出典Figma

先ほど説明した、アセットパネルを開くと作ったバリアントが「ローカルコンポーネント」に表示されています。こちらをドラッグアンドドロップすることでバリアントを使用できます!

Figmaでバリアントを実際に使ったGIF

画像出典Figma

この様に画面右側でバリアントの状態を選ぶと、ボタンを変化させることができます!

3-2バリアントの解除

コンポーネント同様にバリアントでも解除をしたい場面があるかもしれません。バリアント解除の方法をご紹介します!

バリアントの解除方法は至ってシンプルです!解除したい図形をドラッグして、バリアントの枠の外に出すだけです。

Figmaでバリアントの解除方法を示したGIF

画像出典FIgma

この様に簡単にバリアントの解除ができました。解除した図形の名称は、バリアントで使っていた時と同じ名前になっているので、解除後は名前を変更するなど混同しない様に注意しましょう!

 

4章 まとめ

今回はFigmaの中でも、習得必須の機能「コンポーネント」と「バリアント」について使い方を紹介しました!

初めは難しく感じるかもしれませんが、慣れていくと作業を効率的に高クオリティで行うことができるでしょう。皆さんも是非、実際に使ってみてください!

本サイトでは、他にも様々なAIツールを紹介しています。本記事を読んで気になった方はそちらの方も是非チェックをお願いします!(リンクはこちらから)

「生成AIツールを導入して業務を効率化したいが、コストを抑える方法や適切なツールの選択がわからない」とお悩みの方は、お気軽に以下よりお問い合わせください。業務内容の分析から最適なツールの提案、導入のサポートまで、全面的にサポートいたします!

また、AIツールの掲載も無料で承っておりますので、お気軽にご連絡ください!

    関連記事

    webやアプリをデザインできるツールFigmaとは?使い方や料金を紹介!

    この記事は役に立ちましたか?

    もし参考になりましたら、下記のボタンで教えてください。

    関連記事

    コメント

    この記事へのコメントはありません。