DesignOps - デザインのエクスポート

デザイナーは、デザインを Sketch 形式で開発者に送信できます。開発者は、IDE の Sketch インスペクターツールを使用して、それらのデザインをインポートできます。
デザイナーは、従来の方法 (メール、共有リソースなど) で必要なものを開発者に送ることも、Sketch 向け GeneXus プラグインをインストールしてデザインを送ることもできます。

Sketch デザインを手動で送信する方法

デザイナーがデザインを送信するときには、.sketch ファイル (デザイン) と、別のフォルダに入れた画像やフォントが必要です。これらのファイルは通常は別々に送信します。
開発者は、.sketch ファイルを格納するフォルダ内で、.sketch ファイル名に接尾語「Image」を付加した名前のサブフォルダにすべての画像を置く必要があります。フォントも同様に接尾語「Fonts」を付加したフォルダに配置します。
たとえば、デザイン名を MyFirstDesign.sketch とした場合、画像はすべて /MyFirstDesignImages というディレクトリーで開発者と共有し、フォントはすべて /MyFirstDesignFonts ディレクトリーで共有します。

/Designs
   MyFirstDesign.sketch
   /MyFirstDesignImages
      Image1.png
      Image1@2x.png
      Image1@3x.png
      ... //エクスポートされたすべての画像 (通常は Sketch のエクスポートツールを使用)
   /MyFirstDesignFonts
      Font1.ttf
      Font2.ttf
      ...//使用されているすべてのフォント

Sketch 向け GeneXus プラグインを使用して Sketch デザインを送信する方法

情報をそれぞれ別で送信する代わりに、GeneXus が作成した .gxsketch 形式を使用することもできます。この形式では、デザイナーが Sketch から GeneXus へ情報を送信するときに情報の欠落を回避できます。
.gxsketch 形式はシンプルで、Sketch ファイルに加え、Sketch ファイル内の各アートボードの画像、フォント、スクリーンショットを 1 つの zip ファイルにまとめたものです。7Zip、WinZip、WinRar など任意の zip クライアントで内容を確認できます。
内容は次のとおりです:

Sketch	<ファイル名>.sketch ファイル	デザイン (アートボード、シンボルなど)。
画像	<ファイル名>Images フォルダ	デザイナーが使用した画像。GeneXus にインポートする画像はエクスポート可能とマークする必要があります。
フォント	<ファイル名>Fonts フォルダ	Sketch ファイル内のスタイルで使用されているフォント。
スクリーンショット	gx-preview フォルダ	アートボードにつき 1 画像。IDE の Sketch インスペクターで、開発者へのデザインのプレビューに使用されます。

Sketch 向け GeneXus プラグインのインストール

プラグインの最新バージョンは https://github.com/genexuslabs/sketchdesignops/releases からダウンロードできます。
ダウンロードしたら、.sketchplugin ファイルをダブルクリックします。

エクスポートオプションの設定

デザイナーが開発者との共有を開始するには、共有の方法を設定する必要があります。現時点では次の 2 つの方法があります:
1) 共有フォルダ
2) AWS S3 バケット
デザイナーがエクスポートオプションを設定するには、Sketch 内で [ Plugins ] > [ GxDesignOps ] > [ Configuration ] の順に選択します。

名前	説明
[ Send Preview for Pages ]	各ページのアートボードごとに、組み込みのスクリーンショットを送信します。大きな Sketch ファイルの場合、時間がかかり、.gxsketch ファイルが大きくなる可能性があります。
[ Send fonts used ]	このオプションを選択すると、使用しているフォントを組み込みで送信できます。初めてデザインを送信する際にはおそらくフォントが必要ですが、以降、開発者が必要なフォントを持っていることが分かっている場合は、毎回組み込みで送信する必要はありません。
[ Enable S3 Sharing ]	デザインを開発者に送信するメカニズムとして AWS S3 が使用されます。
[ Queue Path ]	共有フォルダを使用してデザインが開発者に送信されます。キューのパスは末尾がスラッシュ (/) である必要があります。

プラグインを使用したエクスポート

プラグインの設定が完了したら、デザイナーは次の 2 とおりの方法でデザインを共有できます:
1) GeneXus 形式をデザインキューに送信します (.gxsketch)。
[ Plugins ] > [ GxDesignOps ] > [ Send GeneXus Format ] の順に選択します。
2) Sketch ファイル (.sketch) のみを送信します。時間はかかりませんが、画像、プレビュー、フォントは含まれません。
[ Plugins ] > [ GxDesignOps ] > [ Send only Sketch File ] の順に選択します。
いずれの場合も、コピーを確認するダイアログが表示されます。

結果は同じダイアログに表示されます。

適用範囲

ジェネレーター

.NET、.NET Core、Java、Android、Apple、Angular

参考情報

デザイナー向けガイド