DesignOps - Guide for developers

Unofficial Content
This documentation is valid for:

This article aims to be a guide for those developers who start their application development by importing a design file, providing tips, and good practices. 

In Figure 1 you can see how should be a development workflow when you decide to start building your application with a design file. First of all, you import the file sent by your designer, who should have followed the guide for designers, conventions, and best practices articles in order to achieve a good-looking application for GeneXus. Then, you (as a developer) should check the generated objects and you must start a cycle checking how good it looks the application at runtime, deciding if it is your responsibility to fix the UI (e.g. in case the design file contains complex controls) or if it is the responsibility of the designer to fix something in the design. This cycle should be done in conjunction with both developers and designers, working together, before starting the business logic development.
 

Workflow_20201019123315_1_png
Figure 1. DesignOps workflow with GeneXus


In the early stages of a DesignOps cycle, it is recommended to design & import a single panel at a time. Following this mechanism, developers & designers can not only learn from each other but also they can see how the application starts growing. On the other hand, while a developer starts coding the designer can start drawing a new panel for the next iteration, repeating this cycle until you have a fully functional application.

Stencils

Stencil objects are generated from Symbols defined by the designer.

Remember these objects aim to be reusable in multiple panels, so check if you identify components in your application that should be reusable, tell your designer to make a new Symbol. Also, check if their instances are correctly applied (overridden values, theme-class applied, etc.) -- you can find those instances by looking at the References of the target stencil.

Panels

Panel objects or Web Panel objects are generated from Artboards defined by the designer depending if you checked the Import as Web Panel option or not.

The Layout tab of these objects will be generated from those Groups that the designer defined, and controls will be generated through the conventions applied. In every table, the cell sizes (width/height, absolute or relative) and positions will be generated from Resizing Constraints defined by the designer. Take in mind this when importing in case the designer forgot to apply some rules in the design for achieving a good result. Also, in case the designer had linked its Artboards, the Code tab will have the corresponding Call event, and a Form Enter/Exit effect transition is applied if the designer included animations.

Images

Image objects are generated from those images included in the design and also from those layers marked as Exportable (e.g. logos drawing by the designer). These images should have been exported by the designer with the correct densities (1x, 2x, 3x, etc.) in order to display them correctly in the target platform; otherwise, a black image is displayed as a placeholder.

Fonts

A set of File objects (.otf, .ttf) will be generated for every embedded Fonts in the design file. Then, those Files will be added in the Theme object, and finally set them in the corresponding theme-class (the Class property value of the target control).

Theme

A set of theme-classes will be generated in the Theme object you indicate in the Add To Theme option. Every control will have its own theme-class unless the designer had defined Styles for it. In case you reimport a design file, remember that the properties will be overridden in case you modified them by hand.

Each theme-class will inherit from a parent prefixed with a "Sketch" string. For example, if GeneXus infers a theme-class of a Variable, it will generate a theme-class of an Attribute class that inherits from a "SketchAttribute" class (analogously for other theme-class categories).

Color Palette

Color Palette object will be generated, named exactly the same as its respective Theme object, and will include those colors defined by the designer as Styles, especially as Fill, Border, or Text styles (every color will be suffixed with one of these three categories).

See also