【figma】ショートカット・概念などの簡易メモ

figmaに触り出した（やっと）ので色々メモっておきます。

効率的な使い方をレクチャーしていただいたので概念などをメモします。

コンポーネントとは、デザイン全体で再利用できるUIの要素のこと。

分かりやすい例としては

などなど。

これらを再利用することで作業時間の短縮に繋がり、かつメンテナンスしやすいデザインデータを作ることができます。

作ったUIを選択して右クリック→Create Component でコンポーネント化できます。

ショートカットは ⌘ + Option + K (Winは Ctrl + K) 。

Create Component でコンポーネント化すると、今まで選択していた要素の枠が水色から紫色に変わります。
そしてレイヤーパネルの表示も4つの菱形に変わります。

この4つの菱形の要素を Master Component(マスターコンポーネント) と呼びます。

この Master Component を再利用することで作業の効率化が図れます。

作ったマスターコンポーネントをコピペで複製（option + A）すると、コピーした要素はレイヤーパネルで紫色のひし形の枠線で表示さます。

このマスターコンポーネントから複製した要素を instance(インスタンス) と呼びます。

このinstance(インスタンス)がコンポーネントを再利用した要素になります。

instance(インスタンス)はマスターコンポーネントで編集した色やテキストのプロパティを引き継ぐことができるので、マスターコンポーネントで編集された箇所が同様にインスタンスに反映されます。

オートレイアウトとは、コンテンツの大きさに応じてコンテンツを包むコンテナの大きさが変わります。

オートレイアウトを使いたいコンポーネントを選択して shift + A でオートレイアウト化できます。