本記事は、webページやアプリケーションのUIデザインツール『Figma』の機能、コンポーネント(について紹介していきます。(Figmaの公式サイトはこちら)
画像出典Figma
Figmaの基本的な使い方や始め方を紹介した記事はこちらになります。初めてFigmaを使うという方は、初めにこちらの記事を読んでいただくと良いかと思います！
それでは、早速コンポーネントについて紹介していきます！
目次
１章 コンポーネントとは？
そもそもFigmaの機能、コンポーネントとは一体どの様な機能なのでしょうか。
Figmaでは、先ほど紹介したようにwebページやアプリケーションのUIデザインができます。これらのレイアウトでは、同じような形や機能の図形を何個も配置することが多くなると思います。そのような図形をコンポーネント機能では、一括管理することができるのです！
具体的には、メインのコンポーネントに変更を加えると、残りの図形に自動的に同じ変更が加わるといったものです。図形の色や大きさの変更が全て一括で行われます。
それぞれの要素をひとまとめに管理しておくことで、ページのレイアウトを効率よくシステマチックに進めることができます。
画像出典Figma
実際にこの画像は前回Figmaを紹介した記事で作った、本サイトの簡単なレイアウトです。こちらの画像の中でも、ページ中央上部の「Home」「人気記事」「ツール名一覧」「AI Tech(アイテック）について」「お問い合わせ」といった同じレイアウトのボタンが５つあることがわかります。
コンポーネント機能では、これらを１つのコンポーネントから一気に作ることができるのです！
２章 コンポーネントの使い方
それでは早速、コンポーネント機能の使い方をご紹介していきます。
2-１コンポーネントの作り方
①図形の配置
初めに適当な図形をフレーム内に配置していきましょう！
画像出典Figma
②対象の図形をコンポーネントに設定
続いて作った図形をコンポーネントに設定しましょう。
画像出典Figma
対象の図形をクリックして、画面上部の赤枠内のボタンをクリックするとコンポーネントの設定ができます。図形を右クリックして「コンポーネントの作成」を選択しても同様にコンポーネントの設定ができます。Macの方は、「option,command,K(⌥⌘K)」というショートカットキーも使えるのでお好きな方法で行ってください！
コンポーネントの作成に使ったこの図形を「メインコンポーネント」と言います。以後、本記事でもメインコンポーネントという名称で説明を進めていきます。
③インスタンスの作成
メインコンポーネントから作成する図形を「インスタンス」と言います。次にこのインスタンスを作成していきましょう！
画像出典FIgma
インスタンスの作成方法は主に２つあります。１つ目が、メインコンポーネントをクリックしてコピーアンドペーストするという方法です。
画像出典Figma
２つ目の方法を紹介します。画像の左上の赤枠内「アセット」をクリックすると、アセットパネルが表示されてこちらに「ローカルコンポーネント」という項目が現れます。こちらに先ほど作ったメインコンポーネントが現れるので、こちらをドラックアンドドロップすることでインスタンスを作成できます。
作成の方法については以上になります。
2-2コンポーネントの使い方
次に、このコンポーネントを使ってどのようにインスタンスに変更を加えることができるかを紹介します。
画像出典Figma
このようにコンポーネント機能を使ってメインコンポーネント(1番上の長方形）と２つのインスタンスを用意しました。メインコンポーネントの色を変えてみましょう。
出典Figma
この様に、メインコンポーネントの色を変更するとインスタンスの色も同時に変化することがわかります。同様に、メインコンポーネントの大きさを変更するとインスタンスの大きさも同時に変化していきます。
しかし、メインコンポーネントとインスタンスが同時に変更されないことがあります。それは、インスタンスに直接変更を加えた時です。インスタンスに直接変更を加えると、メインコンポーネントが変化してもインスタンスの変更が保持されるのです！
文字ではわかりにくいと思うので実際にやってみましょう。
画像出典Figma
メインコンポーネント（１番上の長方形）は、緑色の長方形に「AI Tech」と書かれています。左下のインスタンスはメインコンポーネントと同様、右下のインスタンスはテキストに「AI Tech AI」と変更を加えました。
出典FIgma
この様に、テキストの変更を加えていないインスタンスのみが変更されることがわかります。
しかし、変更を変えたインスタンスとメインコンポーネントの同期は完全に解除されたわけではありません。変更を加えていない要素についてはメインコンポーネントの変更に応じて変更していきます。
出典 Figma
色のみを変化させた左側のインスタンスと、テキストのみを変化させた右側のインスタンスを用意してメインコンポーネントの色を変化させます。すると、メインコンポーネントの色を変化させるとテキストのみを変更していた右側のインスタンスのみ色が変化する様子が見られます。
この様にインスタンスに直接変化を加えても変更した要素以外は、メインコンポーネントに同期して変化することがわかります。
この様にコンポーネント機能では、揃えたい要素と替えたい要素をそれぞれ独立して管理することができるのです！
2-3コンポーネントの解除方法
作業を進めていくうちに、インスタンスを独立した図形として扱いたくなることがあるかもしれません。その時は、コンポーネントの解除をすることができます。
画像出典Figma
画像右の黄色枠の「…」ボタンをクリックした後、赤枠の「インスタンスの切り離し」をクリックします。これだけで、解除完了です！
３章 バリアントの使い方
コンポーネントの中でも、「通常時」「ボタンをクリックした時」「ボタンにカーソルが合わせられている時」などの状態によってボタンのレイアウトを変更しなければならない場合が存在します。この時に役立つ機能がバリアントです。
３-１バリアントの使い方
画像出典Figma
例えば、本サイトのレイアウトで画面上部の「Home」ボタンのレイアウトを考えてみます。実際にこのサイトでは、「Homeボタンが選択されいない場合」「Homeボタンが選択された状態の場合」「Homeボタンにカーソルが合っている場合」の３パターンが存在します。
①コンポーネントの作成
画像出典FIgma
初めに、長方形に「Home」のテキストを追加したホームボタンを作成し、これを先ほどと同様にコンポーネント作成します。
②バリアントの作成
画像出典Figma
「Home」ボタンをクリックすると、画面上部赤枠のボタンが表示されます。これをクリックするとバリアントを作成することができます。
画像出典Figma
この様に同じ「Home」ボタンが現れます。画面右側の赤枠の部分でバリアントの名前を変更することができます。
さらに、「バリアントを追加」をクリックすれば、もう１つ「Home」ボタンが追加されます。今回は３つの状態を表したいので、３個のバリアントを使います。
③バリアントの編集
画像出典Figma
この様に「Home」ボタンを選択された状態では文字の下が黒くなり、「Home」ボタンにカーソルが合わせられている状態ではボタンの色が薄くなるといった３状態を表現できました。
④バリアントの導入
実際に作ったバリアントを使ってみましょう。
画像出典Figma
先ほど説明した、アセットパネルを開くと作ったバリアントが「ローカルコンポーネント」に表示されています。こちらをドラッグアンドドロップすることでバリアントを使用できます！
画像出典Figma
この様に画面右側でバリアントの状態を選ぶと、ボタンを変化させることができます！
3-2バリアントの解除
コンポーネント同様にバリアントでも解除をしたい場面があるかもしれません。バリアント解除の方法をご紹介します！
バリアントの解除方法は至ってシンプルです！解除したい図形をドラッグして、バリアントの枠の外に出すだけです。
画像出典FIgma
この様に簡単にバリアントの解除ができました。解除した図形の名称は、バリアントで使っていた時と同じ名前になっているので、解除後は名前を変更するなど混同しない様に注意しましょう！
４章 まとめ
今回はFigmaの中でも、習得必須の機能「コンポーネント」と「バリアント」について使い方を紹介しました！
初めは難しく感じるかもしれませんが、慣れていくと作業を効率的に高クオリティで行うことができるでしょう。皆さんも是非、実際に使ってみてください！
本サイトでは、他にも様々なAIツールを紹介しています。本記事を読んで気になった方はそちらの方も是非チェックをお願いします！（リンクはこちらから)
「生成AIツールを導入して業務を効率化したいが、コストを抑える方法や適切なツールの選択がわからない」とお悩みの方は、お気軽に以下よりお問い合わせください。業務内容の分析から最適なツールの提案、導入のサポートまで、全面的にサポートいたします！
また、AIツールの掲載も無料で承っておりますので、お気軽にご連絡ください！
関連記事
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント