DesignOps - Export design

Unofficial Content
This documentation is valid for:

Designers can send designs made in sketch format to developers. Then, developers can then import these designs using the Sketch Inspector tool in the IDE. 

The designer can send what is necessary to the developers using traditional mechanisms (sending by mail, shared resource, etc.), or the other thing they can do is to install the GeneXus Plugin for Sketch, which allows you to send the designs using it.

How to send sketch design manually

When a designer sends a design it should include the .sketch file (the design), including images and fonts in separated folders. So traditionally send these files separately.

The developer needs to stores the .sketch file in a folder which also includes every image under a folder named exactly the same as the .sketch file and suffixed with "Image". The same process must be applied to fonts with a folder suffixed with "Fonts"

For instance, if you save your design as MyFirstDesign.sketch, then every image must be shared with the developer in a directory named /MyFirstDesignImages and every font in a directory named /MyFirstDesignFonts.

/Designs
   MyFirstDesign.sketch
   /MyFirstDesignImages
      Image1.png
      Image1@2x.png
      Image1@3x.png
      ... // All exported images, in general by using the export tool of Sketch
   /MyFirstDesignFonts
      Font1.ttf
      Font2.ttf
      ... // All used fonts

How to send sketch design by using GeneXus Plugin for Sketch

Instead of sending all this information into separated structures, GeneXus created a .gxsketch format to avoid missing some pieces of information when the designer send information from Sketch to GeneXus.

The .gxsketch format is quite simple, it is just a zip file format with the sketch file, plus images, plus fonts, and with screenshots for each artboard in the sketch file. You can explore the content with any zip client like 7Zip, WinZip, WinRar, etc.

So the contents are:

Sketch File {{filename}}.sketch The design (Artboards, Symbols, etc)
Design Images {{filename}}Images folder The images used by the designer. Remember to mark as exportable images that you want to be imported in GeneXus.
Fonts {{filename}}Fonts folder The fonts used by styles in the sketch file.
Screenshots gx-preview folder One image per artboard. Used by Sketch Inspector in the IDE to preview the design to developers.

Installing GeneXus Plugin for Sketch

Download the latest version of the plugin from https://github.com/genexuslabs/sketchdesignops/releases

After download, double click the .sketchplugin file.

Configure Export Options

In order to start sharing with developers, the designer must configure the way of sharing. At this moment there are two options:
1) A shared folder.
2) An AWS S3 bucket.

The designer can configure the export options by executing Plugins > GxDesignOps > Configuration inside Sketch.

optionssketch

Name Description
Send Preview for Pages For each artboard for each page send a screenshot embedded. On big sketch files, this can take time and increase the .gxsketch file size.
Send fonts used. This option allows you to send the used fonts embedded.
Take into account that probably first designs you want to send always the fonts, but after you are truly known developers already have the needed fonts you can avoid sending them embedded each time. 
Enable S3 Sharing AWS S3 is going to be used as the mechanism to send designs to developers.
Queue Path A shared folder is used to send the design to the developers. The queue path must end on /

Exporting by using the Plugin

After plugin configuration the designer has 2 options to share the design:

1) Send the GeneXus format to the design queue (.gxsketch). 
Go to Plugins > GxDesignOps > Send GeneXus Format option.

2) Send only the Sketch file (.sketch) -- faster but incomplete information, no images, previews, nor fonts are included. 
Go to Plugins > GxDesignOps > Send only Sketch File option.

Any option will show a dialog in order to confirm the copy.

importgxsketch

The result is shown in the dialog itself.

importlog

Scope

Generators  .NET, .NET Core, Java, Android, Apple, Angular

See also