ページ（Pages）
左パネルの中あるPagesは、プロジェクト内にある複数のページを管理できます。新しいプロジェクトを作成すると、Home (インデックス) ページがデフォルトで表示されています。このページは削除できず、Web サイトのトップページとしての役割を持ちます。
ページの名前がサイトのディレクトリ名になります。（例：About→***.com/about）
ページ名をホバーし、ドットのアイコンから追加のオプションを含むメニューが開きます。このメニューでは、ページ名の変更や、既存のページ (そのすべてのコンテンツを含む) を複製、ページの削除、下書き化（Draft）、ページ設定できます。
ページ名をダブルクリックですぐ名前を変更することができます。ページ名の後にスラッシュ(/)を入力すると、フォルダになります。
新しくページを追加する。
「+」ボタンから新しくページを追加できます。CMSを使用した動的なページや、404ページもこちらから追加できます。ページをまとめたフォルダーも作成できます。「Sort Alphabetocally」でアルファベット順に並び替えができます。
レイヤー（Layers）
レイヤーはFigmaなどと同じように、現在のページに含まれるすべての要素（レイヤー）を階層構造で表示します。現在選択されている要素はレイヤーで青色で表示されます。子要素がある場合は薄い青色で表示されます。コンポーネントを選択している場合は紫です。
要素を選択中にTabキーを押せば、次のレイヤーの選択が可能です。Shift + Tabなら前のレイヤーを選択します。esc（エスケープキー）で親要素のレイヤーを選択でき、エンターキーで子要素へ入り、中のレイヤー全てを選択します。
ページの移動もレイヤーから可能です。レイヤーパネルを表示中にページ名をクリックするとドロップダウンメニューが開き、他のページへ移動できます。ドロップダウンメニューでテキストを入力しページの検索も可能です。矢印キーの上下で選択も可能です。
アセット（Assets）
アセットパネルでは、プロジェクトで使う素材（コンポーネントやアイコン、テキストスタイル、カラーなど）を管理するエリアです。プロジェクトに必要なリソースを簡単にインポートし、デザインに活用することができます。
自分で作ったパーツやセクションをコンポーネントにし使いまわせるようにしたり、よく使うカラーやテキストスタイルを登録してデザインにすぐ反映できる。
プロパティパネル
画面の右側にあるパネルです。こちらでデザインのスタイリングをしていきます。要素を選択中に表示されます。色やサイズ、配置、フォントなどのデザインプロパティを調整します。プロパティパネルで変更した設定はリアルタイムでキャンバスに反映されます。調整しながら仕上がりを確認できます。
プロパティで設定できる項目
プロパティパネルで設定できる項目の例は以下です。CSSを知っていると理解が早まると思います。
1. レイアウト (Layout)
X / Y ：位置
Width / Height ：幅・高さ
Padding ：内側の余白
Stack ：フレックスボックス
Distribute ：フレックスボックス内での配置
Align ：上下中央の整列
Grid ：グリッド
Gap ：ギャップ
Wrap ：折り返し
2. 外観 (Styles)
Fill ：塗りつぶし
Border ：枠線
Shadow ：影
Opacity ：透明度
Radius ：角丸
Visible ：表示・非表示
3. テキスト (Text)
Font ：書体
Font Size ：フォントサイズ
Font Weight ：フォントの太さ
Letter Spacing ：文字間隔
Line Height ：行間
Alignment ：整列
Text Transform ：文字変形
その他
Effect ：エフェクト・アニメーション。ホバーやループ、スクロールなどによるアニメーション。
Cursor：カーソルのデザイン
Overlays ：オーバーレイ・モーダル・ポップアップ・ドロップダウン
Transform：変形。スケール、傾き、2D・3D回転など。
Scroll Section ：アンカーリンク用に要素にIDを振り分けることができる。Y方向のオフセットも可能。
Accessibility ：アクセシビリティ。HTMLタグ、Aria Label、Tab Indexなど。
Code Overrides ：コードオーバーライド。Reactでコードを書くと、指定した要素に動きや仕様などを上書きできる。
キャンバス（Canvas）
ページパネルの下にCanvasというラベルがあるので、クリックすると新たにページとは別の作業スペースへ移ります。CanvasはWebページに一切影響を与えないもので、使っても使わなくてもOKな機能です。簡単に言うとFigmaのようなデザインカンプを作るスペースです。
このようにスマートフォンサイズのフレームを作ったり、画面遷移や動きなどのワークフローを組んで、簡単なプロトタイプも作ることができます。
←