フレームはプロトタイプのコンテナとして機能し、定義されたスペース内で異なるデザイン要素をグループ化、整理、管理するのに役立ちます。

UXPinでは、フレームを使用することで、コード化された(Merge)コンポーネントを使用して、レスポンシブなプロトタイプを作成できます。

つまり、フレームサイズをすばやく切り替えることで、異なるデバイスや画面サイズでデザインがどのように見え、機能するかを簡単に確認できます。

これによって、スマートフォン、タブレット、デスクトップのいずれで表示しても、見栄えの良さを確認できます。

フレームは、デバイスごとのバージョンを作成することなく、さまざまなシナリオでプロトタイプをテストし、改善するのに役立ちます。同時に、ネイティブ(コードバックされていない)コンポーネントで構築されたデザインでは、フレームを使用することで、他社デザインツールで多く使用されているキャンバスやアートボードを作成することができます。

フレームの作成

単一のレイヤーでも、複数のレイヤーの選択範囲でも、既存のオブジェクトの周りにフレームを作成できます。これを行うには、フレーム選択キーボードショートカット: F を使うか、トップバーまたはコンテキストメニューから選択範囲をフレームにします。

ZuFgOBoQrfVKl8-Z_frame_01.avif

キャンバス上に異なるサイズのフレームを作成するには、いくつかの方法があります:

フレームを削除するには、該当フレームを選択し、トップバーの Break を選択するか、 ⌘ + Shift + F を押してグループから外します。

ZuFgPRoQrfVKl8-e_frame_02.avif

<aside> 📎

備考 現時点では、ネストされたフレームはサポートされておらず、フレームの中に別のフレームを配置することはできません。

</aside>

フレームのプロパティ

ZuFgQhoQrfVKl8-h_frame_03.mp4

フレームには調整可能なプロパティがいくつかあります: