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

2021年11月30日

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

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

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

コンポーネントの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。