DesignOps - FAQ and Troubleshooting

First, check if the design file follows the designer guidelines to achieve a good result. If that is not enough, think if that design can be modeled with GeneXus. If not, the developer must implement a custom solution (e.g. a User Control) and integrate it with what is imported from the design file. if you think that you can model the scenario with GeneXus but it was not generated during the import, add it manually in order to achieve the expected result. Feel free to contact support with your scenario and we will try to automate GeneXus' object generation in a future release.

Complex controls require complex treatment. GeneXus's limitations are limitations when designing.

Keep your design simple. If there is a reason that you have to include a complex control in your design (e.g. a stepper), let it know to the developer in order to manually implement it. Complex controls like Calendars, Graphs, or Maps should be marked as "Exportable" in order to display them as images that can be easily replaced by the developer.

The Design Import option does not merge changes, and always overrides what you have created.

Merge must be done manually. Before import, it's highly recommended to indicate a new Theme object name and package your objects into a module in order to not override what you have created. Then, check for differences and merge them.

The design may not follow the guidelines to achieve a good import.

First, check with your designer the guides and conventions to achieve a good import. Remember that the designer must group everything that has to be together in order to generate the appropriate tables containers. If the problem persists, feel free to contact support.

Black images are placeholders when your design file does not include the appropriate image for displaying it.

Check if the image is included with your design file. If it is included, check if that image includes every density variant needed (@2x, @3x, @4x), and, in case some of them are missing, tell your designer to export it with missing densities. Also, check with the designer if complex shapes (e.g. custom icons, logos) were marked as 'Exportables'. If the problem persists, feel free to contact support.

The design file does not contain information for making your app responsive.

Check with your designer if controls are anchored or if they have fixed sizes when they required it. Both of you can test if the result Panel will be responsive by resizing the artboard that modeled the problematic Panel.

The import process generates a style-class per control drawn by the designer, unless your designer uses Styles when designing the application.

In order to reuse style-classes, your designer must use Styles. Currently, GeneXus supports fill, border, and text styles.

GeneXus always tries to follow the standard design guidelines for each platform (e.g. Material Design for Android, or HIG —Human Interface Guidelines— for Apple). That fact may produce differences between the design and the final result, and even between the platforms themselves.

It is a good practice to follow the design guidelines for a specific platform. If it is required not to follow the guidelines, it is up to you to develop a custom solution and then integrate it into the object that was imported from the design file.

The font was not included during the import, the font source is not supported (e.g. .variable fonts .woff2 or font collections .ttc) or there could be a naming mismatch.

Check if your font has been created as a File object in your Knowledge Base. If so, check if there is a @font-face rule in the Design System object using the gx-file function referencing the File object with your font.  (*). Finally, check if the @font-face is referenced by font-family value in the target style class. If you are working on a mobile environment, check Using Custom Fonts article for further troubleshooting. If the problem persists, please send us your design and font files so we can reproduce the issue.

(*) Alternatively, if you generated a Theme object, check if a Font node in the Theme object references the File object with your font. Finally, check if the target Theme Class has referenced the Font node.

Color Variables defined in a design file are supported since GeneXus 17 Upgrade 1.

Include these colors manually and update the style-class references to them, or upgrade to GeneXus 17 Upgrade 1.

Known issue. The designer combines upper-case and break-lines in a text element that produce the error when it tries to set the Initial Value of a variable.

As a workaround, your designer must write the text uppercased or delete the break-lines. This issue will be fixed in a future release.

The target images cannot be found. Usually, this problem suggests that the designer forgot to mark a layer as "Exportable" (e.g. icons, logos, etc.).

Tell your designer to mark the layer indicated in the message as exportable.

Probably, the file path indicated in "%1" may not exist or contains blank-spaces. Try to execute that command through the Mac terminal. Sometimes, when you copy a file path it translates some folders into another language that is not English.

Ensure the file path indicated in "%1" exists, it is fully in English and has no blank spaces.

After importing a design file, each theme class created will inherit from a specific parent class depending on its type (e.g., ExternalDesignAttribute, ExternalDesignTable, ExternalDesignTextBlock, etc.). However, if you import both mobile and web design files into the same Knowledge Base, it may lead to inconsistencies in the class hierarchy. For instance, some classes may unintentionally inherit from web classes instead of mobile classes, and vice versa.

After your first import, rename every generated root theme class (e.g. 'ExternalDesignAttribute' by 'ExternalDesignAttributeMobile') and then import your second design file.

GeneXus does not support colored substring in a text, either by an Attribute or a TextBlock style-class.

You must split your text-layer in your design in order to generate two or more Attribute/TextBlocks when each of them has a theme-class with the appropriate color. Alternatively, after you import your design into GeneXus, you can set Format property to 'HTML' and reformat your text by adding a <span style="color:{your_hex_color};"></span> in the substring.

When you design a mobile app, GeneXus will try to infer a material-design elevation from your box-shadow definition. This mapping is an approximation, so it can fail if you do not define it correctly.

