UXPinのエディタを開くと、左側にQuick tools（クイックツール） 、右側にProperties panel（プロパティパネル）、中央上部がTop bar（トップバー）、中央下部Bottom bar（ボトムバー）で構成されています。

Top barには、デザインで使用するすべてのツールとオプションが表示されます。画面左上隅にあるOpen Dashboard（ダッシュボードを開く）と**Recent Prototypes（最近開いたプロトタイプ）**アイコン、Design（デザインモード）、**Documentation（ドキュメンテーションモード）**を切り替えることができます。 そしてトップバーの中央には、自分のプロトタイプと作業中のイテレーションの名前が表示されます。クリックすると、すべてのイテレーションリストにアクセスできます。

次に、**Prototype Actions...（プロパティの動作）**を使用すると、プロトタイプの新しいイテレーションを作成し、プロトタイプをエクスポートや名前を変更できます。右側には、Share（共有）、Preview on Device（デバイスでプレビュー）、Preview（プレビュー）ボタン、およびズームオプションがあります。チームの誰かが同じプロジェクトで一緒に作業を開始すると、トップバーにアバターが表示されます。

エディタの右にはプロパティパネルがあり、デザインのすべての要素のプロパティを調整できます。

画面左には、Quick tools（クイックツール）があり、ツールが並んでいます。

中央にはキャンバスがあり、ここでデザイン作業を行います。

Bottom barには、表示設定（View Settings）、アクセシビリティ機能（Accessibility features）、ヘルプメニューがあります。ヘルプメニューでは、ショートカット、ビデオチュートリアル、ヒントとコツ、UXPinの機能セクションがあります。

<aside> 💡 ヒント UIビューの切り替えは、Macでは ⌘ + \ を、Windowsでは Ctrl + \ ショートカットを使用します。

</aside>

表示設定(View Settings)

UXPinを使用すると、さまざまな表示設定を変更できます。エディタの右下隅にあるすべての設定にアクセスできます。ここでは、次のことができます：

• テーマをLightとDarkに切り替えます。 Auto（自動設定）を選択すると、テーマはmacOSの設定に従います。
• Ruler（ルーラー）、Grid（グリッド）、Guides（ガイド）、Smart Guides（スマートガイド）、Interaction Indicator（インタラクションインジケーター）、Pixel Grid（ピクセルグリッド）、Snapping（スナップ）を切り替えることができます。
• ホットスポットを表示または非表示にすることができます。
• Properties Panel（プロパティパネル）をホバーするときに表示 / 非表示を決定します。
• Spell Checker（スペルチェッカー）をON/OFFできます。
• Nudgeの大きさを変更できます。

<aside> 🖇️ 備考 Auto（自動設定）を利用する場合はmacOS Mojave以降で動作し、少なくともChrome 76またはSafari 12.1が必要です。

</aside>