DesignOps - FAQ and Troubleshooting

Official Content
This documentation is valid for:

FAQ

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 can we reproduce your problem with much detail as possible. It will be very helpful if you provide a minimal design file (preferably .gxsketch) ready to reproduce (including every required asset). 
Also, feel free to contact our support team.

Troubleshooting

Why when you run your app it looks quite different from the design?

Cause Remember that the Sketch Inspector tool tries to approximate the design to GeneXus as close as possible and depends on how much tidy is your design file. Although, it may leak some scenarios that should be analyzed case by case.
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 Sketch 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. Anyway, feel free to contact support with your scenario and we will try to automate the GeneXus' object generation in a future release.

Known scenarios that are not considered during the import:
+ Navigation Styles for mobile apps
+ Underline text for mobile apps
+ Partial masking on images
+ Letter, line, and paragraph spacing
+ Text on paths
+ Gradient coloring
+ Fix position when scrolling
+ Color variables
+ Font variables

Why you have complex controls in your design file that were ignored during the import?

Cause Complex controls require complex treatment. GeneXus's limitations are limitations when designing in Sketch.
Solution  Keep your design simple. If there is a reason that you have to include a complex control in your Sketch (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.

Why after importing a design file, it overrides your previous changes?

Cause The Sketch Import tool does not merge changes, always overrides what you made.
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 made; then, inspect differences and merge it.

Why some controls in your objects are not generated as you 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 must be together in order to generate the appropriate tables containers. If the problem persists, feel free to contact support.

Why do you see black images when running your app?

Cause Black images are placeholders when your design file is not including 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.

Why controls are not being displayed well when swapping between devices or when you swap between portrait and landscape modes?

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. You and your designer can test if the result panel will be responsive by resizing the artboard that modeled the problematic panel. 

Why after importing a design file it generates a lot of theme-classes without reusing them?

Cause The import process generates a theme-class per control drawing by the designer unless your designer uses Styles when designing the application.
Solution  in order to reuse theme-classes, your designer must use Styles. Currently, GeneXus supports fill, border, and text styles.

There are differences between the design and the 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 iOS). That fact may produce differences between the design and the final result, and even between the platforms by themself.
Solution  It is a good practice to follow the design guidelines for a specific platform. If it is required to do not 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

Cause The font was not included during the import or the font source is not supported (e.g. variable fonts).
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 theme-class. If the problem persists, please send us your design file and font file so we can reproduce your problem.

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

Cause Color Variables defined in a design file are not currently supported.
Solution  Include these colors manually and update the theme-class references to them. A future release will automate this process. Stay tuned.

Why do you get 'Error validating formula expression: Upper(...' message 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 work-around, your designer must write the text uppercased or delete the break-lines. This issue will be fixed in a future release.

Why do you get 'Using a place holder as an image because...' message when importing a design file?

Cause The designer forgot to mark a layer as "Exportable" (e.g. icons, logos, etc.).
Solution  Tell your designer to mark as "Exportable" the layer indicated in the message.

Why do you get 'Error: cp: (...): No such file or directory' message when exporting your design using the Sketch plugin?

Cause Probably the file path indicated in "(...)" 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 "(...)" exists, it is fully in English and has no blank-spaces.

I have problems importing a Mobile design file and a Web design file into the same Knowledge Base

Cause After importing a design file, every theme-class created will inherit from a Sketch theme-class depending on its type (e.g. SketchAttribute, SketchTable, SketchTextBlock, etc.). When you import both design files (mobile and web) into the same Knowledge Base, it may raise some inconsistencies in the hierarchy (classes inheriting from web-classes instead of mobile-classes and vice-versa).
Solution  After your first import, rename every generated root Sketch theme-classes (e.g. 'SketchAttribute' by 'SketchAttributeMobile') and then import your second design file.