■基本操作

Frameを作成

①Frameボタンを選択する（ショートカットはF）
②作りたいUIの端末を選択する

UIの要素を作る

・Rectangleボタンを選択する（ショートカットはR）
・カーソルが＋になるのでドラッグするとオブジェクトが描画できる（Shiftで比率を維持できる）
・Altを押しながらドラッグすると両サイドの長さを同時に変更できる

UI（テキスト）の要素を作る

・Textボタンを選択する（ショートカットはT）
・描画方法はUIの要素と同様

スタイルを変更する

・UI要素を選択後右側のプロパティパネルを編集する
・色の変更するにはFillを編集する

■レイヤー

レイヤー構造

・左側のパネルはオブジェクトのレイヤーの階層構造を示している（レイヤーパネル）
（オブジェクトを選択すると紐づくオブジェクト名が青くなる）
・例えばiphoneレイヤーの中にRectangle1とボタン（テキスト）がネストしているという解釈ができる
（ネストが深くなると右にずれる仕様）

グループ化

・オブジェクトを選択して右クリック/Group Selectionを選択するとグループ化できる（Cmdl + G）
→レイヤーパネルの階層構造も変化する
・解除する場合は右クリック/Ungroupを選択する（Cmd + shift + G）
・作成したグループ名/オブジェクト名はダブルクリックすると編集できる
・グループ化するメリット
①レイヤーがきれいになる
②オブジェクトの位置調整が簡単になる
→オブジェクトを選択してオプションパネルのAlignアイコンをクリックすると選択オブジェクトの親要素を基準に位置を調整できる

非表示とロック

・レイヤーパネルの右側の南京錠アイコン（Cmd + Shift + L）
→レイヤーのロック（Canvasで選択できなくなる）
・目のアイコン（Cmd + Shift H）
→レイヤーの表示/非表示の切り替え

ページ管理

・レイヤーパネルの右上にPage1という項目がある
・このプルダウンを押下するとページでCanvasを管理できる
・＋ボタンを押下すると新規ページが作成される（ページは複写や削除なども可能）

■コンポーネント

グループをコンポーネント化する

・右クリック/Create Componentを選択する（Cmd + Option + K）
レイヤーパネルのアイコンが水色から紫色に変わり菱形4つのアイコンに変化する（マスターコンポーネント）
・マスターコンポーネントをコピースライドしてできたもの（紫色の菱形アイコン）をインスタンスと呼ぶ
・マスターコンポーネントから要素を引き継げる（マスターを編集するとインスタンスにも反映される）
・インスタンスのプロパティを直接編集すればオーバーライドできる
（ただし下記3点以外はオーバーライドできない）
①テキスト：フォント、太さ、サイズ、線の高さ、文字間隔、段落間隔、インデント。
②色： Fill、Stroke、背景色、不透明度
③効果：ドロップシャドウ、インナーシャドウ、ぼかし。
・オブジェクトの位置やサイズなど上書きできない
→変更する場合、右クリック/Detach Instanceを押下するとインスタンスを解除できる（Cmd + Option + B）
→インスタンスを解除するとマスターコンポーネントの変更が反映されなくなる

既存のインスタンスを別のコンポーネントへ置き換える

・インスタンスを選択し後プロパティパネルのInstanceを別のマスターコンポーネントへ変更すると要素を切り替えることができる

スタイルの登録

・登録したいスタイルを作成し選択する
・プロパティパネルのFillの●4つのアイコンをクリック/＋ボタンをクリック/スタイル名を入力する
→Color Stylesに登録される
→編集する場合は右のアイコンから編集可能（スタイルを当てているオブジェクトに反映される）

■プロトタイピング

プロトタイピングの設定

①Frameを2画面用意する
②プロパティパネルのPrototypeタブに切り替える
③オブジェクトを選択すると右側に白●が表示される
④白丸をマウスでドラッグすると矢印が伸び、別Frameにつなげることができる（ユーザーフロー）

プロトタイピングを再生する

・画面右上の再生ボタンを押下するとプレゼンテーションモードが立ち上がる
（プロトタイピングの設定した挙動を試すことができる）

画面の遷移方法を切り替える

①プロパティパネル/Prototypeタブに変更しておく
②編集したい遷移矢印を選択するとInteraction detailsのポップアップが表示される
③そのAnimationを変更すると遷移方法が変更される

実機でプロトタイピングを試す

・Figma Mirrorというアプリがios/Android共にあるようなのでこちらで試すことが可能です

スクロールの設定

・Frameの縦幅を長くすることで画面スクロールが可能になる
→縦幅を伸ばすとき、中のオブジェクトも伸びてしまうのでCmdを押しながらドラッグすると解決できる

ヘッダー/フッターの固定設定

・固定するオブジェクトをFrameに配置して選択する
・ヘッダーの場合プロパティパネル/ConstraintsをLeft/Topを選択してFix position when scrollingにチェックをつける（フッターの場合はLeft/Bottom）

参考

https://note.com/fjkn/m/m9829c621e025