figma-how-to-use-component
公開日: 2021.12.17  | 更新日: 2022.06.03

FigmaのComponent(コンポーネント)機能の使い方

今回は、Figmaの最も基本的な機能の一つである「Component」の使い方を解説します。Componentの使い方を知っているのといないのとでは、デザイン作業の効率が数十〜数百倍変わってくるほど非常に重要な機能です。

2022年5月のアップデートで「Component Properties」という新機能が追加されました。基本的な使い方と従来の「Variants」との使い分けについて以下の記事で考察していますので、併せて参考にしてみてください。

FigmaのComponent propertiesとVariantsの使い分けの考察

今回は2022年5月11日に公開されたFigmaの新機能「Component properties」の使い方を検証しつつ、類似する既存機能「Variants」との使い分けについて考察してみます。自由研究形式で追記しながら記事を更新しています。 ... 続きを読む

figma-component-properties-vs-variants

この記事のターゲット

  • Figmaの初心者

  • FigmaのComponent機能について知りたい方

  • Figmaでデザイン作業を効率化したい方


Componentとはどんな機能なのか?

ざっくりいうと、デザインの一貫性を担保できる機能です。

具体的には、Component化したあるオブジェクトに対する変更を、そのオブジェクトの複製(Instance)に一括適用できる機能で、デザインツール「Sketch」でいうところの「Symbol」機能と同じ役割です。

例えば、インターフェース上で再利用しているボタンのラベルを「保存」から「保存する」に変更するとき、元のComponent化されたボタンのラベルを変更すると複製されたボタンのラベルも全て「保存する」に連動して置き換わります。

フォントだけでなく、色、枠線、位置、エフェクト(シャドウやぼかし)などオブジェクトのスタイルを一括で適用することができます。

Componentの使い方

オブジェクトをComponent化する方法はとてもシンプルです。

  1. Component化したいオブジェクトを用意する

  2. オブジェクトを選択し、ツールバーの4つの菱形のアイコンを押す

    • または右クリックメニューの「Create component」を押す

component1

これでComponentが作成できました。

Component化すると、Componentから複製したオブジェクトは全て「Instance」という種類のオブジェクトになります。複製は「optionキー」を押しながらドラッグすると、複製を簡単に作成できます。

component2

Instanceは、元のスタイルから上書き変更することができます。

component3

上書き変更した部分を元のComponentのスタイルに戻すこともできます。

component7

ボタンのラベルなど状況によって要素を変化させたい場合に便利です。

Componentの応用

Instance自身をComponentにすることもできます。このとき、レイヤー的にはInstanceをComponentで包む入れ子(ネスト)のような構造になります。

用途としては、基本となるスタイル(形やサイズ)を継承していくつかのパターンやバリエーションを作りたいとき、基本となるスタイルのComponentを変更することで、そのInstanceを利用している別のComponentにも一括適用できるようになります。

具体的な例としては、ボタンを「作成」「編集」「削除」の3パターンでComponent化したときに、ボタンのサイズを変更しようとすると3つのComponentすべてを変更する必要がありますが、ボタンの基本となるComponentのInstanceのスタイルを上書きする形で3パターンをComponent化しておくことで、元のComponentだけ変更すれば良くなります。

実際にやってみた例が以下になります。まず、Instanceで作成したいパターンを用意します。

component4

スタイルを整も整えていきましょう。

component5

最後に、Instanceをすべて選んだ状態でツールバーの4つの菱形を押して「Create multiple component」を押すと、それぞれ独立したComponentとして作成されます。

component6

元のコンポーネントの状態から変更していない要素(角丸やフォントサイズなど)を変更すると、新たに作成したComponentにもInstanceを通じて変更が適用されることがわかります。

Componentを利用して一貫性のあるUIを設計する

以下の各記事で、Componentを使用してUIコンポーネントを設計する方法の解説と、実際にFigmaで触れるサンプルファイルを用意していますので、ぜひ参考にしてみてください。

記事によっては、Componentをさらに応用した「Variants」という機能を利用しています。Variantsについては、各記事の中で使用方法を説明していますので、あわせて参考にしてみてください。

Figmaでシンプルなテーブル(表)を作る方法

今回は、Figmaでシンプルなテーブル(表)を作る方法を紹介します。ヘッダーと罫線だけのシンプルな表を、「Component」と「Auto Layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 ... 続きを読む

figma-how-to-create-table

Figmaでシンプルなボタン・コンポーネントを作る方法

今回は、Figmaでシンプルなボタン・コンポーネントを作る方法を紹介します。テキストのシンプルなボタンを、「Component」と「Variants」と「Auto layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、ご活用ください。 ... 続きを読む

figma-how-to-create-button

Figmaでシンプルなヘッダー・コンポーネントを作る方法

今回は、Figmaでシンプルなヘッダー・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるシンプルなヘッダーを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-header

Figmaでシンプルなタブ・コンポーネントを作る方法

今回は、Figmaでシンプルなタブ・コンポーネントを作る方法を紹介します。テキスト長に合わせて伸縮するタブを、「Component」と「Variants」と「Auto layout」を使って作成します。また、自由に使えるサンプルファイルも用意していますので、ご活用ください。 ... 続きを読む

figma-how-to-create-tab

Figmaでシンプルなフォーム・コンポーネントを作る方法

今回は、Figmaでテキスト入力のシンプルなフォーム・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるフォームを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-form


いかがだったでしょうか。

ComponentはFigmaの中でも最も基本的な機能の一つですが、概念を理解していないと最初は非常に難しく感じてしまう機能の一つだと思います。

画面のような複数の要素をいきなり作ろうとせずに、まずは一つの部品を作ってみて、徐々に使いながら慣れていくことをおすすめします。

この記事を読んだ方におすすめの記事

Figmaで簡単に円グラフや棒グラフを作る方法

今回はFigmaで細身の円グラフ・棒グラフを簡単に作成する方法を紹介します。慣れれば1分で作成でき、パターンを用意しておけばいつでも必要な時にサッと書き出せるようになるのでおすすめです。 ... 続きを読む

figma-how-to-create-pie-chart

Figmaで簡単にコントラスト比を調べる方法

今回は、Figmaで文字や背景色などのコントラスト比を簡単に調べられるプラグイン「Contrast」を紹介します。コントラスト比は、広告バナーやWebページで背景色に対して読みやすい文字色を選択したり、アクセシビリティ観点から誰でも読みやすいデザインを作る上で非常に重要です。 ... 続きを読む

figma-contrast-plugin

Figmaで無料のアイコン素材集を利用する方法

今回はFigmaで無料のアイコン素材集を利用する方法を紹介します。今回紹介するものはすべてFigma上で公開されているものなります(利用条件はライセンスによる)。アプリケーションのUIやWebページの装飾など様々なシーンで幅広く活用できますので、ぜひチェックしてみてください。 ... 続きを読む

figma-how-to-use-icons

Figmaで簡単にフローチャートや画面遷移図をつくる方法

今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 ... 続きを読む

figma-connect-with-arrows

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告