Design Import option

The Design Import option allows you to create GeneXus objects from a user interface design made with a designer tool (like Figma or Sketch). In order to achieve a good result, the designer must follow specific design guidelines and best practices.

Design Import start

From the GeneXus toolbar, go to Tools and select the Design Import option.

Design Import options

Once the dialog is opened, the settings for importing a new design file will be displayed.

Path/URL/File option

Used for linking or selecting a design file from a file system using the Select File button.

Keep in mind that:

• Local files must have any of these extensions:

  ○	.sketch
  ○	.gxsketch
  ○	.sketchcloud
  ○	.gxsketchcloud

   
• Remote file links must reference any of these domains:

  ○	www.figma.com/file/*
  ○	any publicly accessible file link, downloadable via a GET request (e.g., https://files.genexus.com/pub/TravelAgencySample.gxsketch). For more information, see the FAQ and Troubleshooting article.

Access Token option

Used for entering a service access token when importing design files from tools that require authentication (like Figma access token).

Style option

Used for indicating the Design System Object name where tokens and styles will be created. Either a custom name for creating a new object can be typed, or an existing Design System object from the Knowledge Base can be selected. If this field is left empty, GeneXus will suggest a new name based on the name of the design file that is being imported.

Module option

Used for indicating the Module object where the objects will be created. By default, objects are placed in the Root module.

Keep in mind that using a dedicated module for the imported objects helps to avoid naming conflicts with existing objects in other modules, thereby preventing accidental overrides.

Import as Web Panels checkbox

Used for indicating whether to create a Web Panel object (when checked) or a Panel object (when unchecked) for each screen in the design file.

Keep in mind that:

• Panel objects are meant for both Mobile and Angular applications.
   
• Multi-experience apps (with mobile and desktop variants) must follow the Multiple Layout conventions.
   
• When importing your design as Panel objects, a Menu object will also be created for navigation purposes

Fit Images checkbox

Used for indicating whether to fit images within the preview section (when checked) or to retain their original size (when unchecked), adding a scrollbar for better visualization.

Select File button

Used for selecting a design file from your file system. The Path/URL/File option will automatically be updated once a file is selected.

Once the Path/URL/File option is set, either by selecting a file in the file system or by manually inputting a file link, the button’s caption will change to “Load File”.

By clicking the “Load File” button, GeneXus will start loading your design file for inspection, while displaying a sequence of progress messages, keeping its full trace visible for any error that may be raised.

Finally, you will be able to see the preview section, which displays what GeneXus has inferred from your design file, before actually creating objects in the Knowledge Base. At this stage, the button’s caption will change to "Reload File" (as shown in the following section), enabling you to refresh the preview content.

Design Import preview

After loading a design file, GeneXus displays a preview of the objects that will be imported.

The preview screen is divided in two main sections:

• On the left side, it displays a tree structure of the objects to be imported.
• On the right side, it displays contextual information for the selected item, organized in tabs.

You can select or deselect objects in order to customize what objects are going to be imported into the Knowledge Base. Please note that the dialog does not currently validate dependencies between the objects to be imported; therefore, proceed with caution when deselecting items as it may result in import errors.

Panels or Web Panels node

Lists every Panel object or Web Panel object to be created, depending on the value of the Import as Web Panels checkbox.

Contextual information includes:

• Composition
  An image reference of the selected panel’s layout and the inferred GeneXus Controls in a tree view.
   
• Layout
  A GeneXus Markup Language (GXML) representation of the selected panel’s layout.
   
• Source
  An overview of the Events, Variables, Structured Data Type and Data Provider definitions. These last two objects will be created in the Knowledge Base under a “Test” folder object.

When the Import as Web Panels checkbox is unchecked, and the design adheres to the Multiple Layouts conventions, panels may include nested panels representing their layout variations. These variations are indicated with proper suffixes for identification, such as (Web), (Phone), (Phone Landscape), etc.

Stencils node

Same as Panels or Web Panels node but listing every Stencil object. These objects will be created in the Knowledge Base under a “Stencil” folder object.

Images node

Lists every Image object to be created.

Contextual information includes:

• Composition
  A preview of the selected image is displayed here with its original size if the Fit Image checkbox is unchecked.

If the design file includes images with resolution variations (e.g. 1x, 2x, 3x, etc.), the base resolution image will define the object's names in the Knowledge Base and the variations will be nested in the tree view.

Fonts node

Lists every font File object to be created.

Contextual information includes:

• Composition
  A preview of the selected font is displayed here, using a pangram sequence for displaying size variations.

Design System node

Describes the Design System Object to be created.

Contextual information includes:

• Tokens
  The Design System Tokens section is displayed here, including each color defined in the Color styles of your design file.
   
• Styles
  The Design System Styles section is displayed here, including:

  ○	A standard Design System Class with an “ExternalDesign” prefix is defined for each supported GeneXus Control (e.g. “ExtenalDesignButton” class is defined as the parent class of classes associated with Button controls).
  ○	A Design System Class is defined for each Text style, Layer style, or layer without an associated style found in your design file. For more information, see Best Practices article.
  ○	A Font-face style rule is defined for each used font file.

Design Import execution

Once you have inspected the preview section and finally decide to import the design into your Knowledge Base, you simply click on the "OK" button and you will be able to see the import progress execution in the Output Window (General view).

After the importing process has finished, the new objects will be accessible in the KB Explorer.

In case you imported a local design file (e.g. a Sketch file), an additional File object will be created as a backup for your design file (having the "+backup" suffix).

Keep in mind that the backup file will be overridden if additional imports of the same file are made. However, you will be able to inspect or recover the object’s previous versions from the object History. In addition, you can always perform a "Save" operation if you want to download said backup file.

Notes

• To enhance the experience when using the Design Import option, the following values will be saved after loading a file’s preview and automatically restored if the dialog is closed and reopened:
  - Path/URL/File option
  - Access Token option
  - Import as Web Panels checkbox

See Also

Guide for designers
Guide for developers
GeneXus Markup Language (GXML)
Export design