5.プロパティパネル

①デザインパネル

デザイン内のオブジェクトのプロパティを表示、追加、削除、または変更することができます。

デザインパネルで何も選択しない場合は、現在のファイルで作成されたスタイルを表示できます。キャンバスの背景のカラーを変更することができます。

レイヤーを選択すると、デザインパネルにさまざまな設定が表示されます。 選択したレイヤータイプによって、デザインパネルで使用できるプロパティが決まります。

デザインパネルには、次のプロパティがあります。

• アライメントと分布
• フレームのサイズと方向
• キャンバス上のレイヤーの位置(XとY)
• 選択したオブジェクトのサイズ(幅と高さ)
• インスタンス設定
• レイアウト制約のプロパティ
• レイアウトグリッドのプロパティ
• レイヤー(混合モード)
• テキスト
• 塗り
• ストローク
• エフェクト
• エクスポート設定

②プロトタイプパネル

プロトタイプパネルでは、プロトタイプのすべてのインタラクション設定を使用できます。

キャンバス内のパネルとパネルを接続できます。この接続により、ユーザーがインターフェースをどのように操作するかをシミュレートし、デモビューに表示できます。

• インタラクションの選択：インタラクション、操作、およびインタラクションのターゲットを設定できます。
• アニメーションの適用：フレームを切り替える効果を設定できます。 また、方向、スローモーション、持続時間を調整することもできます。
• ポップアップウィンドウの設定：この機能を使用して、プロンプトポップアップ、確認ポップアップ、インタラクティブメニュー、およびアラートを作成できます。
• オーバーフロー動作の設定：プロトタイプページがスクロールにどのように反応するかを決定できます。この機能を使用すると、カルーセル、リスト、インタラクティブマップなどの高度なユーザーインタラクションを作成できます。
• プロトタイプの基本設定を調整：タイムラプスビューの背景とフレームの開始手順を設定できます。

③ラベルパネル

右側の 3 番目のパネル・オプションは、ラベルパネルです。

ここでは、デザイン要素をコードで表現する方法や、選択した要素の基本プロパティを表示してその値をコピーする方法を確認できます。

コードを選択してコピーすることができます: CSS (Web 開発)