# Figmaのコンポーネント入門｜コンポーネントの作成方法から特徴まで

URL: https://webrandum.net/figma-component/
公開日: 2021-11-30
更新日: 2021-11-30
カテゴリー: デザイン
出典: Webrandum（著者: サイトウ マサカズ）

Figmaには「コンポーネント」と呼ばれる機能があり、この機能を使うと複数のオブジェクトが集まったグループをテンプレート化できます。

作ったコンポーネントをいろんな場所に配置したり、そのまま配置するだけでなく色や文字のみ上書きして使えます。

そうすることで、あとから修正が入ったときにコンポーネントを修正すれば、それを配置している全てのコンポーネントが一気に修正反映されます。

今回はそんなコンポーネントの基本についてまとめておきます。

## コンポーネントの作成

今回はボタンを例にしてコンポーネントを作成します。

ボタンに必要なオブジェクト全てを選択して、右クリックメニューから「Create Component（option + command + K）」を選択します。

![コンポーネントの作成](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_1.png)

これでコンポーネントが作成されました。

このベースとなる最初に作ったコンポーネントのことを「マスターコンポーネント」と呼びます。

次はマスターコンポーネントをoptionキーを押しながらドラッグしてコピーします。

このコピーしたコンポーネントのことを単にコンポーネント、または「インスタンス」と呼びます（「コンポーネント」はこの機能全体も指すため、本ブログでは区別するために「インスタンス」と呼ぶことにします）。

マスターコンポーネントとインスタンスは、レイヤーで表示されるアイコンも異なります。

![マスターコンポーネントとインスタンス](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_2.png)

マスターコンポーネントの方が塗りのひし形4つが並んだアイコンで、インスタンスが線のひし形1つのアイコンです。

インスタンスをさらにコピーして、片方のテキストを編集してみます。

もう片方は背景の塗り（Fill）を変えてみましょう。

![インスタンスの変更](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_3.png)

このようにコンポーネントはマスターコンポーネントをベースに、自由に編集ができます。

## マスターコンポーネントの編集

マスターコンポーネントを編集すると、すべてのインスタンスに編集が反映されます。

まずはマスターコンポーネントの背景色を変更してみます。

![マスターコンポーネントの背景変更](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_4.png)

すると「Instance 1」も一緒に背景色が変わりました。

ただ、「Instance 2」は背景色をインスタンス側で上書き編集をしているので、変更が反映されません。

次はマスターコンポーネントの文字を変更してみます。

「ボタンのテキスト」を「マスターを変更」に変更すると、その変更が「Instance 2」にも反映されますが、上書き編集した「Instance 1」は変更が反映されません。

![マスターコンポーネントの文字変更](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_5.png)

もう大体わかったと思いますが、今度はマスターコンポーネントの文字色を変えてみましょう。

![マスターコンポーネントの文字色変更](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_6.png)

文字色はインスタンス側で上書き編集していないので、両方のインスタンスに文字色の変更が反映されます。

- マスターコンポーネントを変更すると、全てのインスタンスにも変更が反映される

- ただし、インスタンスで上書き編集をしている場合は、そちらが優先される

## コンテンツのオーバーフローに対応

ボタンを作っていると、文字数が多い場合にコンポーネントからはみ出してしまう可能性があります。

そんなときのために、コンポーネントの大きさを変更して収める方法をまとめておきます。

### 大きさを変更して収める

純粋にコンポーネントの大きさを変更すればOKです。

![ボタンサイズの変更](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_8.png)

### Auto Layoutで文字に合わせてサイズ変更する

マスターコンポーネントを右クリックして、「Add auto layout（shift + A）」を選択すると、Auto Layout化できます。

今回の記事では割合しますが、Auto Layoutを使用すると、コンテンツの幅に合わせて横幅を自動調整できるようになります。

![「Add auto layout」](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_9.png)

これで文字量に合わせてボタンの横幅が自動調整できます。

## コンポーネントの配置

毎回コンポーネントをコピーして配置するのは面倒です。

レイヤーパネルの上にある「Assets」メニューをクリックすると、コンポーネントの一覧が表示されるので、そこから使用したいコンポーネントをドラッグアンドドロップして配置できます。

![Assetsパネル](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_7.png)

## コンポーネントの整理

コンポーネントはきちんと管理しないと、数が増えるに連れてなにがコンポーネントになっていて、どれがまだコンポーネントではないのか、マスターコンポーネントはどこにあるのか分からなくなってきます。

そこで、コンポーネントは別ページを作ってそこで管理をするのがオススメです。

レイヤーパネル右上の「Page 1」をクリックして新規でページを作成し、そこで「Component」というページを作ってマスターコンポーネントはすべてそこで作成・管理するようにします。

こうしておくと、コーディング側に依頼するときもなにが共通パーツなのかが伝わりやすいです。