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

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

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

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

コンポーネント

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

分かりやすい例としては

  • ボタン
  • アイコン
  • ヘッダー
  • フッター

などなど。

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

コンポーネント化する方法

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

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

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

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

Master Component(マスターコンポーネント)

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

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

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

instance(インスタンス)

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

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

オートレイアウト

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

オートレイアウト化の方法

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