初心者が「コンポーネント機能」を使用してみる【figma】

figmaについて

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

ひとまとまりのパーツを登録して、再利用するテンプレートです。ボタン・ヘッダー・フッターなど同じパーツを使いまわす場合や、似たようなパーツを使いまわすときに使用します。

コンポーネントはおおもとの部分で、コンポーネントを変更するとインスタンスも変更されます。

インスタンスに変更を加えても、他のインスタンス・コンポーネントには影響がありません。

コンポーネントを削除する場合は、コンポーネントを選択後「delate」するだけで削除できます。

コンポーネントを探すときは、インスタンスを選択した状態でデザインパネルの「このファイルから」をクリックすると見つかります。

コンポーネントと色・形など似ているバリエーションを登録することができます。

step1
「バリアントの追加」を選択。
コンポーネントを右クリックして「バリアントの追加」をクリックします。
※メインコンポーネントとなっていますが、コンポーネントとのことです。
step2
バリアントを作成。
コンポーネントの近くに作業スペースができるので、ここでは色・数字を変えて作成します。
step3
アセットパネルに出現。
左側のサイドバーにある「アセットパネル」にバリアントが追加されました。
step4
デフォルトのインスタンス、バリアントのインスタンスを挿入。
クリックで量産できます。

サイトを制作する時間を大幅に短縮できて、大規模サイトには便利な機能ですね。