Figmaでコンポーネント作成

### 対象者
- デザインツールにFigma使ってる人
- 使ってはいるが、ほぼ見た目しかデザインツール上では作っておらず、コンポーネント設計機能を利用してない人
- コンポーネント設計は知らないが、Figma上で同じ手作業に辟易している方

### 動作環境
Figma Desktop Appバージョン116.8.5
### 目次
[1.はじめに](#はじめに)
[2.コンポーネントの作成](#コンポーネントの作成)
[3.インスタンスの作成](#インスタンスの作成)
[4.おわりに](#おわりに)

# はじめに
　Figmaを使っていたことがあれば、何かしら図形を作成した際に画面左のサイドバーの「Layers」に作成した要素の一覧が表示されているに気付いたことでしょう。
　本記事ではこの「Layers」に要素の関係を定義しコンポーネントの基本となる
- コンポーネント作成
- コンポーネントからインスタンスを作成
の手順を解説していきます。

まず手順を説明する前に、Figma上でコンポーネント設計ができれば何が嬉しいのかというと
- __一貫性の維持__
Figma上で定義することによりデザイン要素のスタイルやサイズが一貫性が担保されます。
- __修正の効率化__
こちらの恩恵はコードの実装上でも同じで、コンポーネントの変更はそのコンポーネントを使用しているすべてのインスタンスに自動的に反映されます。これにより、修正作業が一元化され時間と手間を大幅に節約できます。
- __共同開発時の効率化、ルールの担保__
そしてこれらの定義を編集者全員で共有できるので、デザイン思想を崩さぬまま共同作業が可能になるのです！

　以上のようなメリットがあります。
　これらを上手く使わないとプロジェクトの肥大化とともにメンテナンスコストが爆上がりしてゆき、その負債がボディブローのように効いてきて、むしろデザインツールでデザインを運用したくなくなる負のスパイラルにつながるのです・・・
ですので、これからの記事を通して
- Figmaのコンポーネント機能を知る
- その上でコンポーネント設計をFigma上でしたくなる

　以上のことができれば幸いです！

# コンポーネントの作成

　では早速、ただの図形だった何かを、以下の手順でコンポーネント化していましょう！

1. Figmaのキャンバス上で、コンポーネント化したいデザイン要素を選択します。

2. 右クリックメニューから「Create Component」を選択するか、「Ctrl + Alt + K」（Macの場合は「⌘ + Option + K」）のショートカットキーを使用して、選択した要素をコンポーネントに変換します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/494c1b01-4d11-de8d-fff2-4554c590c279.png">

 コンポーネントが作成されると、選択した要素の左上に紫色の❖アイコンが表示されます。
これでコンポーネントが作成されました!
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/b6e57b5d-a1fd-35d4-9d6c-40364311b869.png">


 コンポーネントに名前を付けることで、後で簡単に検索や管理ができます。
選択したコンポーネントの右側にある名前欄をクリックし、適切な名前を入力しましょう。

#### 以上で作成したコンポーネントを編集してみましょう！

 編集したいコンポーネントをダブルクリックして選択します。
これにより、コンポーネントのレイヤーが展開され、編集可能な状態になります。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/5a33675f-4f26-c65c-c645-3dadec4e7837.png">

 必要な変更を加えた後、キャンバスの空白部分をクリックしてコンポーネントの編集を終了します。
コンポーネントに加えた変更は、そのコンポーネントを使用しているすべてのインスタンスに自動的に反映されます。

:::note alert
注意！
コンポーネントの編集は**インスタンス**ではなく、**コンポーネント**に対して行ってください。
インスタンスを編集するとその変更はそのインスタンスにのみ反映され、他のインスタンスには影響しません。
:::

# インスタンスの作成

　まず前章で出たインスタントとはなんぞやという話ですが、簡単に言えばコンポーネントから作成されるそのコンポーネントのコピーのようなものです。
　これらインスタンスを駆使し、その集合体で画面を構築していくことになります。

```mermaid
graph TD;
    コンポーネント-->インスタンスA;
    コンポーネント-->インスタンスB;
    コンポーネント-->インスタンスC;
```

　インスタンスは、元となるコンポーネントと連動しておりコンポーネントの変更は自動的にインスタンスにも反映されます。
　更にインスタンスごとに個別のカスタマイズ（オーバーライド）することも可能です。
```mermaid
graph TD;
    コンポーネント-->インスタンスA';
```

#### インスタンスの作成方法
　今回作ったコンポーネントをサイドバーのレイヤー、もしくは直接選択しコピーします。あとはコピーしたコンポーネントをキャンバスにペーストするだけです！

　インスタンスが作成されると、コンポーネントと同じデザイン要素がキャンバスに表示されます。
インスタンスは❖アイコンではなく、◇のアイコンが左上に表示されることでコンポーネントとの識別ができます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/3254cb95-9601-ccf6-554a-2d9f1eb71ef6.png">

#### インスタンスの編集とオーバーライド
　インスタンスは元のコンポーネントから独立して編集することができます。
この編集を __オーバーライド__ と呼びます。
　オーバーライドした部分は、コンポーネントの変更が反映されないようになります。
オーバーライドを行うには、以下の手順を踏みます。

1. 編集したいインスタンスをダブルクリックして選択します。

2. 必要な変更を加えます（例: テキストの変更、色の変更、アイコンの変更など）。

 オーバーライドを解除したい場合は、インスタンスのプロパティパネルにある「Reset all changes」をクリックします。
これにより、インスタンスは元となったコンポーネントと同じ状態に戻ります。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/368d266e-6817-bb01-febf-b5bf8e0a6e43.png">
↓↓↓↓↓
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/4de3c540-50c7-441c-8b6e-8f05c2358dd3.png">


:::note alert
注意！
オーバーライド機能を活用することで、元となったコンポーネントの一貫性を担保しつつ自由度の高いデザインを作ることができます・・・
　が、エンジニアの方は察するかもしれませんが、オーバーライドの使用が過度になるとデザインの一貫性の担保という先ほど話したメリットが損なわれてしまうので使いすぎは注意が必要です！
:::

また、インスタンスをただのフレームに戻したい場合は、選択中メニューから「Detach Instance」を選択することで元のフレームに戻すことができます。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3019466/a3d1db41-06de-2dff-97ab-916aed93ecd4.png">

上から
- ❖コンポーネント
- ◇インスタンス
- #フレーム
になってます！

# おわりに
　今回Figma上でコンポーネント設計を行う基礎にあたる
ただの１フレームから
- コンポーネントの作成
- インスタンスの作成
を行いました。
 今回の機能を利用するだけでも既存の要素をコンポーネント化し、インスタンスに置き換えデザインの開発環境を改善することができます。

ただ、もちろんまだまだ便利な機能が
- レイヤーの隣のアセットってなんだ？
- コンポーネントの管理、整理
- コンポーネントのバリエーション、バージョン管理
- チームで共有で便利な機能
などたくさんあるので、次回の記事以降これらについて解説していければと思います！

デザインツールは画面開発の源流になるもの！どんどん上手く活用できるようになりましょう！