Official Content

Below you can find some frequently asked questions (FAQ) and Troubleshooting about DesignOps.

FAQ (Frequently Asked Questions)

1. How can you report an incident?

You can open a thread in our Technical Forum and our team will be pleased to help you. Describe how we can reproduce your problem as detailed as possible, including the error detail. When the error is displayed in the import dialog, the complete error trace can be obtained by clicking on the "show error" icon (image_2020116144227_1_png). It will also be very helpful if you provide a minimal design file (preferably a .gxsketch or an URL) ready to reproduce (including every required asset).
Also, feel free to contact our support team.

2. How can you import a design that includes fonts in .ttc or .otc formats?

Modern browsers do not support neither .ttc (TrueType Collection) nor .otc (OpenType Colelction) file formats. So, it is highly recommended your designer avoids using these file formats in your design files. In the first place, these file formats (as their names suggest) packs a set of .ttf (TypeTrue Format) or .otf (OpenType Format) font files into a single file but, like most software, they are under a term of use (known as End User Licence Agreement or EULA), and you have to be allowed to use them. In case you have a .ttc or .otc font file and you are allowed to use it, you must unpack their individual .ttf or .otf files (online services like transfonter makes the job). Then, in order to import them to GeneXus, you have two alternatives:

  1. Replace every occurrence of the original .ttc or .otc file in your design files by their respective .ttf or .otf files [RECOMMENDED]
  2. Or, you can create a folder in the same location of your design file with the exact name of the design file suffixed by "Fonts" and put every .ttf or .otf into it.
    e.g. if your design file is called "My Design.gxsketch", you will create a folder named "My DesignFonts" (note that spaces are significant) and then you will put the .ttf or .otf into it before importing the design file.

3. Can you export a design from other tools and then import the converted design to GeneXus?

You can export/convert a design from other tools (e.g. Figma, Adobe XD or Lunacy to Sketch format), but you have to be careful. A conversion process might contain inconsistencies or flaws that have a direct impact on the final result. In that sense, it is highly recommended that you open the exported/converted design in the proper tool (e.g. if you are converting from .xd to .sketch, open that .sketch in Sketch) and check everything is drawn and structured as it is expected (symbols, styles, color variables, anchors, etc). Also, remember that the file itself might not contain all the required resources when importing into GeneXus (e.g. fonts or exported images), so it is recommended that you read Export design article carefully first.

Contact Unanimo.Design if you need help converting your design into a GeneXus' supported format.

4. Can you import a design by indicating an URL instead of a local file path?

Since GeneXus 17 upgrade 7 you can, but your URL must be accessible and must force the download of the file. In other words, the URL of your design will only work in GeneXus Design Inspector if you paste your URL in your browser and the download will automatically start (without redirects, authentications, etc). Take some examples for TravelAgencySample.sketch:

  • Custom hosting: https://files.genexus.com/pub/TravelAgencySample.gxsketch
    The design file is hosted in a public directory (/pub) that can be directly accessed by the browser for downloading. This URL will work in GeneXus Design Inspector without any problem.
  • Dropbox hosting: https://www.dropbox.com/s/uzvma6iku9kyn9t/TravelAgencySample.gxsketch?dl=1
    The design file is hosted at Dropbox and the file will be forced to download due to "dl=1" parameter (learn more). You can paste this URL in your browser and you will notice that the file will start downloading, so this URL can be used in GeneXus Design Inspector without any problem.
  • Google Drive hosting: https://drive.google.com/u/0/uc?id=1iX-rBOW8PP70Fx9JJdOre2yKyHwtHf5G&export=download
    The design file is hosted at Google Drive and it adds the "export=download" parameter in order to force de download but Google has a redirect for a virus scan bypass (this is added by Google when the file is relatively large). So, in this case, the URL will not work in GeneXus because the file cannot be directly downloaded (you can check the virus scan bypass redirect by copying the URL in your browser).

Troubleshooting

The app's appearance differs significantly from its intended design when it is run.

Cause Remember that the Design Import option tries to approximate the design to GeneXus as close as possible and depends on how tidy your design file is. However, some scenarios can leak and should be analyzed one by one.
Solution

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.