You can define the exact shadow for each elevation value:

The mobile generators (Android and iOS) do not support the definition of gradients in the Design System object using linear-gradient(), radial-gradient(), or conic-gradient() functions as the Web and Angular generators do through CSS.

Currently, there is no solution for defining gradients when using the mobile generators, even when working with the Angular generator because the Import as Web Panels option consider both Angular and mobile generators when it is unchecked. As a workaround, you can create the gradient layer (e.g., a background) as a separate rectangle and export it as an image. This way, GeneXus replaces the gradient definition with an image. However, be aware that this approach has limitations if the gradient color needs to change over time, as you will need to re-import the images representing the gradient layers to reflect any changes in color.

Currently, GeneXus does not support changing grid item styles specified in the design.

You must manually create those styles in the Theme or Design System Object and associate them in the grid Load event for each cell.

Since GeneXus 17 Upgrade 6, the Import Design tool generates a Design System Object by default.

If you really need to generate a Theme object, you have to create a file ImportDesignStyleOption.flag under your GeneXus installation. Then, when you re-open GeneXus, the Import Design dialog will display an "Import as Design System" option (checked by default) and you need to clear it before importing your design. Take into account that the Theme object generation from the Import Design tool will no longer be maintained nor receive support.

GeneXus cannot find the sketch file indicated in the "File path" field of the Import dialog.

This error may occur on several occasions:
● The file path indicated does not exist in your filesystem
● The file path is a .gxsketch, generated with a .sketchcloud file (supported since GeneXus 17 Upgrade 6)

The import dialog stores the last five file paths you imported and it tries to load it for the last one, but that file is not in the filesystem anymore.

Recreate the file in the indicated path before starting the Import Dialog. This error is fixed since GeneXus 17 upgrade 7.

GeneXus import all your images as Image objects, but they have set Rendering Mode property with 'Automatic' value.

Open the Image object and change the Rendering Mode property in Images with 'Original' value for every image variation.

Both properties gx-content-mode (from Design System objects) and Scale Type (for Theme objects) apply for Images controls, not for Image variables. Even if the import generates the correct value for the mentioned properties, it will not generate Image controls, It will generate Image variables.

Use the CCS object-fit property and map the values of gx-content-mode (or Scale Type) as follows:

Since GeneXus 17 upgrade 7 you don't have to worry about this anymore. GeneXus will generate the appropriate object-fit when you import your design as Web Panels.

Your design defines a Link/Interaction that is unsupported in your GeneXus upgrade.

Consider upgrading your GeneXus installation and retrying to import your design. In case you have updated GeneXus and the problem persists, please contact our support team.
Eighterway, you can inspect the .gxml and .code.gxml files generated by the Import Design tool (located at {KB_DIR}/DATA001/DesignToGxml) in order to figure out which link is unsupported and then delete it from your design file (with help of your designer). Finally, you can implement the interaction after successfully importing your design.

The design uses a font provided by Figma that is not found in Google's repository, or it is a custom font.

You have to get the font file and install it for all users in the development machine before importing the design. In Windows, this can be done by right-clicking the font file and selecting "Install for all users" option.

You are probably using unsupported features that GeneXus does not understand, e.g. custom shapes or drawings, or external files or libraries.

In case you are using custom shapes or drawings, you have to group them semantically and make the group exportable as an image. On the other hand, if you are using external files or libraries, you have to detach every component from the external resource and replicated them in your design.

The design import tool does not recognize the value {1} for the property {0} because it is not documented by Figma and the import tool does not know how to handle it.

These kinds of errors will be fixed on demand. You must contact our support team indicating the error messages and a minimal example for reproducing the problem.
As of GeneXus 18 upgrade 1 these errors are treated as warnings and the complete layer is ignored.

Up to GeneXus 17 Upgrade 11, navigation links can only be defined in layers that are not part of a component's instance.

You should upgrade to GeneXus 18, as navigation links defined from layers in an Instance are supported. For older releases, you should define the same link but from its Component (not from the Instance) and you should define the Component on the same page where your linked Main Frame is (remember that prototypes in Figma are currently limited to single pages).

This is a known issue up to GeneXus 18 Upgrade 3.

Manually create a text cell class with the 'overflow: auto' property, or upgrade to GeneXus 18 Upgrade 4.

The designer might have defined the text box without sufficient vertical or horizontal space to ensure uninterrupted text display and prevent clipping or line breaks (especially due to ascender or descender lines). Additionally, the font-size and line-height should not exceed the height of the text box, and it is essential to check the touch-target values when designing for mobile apps.

Ensure adequate space and font sizing and respect touch-target values for mobile design.

When you define a symbol/component as Exportable, GeneXus treats it as an image. The Import Design tool will ignore any overrides applied to those instances, as well as any definitions in the nested layers of the component.

If you need a symbol/component to be marked as Exportable and also require applying some overrides on their instances, consider defining variants of that symbol/component, marking each variant as Exportable, and then instantiating them appropriately in your design.