INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

Menu

オートレイアウトプロパティ

オートレイアウトは、レイアウトを構成するための広範なカスタマイズオプションを提供し、機能性と美観の両方を保証します。これらのプロパティには、サイズ変更、方向、レイアウト配置、および詳細設定が含まれます。

サイズ変更プロパティ

サイズ変更プロパティは、コンテンツやレイアウトの変更に応じて、子レイヤーとその親コンテナがどのように調整されるかを制御します。これらの設定は、右側パネルのドロップダウンメニューを使用して、幅と高さに対して個別に適用できます。サイズ変更オプションの上にホバーすると、キャンバス上でのその効果がハイライトされます。

固定 (Fixed)

コンテンツの変更に影響されず、オブジェクトのサイズを一定に維持します。

内包 (Hug)

パディングとギャップのサイズを考慮しながら、子要素に適合するように親コンテナのサイズを調整します。

充填 (Fill)

子オブジェクトをストレッチして、親コンテナのサイズに合わせます。

固定 (Fixed)

コンテンツの変更に影響されず、オブジェクトのサイズを一定に維持します。

内包 (Hug)

パディングとギャップのサイズを考慮しながら、子要素に適合するように親コンテナのサイズを調整します。

充填 (Fill)

子オブジェクトをストレッチして、親コンテナのサイズに合わせます。

固定

幅または高さのいずれかに固定オプションが設定されている場合、親フレームは、子レイヤーのサイズ変更に関係なく、その絶対サイズを保持します。


{'_type': 'localeString', 'en': 'Fixed Width or Height', 'ja': 'Fixed Width or Height', 'ko': 'Fixed Width or Height', 'zh': 'Fixed Width or Height'}


{'_type': 'localeString', 'en': 'Fixed Width or Height', 'ja': 'Fixed Width or Height', 'ko': 'Fixed Width or Height', 'zh': 'Fixed Width or Height'}

内容を包含

オートレイアウト(AL)の親が包含に設定されている場合、親フレームは子レイヤーの寸法に完全に適合するようにサイズを動的に調整します。


{'_type': 'localeString', 'en': 'Hug Contents', 'ja': 'Hug Contents', 'ko': 'Hug Contents', 'zh': 'Hug Contents'}


{'_type': 'localeString', 'en': 'Hug Contents', 'ja': 'Hug Contents', 'ko': 'Hug Contents', 'zh': 'Hug Contents'}

コンテナを満たす

子が満たすに設定されている場合、そのサイズは親の寸法内の利用可能なスペースを埋めるように調整され、親のサイズに対して相対的になります。


{'_type': 'localeString', 'en': 'Fill Container', 'ja': 'Fill Container', 'ko': 'Fill Container', 'zh': 'Fill Container'}


{'_type': 'localeString', 'en': 'Fill Container', 'ja': 'Fill Container', 'ko': 'Fill Container', 'zh': 'Fill Container'}

方向プロパティ

方向プロパティは、オートレイアウトコンテナ内で子オブジェクトがどのように配置されるかを定義し、さまざまなデザインシナリオに対応するレイアウト構成の柔軟性を提供します。

垂直(デフォルト)

子オブジェクトを垂直方向のスタックに整列します。

水平

子オブジェクトを水平方向の行に整列します。

折り返し

コンテナのスペースが足りなくなった場合に、オブジェクトを新しい行または列に移動します。

垂直(デフォルト)

子オブジェクトを垂直方向のスタックに整列します。

水平

子オブジェクトを水平方向の行に整列します。

折り返し

コンテナのスペースが足りなくなった場合に、オブジェクトを新しい行または列に移動します。

レイアウトプロパティ

レイアウトプロパティは、オートレイアウトコンテナ内の子レイヤーの配置、パディング、ギャップを細かく制御できます。これらの設定により、洗練された一貫性のあるデザインが保証されます。

配置

コンテナ内での子オブジェクトの配置方法(例:左上、中央、右下)を決定します。

パディング

コンテナの境界線と子オブジェクトの間の余白を定義します。

ギャップ

子オブジェクト間の間隔を設定します。固定または動的に調整可能です。

配置

コンテナ内での子オブジェクトの配置方法(例:左上、中央、右下)を決定します。

パディング

コンテナの境界線と子オブジェクトの間の余白を定義します。

ギャップ

子オブジェクト間の間隔を設定します。固定または動的に調整可能です。

オートレイアウトと制約

オートレイアウトなしのコンテナオートレイアウトありの子コンテナをラップする場合、垂直方向または水平方向の制約に応じて、特定のインタラクションが発生します。

垂直方向の制約

オートレイアウトコンテナに上&下(T+B)または「拡大縮小」が割り当てられている場合、オートレイアウトコンテナの高さは「固定」である必要があります。オートレイアウトコンテナを包含に戻すと、垂直方向の制約が中央にリセットされます。

水平方向の制約

オートレイアウトコンテナに左&右(L+R)または拡大縮小が割り当てられている場合、オートレイアウトコンテナの幅は固定に設定されます。オートレイアウトコンテナを包含に調整すると、コンテナの水平方向の制約が中央にリセットされます。

これらの調整により、オートレイアウトコンテナと非オートレイアウトコンテナの間のロジックなインタラクションが確保され、予測可能なワークフローが提供されます。

詳細設定

オートレイアウトは、レイアウトの柔軟性とカスタマイズ性を高めるための追加の詳細設定も提供します。これらのオプションにより、デザイン内の特定の要素や動作を調整できます。

オートレイアウトを無視

「オートレイアウトを無視」機能を使用すると、選択したオブジェクトのオートレイアウト規則をバイパスして、コンテナ全体の構造に影響を与えることなく手動での調整が可能になります。「オートレイアウトを無視」に設定されたオブジェクトは、個別に制約を設定できるため、コンテナ内の他の要素のオートレイアウトプロパティを維持しながら、ユニークなレイアウトシナリオに柔軟に対応できます。


{'_type': 'localeString', 'en': 'Ignore Auto Layout', 'ja': 'Ignore Auto Layout', 'ko': 'Ignore Auto Layout', 'zh': 'Ignore Auto Layout'}

レイヤー順序の制御

スタッキング順序の管理は、複数のオプションを使用して簡単に行えます:

  • レイヤーパネル:パネル内でレイヤーを直接ドラッグして順序を入れ替えます。

  • キーボードショートカット:矢印キーを使用してスタッキング順序を調整し、正確なレイヤー制御を行います。

  • マウスインタラクション:キャンバス上のオブジェクトをクリックしてドラッグし、インタラクティブに位置を変更します。

インスタンスのオーバーライド

オートレイアウト付きのコンポーネントのインスタンスは、個別の調整をサポートしており、マスターコンポーネントを変更することなく柔軟に対応できます。

  • サイズ変更:サイズ変更値の変更は既存のオプションに制限されます。新しい固定値を追加することはできません。

  • 配置、ギャップ、およびパディング:これらのプロパティはインスタンス内でカスタマイズ可能です。

  • 方向:インスタンスでは方向の変更はサポートされていません。