Missing feature Support status
Blend mode -
Color Variables (Sketch) & Color Styles (Figma) Available since GeneXus 17 upgrade 1
External libraries -
Fix position when scrolling Available since GeneXus 17 Upgrade 9
Flipping Available since GeneXus 18
Font collection (ttc/otc formats) Won't implement.
Please check: FAQ: How can you import a design that includes fonts in .ttc or .otc formats?
Font variables (woff2 format) -
Format text range -
Gradient coloring Available since GeneXus 17 upgrade 7 (for web apps)
Hotspots links -
Letter spacing Available since GeneXus 17 upgrade 7 (for web apps)
Line spacing Available since GeneXus 17 upgrade 7 (for web apps)
Navigation Styles for mobile apps Available since GeneXus 17 (for Sketch designs, for Figma check f/14993)
Paragraph spacing -
Partial masking on images -
Rotation Available since GeneXus 18
SVG images Available since GeneXus 18 (for web and angular apps)
Text on paths -
Text underline -
Tints -
Underline text (for mobile apps) -
Variations Available since GeneXus 18
WebP images -
Figma
Variables (Number, String, Boolean, and Color) and Variables Collection definition Won't implement it until Figma's official release. Variables are currently in open Beta and subject to breaking changes (more information at Figma Developers: Variables).
Wrap on Auto-Layouts Modeling Flex Grids available since GeneXus 18 Upgrade 5.
Modeling Flex Tables is planned for upcoming releases.
Min/Max Width/Height -
Canvas Stacking Order Available since GeneXus 18 Upgrade 5.
Directional transition and Back transition in Prototypes Unable to implement due to missing metadata.
Support us on this Figma's forum post.
Expressions, Actions and Conditionals in Prototypes using variables Unable to implement due to missing metadata.
Support us on this Figma's forum post.

Complex controls present in the design file are not generated during the import process.

Cause

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

Solution

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.

Importing a design file overrides any previous changes made to the app.

Cause

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

Solution

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.

Some controls in objects are not generated as expected.

Cause

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

Solution

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.

Images appear as black squares when the app is running.

Cause

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

Solution

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.

Controls do not display properly when switching between devices or changing from portrait to landscape mode.

Cause

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

Solution

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.

Importing a design file results in the generation of numerous style classes without reusing them.

Cause

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

Solution

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

Design elements have inconsistencies when viewed across different platforms.

Cause

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.

Solution

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.

Some fonts are not displayed in the app.

Cause

The font was not included during the import or the font source is not supported (e.g. .variable fonts .woff2 or font collections .ttc).

Solution

Check if your font has been created as a File object in your Knowledge Base. If so, check if there is a Font node in the generated Theme object that references the File object with your font. Finally, check if the Font node has been referenced by the target style-class. If the problem persists, please send us your design file and font file so we can reproduce your problem.

The design file specifies a color palette that is not included in the Color Palette object.

Cause

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

Solution

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

An error message 'Error validating formula expression: Upper(...' appears when importing a design file.

Cause

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.

Solution

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

A warning message 'Using a placeholder as an image because...' appears when importing a design file.

Cause

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.).

Solution

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

An error message 'Error: cp: %1: No such file or directory' appears when exporting a design file using the Sketch plugin

Cause

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.

Solution

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

Importing both Mobile and Web design files into the same Knowledge Base may cause inconsistencies in the class hierarchy if the style is a Theme object

Cause

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.

Solution

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

A text-layer is imported with a single color when multiple colors were defined in the design.

Cause

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

Solution

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.

The box-shadows are not correctly displayed when importing for mobile.

Cause

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.

Solution

If you are using Sketch, we recommend Elevation-Shadows Sketch extension by YitingLiu for designing mobile shadows. This extension maps box-shadows into material-design elevations correctly.

Styles changes are not being applied to the grid's items.

Cause

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

Solution

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

The import process creates a Design System object and there is no possibility for creating a Theme object instead.

Cause

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

Solution

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.

An error message 'Error reading %1: Sketch file is missing' appears when attempting to load a design file.

Cause

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

Solution

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)

An error message 'Design file "%1" could not be found' appears when opening the Import Design dialog.

Cause

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.

Solution

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

Certain images appear with a blue tint when running an Apple app.

Cause

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

Solution

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

Some images do not display properly on the Web at runtime, despite having the correct gx-content-mode (or Scale Type) property set.

Cause

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.

Solution

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

fill-keeping-aspect cover
fill fill
fit contain
tile not supported by object-fit

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.

An error message '%1 is not a valid event' appears while importing a design.

Cause

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

Solution

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.

A warning message 'Could not get font {font-name}' appears when importing from Figma.

Cause

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

Solution

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.

Certain layers are not visible after importing the design file.

Cause

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

Solution

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.

An error message 'Cannot unmarshal type {0}: {1}' appears when importing from Figma.

Cause

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.

Solution

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.

Navigation links defined in an instance layer are not generated when importing from Figma.

Cause

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

Solution

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).

Texts overflow the cell container when importing for Web.

Cause

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

Solution

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


Texts are either clipped to the cell or displayed with line breaks.

Cause

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.

Solution

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




Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant