• モバイル: GeneXus 16 Upgrade 5 以降で使用できます。
• Web: 実験的機能 (ベータ段階) です。ご注意ください。

Sketch ファイルをインポートする方法

• [ テーマに追加 ] : クラスを追加する Theme for Smart Devices を選択します。
• [ イメージ ] : Sketch ファイル内に組み込まれた画像がインポートされ、エクスポートされた画像にはプレースホルダーが作成されます。画像がナレッジベース内にある場合は、無効にします。
• [ メニュー ] : 作成されるすべてのパネルへのリンクを含む MenuFromSketch というダッシュボードが作成されます。
• [ Stencil ] : 作成されるすべてのパネルのメインテーブルに代わる Stencil が作成されます。これは、開発中に Sketch ファイルを複数回インポートする場合に便利です。

画像のインポート

フォントのインポート

ビルドと実行

• 開始オブジェクトを選択します (パネルまたは MenuFromSketch)。
• 実行します。

開発者向けルール

• エレメントとレイヤーが重ならないようにします。
  • エレメントがレイヤーと重なっている場合は、バッジか、上位レイヤーの背景でない限り、レイヤーの中に入れるようにします。
  • バッジ (小さなレイヤー) は、別のレイヤーの上または端に配置できます。
  • レイヤーには背景を設定できます。背景は一番下に配置し、レイヤー内で最大のアイテムにします。
  • 何も重ならないようにします。フレームには注意が必要です。たとえば、2 つのテキストは、コンテンツが重ならなければフレームが重なってもかまいません。
• すべての画像をエクスポート可能とマークします。これにはアイコン、ロゴなどが含まれます。
• シンボルはすべて親の幅まで拡張されます。シンボルの幅を固定したい場合は、固定幅のフォルダに入れます。
• Sketch のサイズ変更の制約に関するベストプラクティスに従います。GeneXus では、サイズ変更の制約を使用して、デザインをレスポンシブにしています。
• 一部のレイヤー名には特別な意味があります。
  • レイヤー名が「button」から始まる場合、ボタンとして扱われます。
  • テキスト名が「input」から始まる場合、入力フィールドとして扱われます。
  • リスト、カルーセル、グリッドは、「grid」から始まるレイヤーの中に配置する必要があります。中のエレメントがシンボルである場合は、関連データがインポートされ、動的にロードされます。これは開発者への配慮です。
  • 「_」から始まるレイヤーは無視されます。これは、Sketch では表示する必要があっても GeneXus にインポートする必要はない情報に便利です。
  • 同様に、キーボードは常にパネルに表示される部分ではないため、「keyboard」から始まるフォルダは無視されます。
  • カレンダーやグラフなどの複雑なコントロールは、まだサポートされておらず、複数の画像やテキストに分解されます。これらはエクスポート可能な画像としてマークすることをお勧めします。この方法により、何を置換する必要があるかが開発者に明らかになります。
  • 既に共有している Sketch ファイルを編集する場合は、オブジェクトの名前を変えないようにしてください。名前を変更すると、GeneXus 内に不要な新規オブジェクトが作成される可能性があります。
• シンプルになるようにしてください。これは実験的機能なので、サポートされていない部分が多くあります。詳細は「制限」のセクションを参照してください。
• Sketch はバージョン 52 以降を使用してください。

例

制限

• 色のグラデーションはサポートされていません。
• 1 つのテキストフィールドに複数の書式を設定したり、複雑な形状のマスクを使用することは避けてください。シンプルにすることで、初回のデザインが適切な見た目になる可能性が高くなります。
• Sketch ファイルを共有するときは、エクスポートした画像と、使用しているすべてのフォントを必ず送信してください。

フィードバック