Figma のコンポーネントは、 Sketch のシンボルのように1つのオブジェクトのスタイルを使いまわしたい場合にコンポーネント化することでそのオブジェクトを簡単にコピーして使い回せるようになります。また、コンポーネントを使うことで、一度配置した後にその見た目のオブジェクトのスタイルを変更したくなった時でも、コンポーネントとして登録したオブジェクトのスタイルだけの変更でコピーして配置したオブジェクトのスタイルも同時に変更できます。

オブジェクトをコンポーネント登録する

適当にオブジェクトを作成し、右クリックのコンテキストメニューから「Create Component」でコンポーネント化できます。(またはcommand + option + k)コンポーネント化したものはサイドバーのコンポーネントビュー(option + 2)で一覧することができます。そこから使いたいコンポーネントをドキュメント上にドラッグアンドドロップすることでコピーすることができます。

あるコンポーネントから微妙にスタイルを変えて新しいコンポーネントを登録する

コンポーネントをコピーしたものは Figma ではインスタンスと呼びます。これはサイズや色などの変更はできますが、細かい中身のオブジェクトの置いている位置などの変更はできません。これをするにはインスタンスからただのオブジェクトに変換(command + option + b)し、編集後再度コンポーネント化する必要があります。

JavaScript で飯食べたい歴約 5 年、 純( nju33 ) によるノートサイトです。

このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。

Change Log