フレームはプロトタイプのコンテナとして機能し、定義されたスペース内で異なるデザイン要素をグループ化、整理、管理するのに役立ちます。
UXPinでは、フレームを使用することで、コード化された(Merge)コンポーネントを使用して、レスポンシブなプロトタイプを作成できます。
つまり、フレームサイズをすばやく切り替えることで、異なるデバイスや画面サイズでデザインがどのように見え、機能するかを簡単に確認できます。
これによって、スマートフォン、タブレット、デスクトップのいずれで表示しても、見栄えの良さを確認できます。
フレームは、デバイスごとのバージョンを作成することなく、さまざまなシナリオでプロトタイプをテストし、改善するのに役立ちます。同時に、ネイティブ(コードバックされていない)コンポーネントで構築されたデザインでは、フレームを使用することで、他社デザインツールで多く使用されているキャンバスやアートボードを作成することができます。
単一のレイヤーでも、複数のレイヤーの選択範囲でも、既存のオブジェクトの周りにフレームを作成できます。これを行うには、フレーム選択キーボードショートカット: F を使うか、トップバーまたはコンテキストメニューから選択範囲をフレームにします。
ZuFgOBoQrfVKl8-Z_frame_01.avif
キャンバス上に異なるサイズのフレームを作成するには、いくつかの方法があります:
フレームを削除するには、該当フレームを選択し、トップバーの Break を選択するか、 ⌘ + Shift + F を押してグループから外します。
ZuFgPRoQrfVKl8-e_frame_02.avif
<aside> 📎
備考 現時点では、ネストされたフレームはサポートされておらず、フレームの中に別のフレームを配置することはできません。
</aside>
フレームには調整可能なプロパティがいくつかあります: