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

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

作ったコンポーネントをいろんな場所に配置したり、そのまま配置するだけでなく色や文字のみ上書きして使えます。
そうすることで、あとから修正が入ったときにコンポーネントを修正すれば、それを配置している全てのコンポーネントが一気に修正反映されます。

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

コンポーネントの作成

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

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

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

次はマスターコンポーネントをoptionキーを押しながらドラッグしてコピーします。
このコピーしたコンポーネントのことを単にコンポーネント、または「インスタンス」と呼びます（「コンポーネント」はこの機能全体も指すため、本ブログでは区別するために「インスタンス」と呼ぶことにします）。

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

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

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

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

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

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

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

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

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

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

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

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

• マスターコンポーネントを変更すると、全てのインスタンスにも変更が反映される
• ただし、インスタンスで上書き編集をしている場合は、そちらが優先される

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

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

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

大きさを変更して収める

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

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

マスターコンポーネントを右クリックして、「Add auto layout（shift + A）」を選択すると、Auto Layout化できます。
今回の記事では割合しますが、Auto Layoutを使用すると、コンテンツの幅に合わせて横幅を自動調整できるようになります。

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

コンポーネントの配置

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

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

コンポーネントの整理

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

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

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

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