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」）のショートカットキーを使用して、選択した要素をコンポーネントに変換します。

コンポーネントが作成されると、選択した要素の左上に紫色の❖アイコンが表示されます。
これでコンポーネントが作成されました!

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

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

編集したいコンポーネントをダブルクリックして選択します。
これにより、コンポーネントのレイヤーが展開され、編集可能な状態になります。

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

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

インスタンスの作成

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

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

インスタンスの作成方法

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

　インスタンスが作成されると、コンポーネントと同じデザイン要素がキャンバスに表示されます。
インスタンスは❖アイコンではなく、◇のアイコンが左上に表示されることでコンポーネントとの識別ができます。

インスタンスの編集とオーバーライド

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

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

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

オーバーライドを解除したい場合は、インスタンスのプロパティパネルにある「Reset all changes」をクリックします。
これにより、インスタンスは元となったコンポーネントと同じ状態に戻ります。

↓↓↓↓↓

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

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

上から

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

おわりに

　今回Figma上でコンポーネント設計を行う基礎にあたる
ただの１フレームから

• コンポーネントの作成
• インスタンスの作成
  を行いました。
  今回の機能を利用するだけでも既存の要素をコンポーネント化し、インスタンスに置き換えデザインの開発環境を改善することができます。

ただ、もちろんまだまだ便利な機能が

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

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