コンポーネント

Figmaのコンポーネント機能は、デザインパーツを効率的に管理・更新できる便利な機能です。
ボタンやカードなどのパーツをコンポーネントとして作成しておけば、色やサイズを変更したり、新しいバリエーションを作成したりといった操作を、一括で簡単に行うことができます。

コンポーネントは、メインコンポーネントとインスタンスで構成されています。
メインコンポーネントは、パーツの元となるデザインを定義したものであり、インスタンスはメインコンポーネントを複製したものです。

インスタンスは、メインコンポーネントのデザインを継承していますが、個別に編集することもできます。

コンポーネントを作成する

ショートカットキー（⌥ + ⌘ + K）やツールバーのダイヤモンドのアイコンをクリックでも作成することができます。

メインコンポーネントはレイヤーパネル内で紫色のダイヤモンドのアイコンで表示されます。

メインコンポーネントをキャンバス上にドラッグ＆ドロップしてインスタンスを作成します。
他にもメインコンポーネントをコピー＆ペーストでも作成することもできます。

インスタンスはレイヤーパネル内でダイヤモンド型のアイコンが表示されます。
メインコンポーネントのダイヤモンドアイコンは紫色ですが、インスタンスのダイヤモンドアイコンは少し薄い色で表示されます。

メインコンポーネントを編集することで、すべてのインスタンスに変更が反映されます。
例えば、ボタンの色やテキストを変更すると、すべての関連インスタンスが自動的に更新されます。

以上、「コンポーネント」について説明でした。

次のステップで、「書き出し」について説明していきます。