How to import a Sketch file

Official Content
This documentation is valid for:

Sketch is one of the most popular tools for designing digital interfaces. We are working on integrating Sketch files automatically into GeneXus.

(State of the Art

  • For Mobile: It is available since GeneXus 16 upgrade 5
  • For WEB: This is an experimental feature (Beta stage), so beware!

)

Given a Sketch file, that follows the designer tips, GeneXus will create: Panels for Smart Devices, Stencils, a Theme for Smart Devices with Classes, Data Providers to fill grids with sample data and calls between panels.

You can try this feature with the sample Sketch file and its images.

How to import a Sketch file

Open the Sketch Import tool

image_201938123933_1_png

Select the Sketch File (Note: The Sketch file must follow the designer tips.)

image_2019410104616_1_png

 

Import options:

  • Add to Theme: Select the Theme for Smart Devices where the classes will be added.
  • Images: import the images embedded inside the sketch file and will create placeholders for all the exported images. If you already have the images inside the KB, disable it.
  • Menu: creates a dashboard named MenuFromSketch with links to all the created panels.
  • Panels as Stencils: creates a Stencil to replace the main table of all created Panels. This is useful if you want to import multiple iterations of the sketch file while developing.

Import the file. You can watch the progress in the General Output Window.

Once finished you will see in the KB explorer, new objects:

image_2018122017257_1_png

Before building and running, we suggest importing the images.

Importing Images

Open the Images Import Window

image_201938124033_1_png

Select the folder containing all the images

image_20181220171545_1_png

image_20181220165511_1_png

and import the images.

You can watch the progress in the General Output Window.
Once finished you can see the images in the Image Tool Window.

Importing Fonts

Open the Fonts Import Window

image_201938124152_1_png

Select the folder containing all the fonts.

Select the theme that was created when importing the sketch file.

image_201938125257_1_png

and import the fonts.

You can watch the progress in the General Output Window.
Once finished you can see the fonts inside the selected theme.

Build and Run

  • Select a startup object (either a panel or the MenuFromSketch)
  • Run

Tips for Designers

  • Download the sample Sketch file and explore it.
  • Use a Sketch version >= 52
  • Remember to mark all images as exportable. These includes icons, logos, etc.
  • There can be only one background per folder, and it should be at the bottom and be the largest item inside the folder.
  • If a folder name starts with the word "button", it will be treated as a button.
  • If a text name starts with the word "input", it will be treated as an input field.
  • Lists, carousels, and grids should be inside a folder that starts with the word "grid". If elements inside it are Symbols, we will import de the relevant data and load it dynamically. Developers will appreciate this!
  • If a folder starts with "_" it will be ignored. Useful for details that must be seen in Sketch not imported to GeneXus.
  • We do not support yet complex controls like Calendar or Graphs, these will be reduced to multiple images and texts. We recommend marking them as exportable images, since it will make it clearer for the developer what needs to be replaced.
  • Follow Sketch's resize constrains best practices, we use resize constraints to make the design responsive.
  • If you are editing a Sketch file that you already shared, keep the old names of the objects. Changing them might unnecessarily create news objects inside GeneXus.
  • Avoid overlapping frames if possible. For instance, two texts might have overlapping frames even if their content does not overlap. This will look good in Sketch but will severely limit the responsiveness of the application.
  • Keep it simple! This is an experimental feature and there are many things that it doesn't support. For instance, avoid one text field with many formats and avoid masks with complex shapes. Keeping it simple increases the chances of your design looking good on the first try.
  • When you share the sketch file, remember to send the exported images and all the fonts used!

Feedback

Please help us improve, we want your feedback! Be part of the conversation in the GeneXus Beta Channel
(You can subscribe at http://www.genexus.com/betatesters)

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.