This article aims to be a guide for designers in order to understand how GeneXus will interpret what you draw when designing an application.
Note: Before reading the article, you must know that there are two main rules for achieving a good-looking application on the first try:
1. Keep your design simple.
2. Be tidy when designing.
Adhering to these rules promotes a smooth collaboration, aligning designers and developers for an efficient workflow.
Used for reusing common elements in your design.
GeneXus will interpret these elements of your design as Stencil objects, and they will be named as they were named in your design.
Related readings:
Sketch Symbols, Figma Components.
Define the area where a designer will draw every panel of the application.
GeneXus will interpret these elements of your design as Panel objects (if it is a mobile application) or Web Panel objects (if it is a web application), and they will be named as they were named in your design preceded by a "View" prefix.
Related readings:
Sketch Artboards, Figma Top-Level Frames.
Allow the designer to define how the Artboards are related between them, including animations.
GeneXus will interpret these Links between Artboards as Calls between Panels or as a Return command in case of Back-Links, including a Form Enter/Exit effect transition when it has been set.
Related readings:
Sketch Links, Figma Interactions.
Notes:
- These interactions are modeled in GeneXus through the Event of the control that represents the layer with the link.
- Remember to avoid loops when designing the interaction through links between artboards.
- Animations are not supported for Figma files.
Allows the designer to organize and structure the design elements.
GeneXus will interpret these container elements in your design as a Table control when the contained elements are disjoint and can be positioned in a cell. On the other hand, when the elements overlap, GeneXus will interpret the container as a Canvas control. Additionally, since containers can represent semantic structures (such as grids, buttons, check-boxes, combo-boxes, radio-buttons, etc.), GeneXus requires a Convention to interpret the appropriate control.
Related readings:
Sketch Grouping Layers, Sketch Smart Layout, Figma Frames, Figma Group vs Frame, Figma Autolayout.
Images, as every designer knows, are resources of vital importance in any application to easily improve the user experience and captivate your audience. Also, there could be complex controls (like calendars) or drawings (like icons) that should be marked as Exportable in order to generate an image for them, and then the developer can easily integrate the real control into the application.
GeneXus will interpret both of these resources as Image objects that will be stored in the Knowledge Base and they will be loaded in the target panel as:
Related readings:
Sketch Images, Sketch Exportable Layer, Figma Images, Figma Exportable Layer.
Notes:
- GeneXus supports .png, .jpg, .jpeg, .gif, and .svg image formats.
- Those layers exported as images for PNG/JPEG formats require at least 1x resolution
- In case you want an image variable definition that fits its container but you do not want it to be a background-image reference (static behavior), you have to create a group/frame with just that image
Texts, as every designer knows, are fundamental elements in any design for the simple fact that they communicate information to the end-user, not only through the content itself but also in the way the information is presented, involving sizes, colors, distribution, typography, casing, anchoring (responsive behavior), etc. What's more, in order to reuse that 'pieces' of visual information you want to convey, it is highly recommended that you use text-styles.
GeneXus will interpret texts as Variables based on the VarChar data type that the developer can change if necessary. However, if the text layer is defined with the Static convention, the text will be interpreted as a Text Block control. On the other hand, every text will define a style-class in the Design System Styles section unless you define Text Styles, in which case those text-layers that share the same Text Style will also share the same Class property value (i.e. same style-class). If your Text Style defines a color, it will be added to the #color group in the Design System Tokens section and referenced by the target style-class.
Also, if your text has custom fonts, GeneXus will import them as File objects, include them in the Design System Styles section as a @font-face rule, and set them in the corresponding style-class.
Related readings:
Sketch Text Layer, Sketch Text Styles, Figma Text Layer, Figma Text Style.
Notes:
- GeneXus support .ttf, .otf, .eot, and .woff font file formats.
If your design has .ttc or .otc font files, refer to DesignOps - FAQ and Troubleshooting.
- Ensure you provide sufficient horizontal and vertical space for the text-box when content may vary in length or size.
Styles are meant to be a way to reuse visual design, distinguishing two categories: Text Styles (described in the previous section) and Layer Styles. For this last category, a designer is able to define Fills and Border styles.
GeneXus will interpret Text and Layer Styles as style classes in the Design System Styles section.
Related readings:
Sketch Styles, Figma Styles.
Colors aim to define a color scheme for your design. As you may know, colors can contribute to how your design is perceived by humans, helping them to understand better the application and how to interact with it.
GeneXus will interpret Colors Styles as elements of the #color group in the Design System Tokens section, which will be referenced by the target style classes defined in the Design System Styles. On the other hand, raw color definitions (using the hex representation) will be preserved as-is within the Design System Styles linked to the layer.
Related readings:
Sketch Color Variables, Figma Color Paints.
Notes:
Resizing Constraint is a vital feature for manipulating responsiveness in your design. Take into account that your application may run on devices of different sizes and resolutions. So, use fixed sizes when your layer must not grow or shrink, and pin-to-edge those elements that must not change their position.
GeneXus will interpret Resizing Constraints when it generates the Table control that will contain the controls the designer has drawn. Every control will be placed in a cell in the Table that will have a relative (%) or absolute (dips/px) size and position depending on the constraint you set. In case you overlap controls, GeneXus will generate a Canvas control instead but it also applies a Z-Order property in order to define the overlapping order.
Related readings:
Sketch Resizing Constraints, Figma Constraints, Figma Auto-Layout Resizing.
Notes:
- When the group/frame is defined as a table and the contained element has anchors, the remaining space between the cell and the control itself will be defined as margins.
Fix position when scrolling is a design property that allows you to lock an object's position and make sure it stays in the same location, even as you scroll. For example, header, footer or floating button.
GeneXus will interpret every element of your design that have checked the Fix position when scrolling property as part of the MainTable (set as a Canvas control). The elements that do not have this property marked will be part of Table control (whose Control Name property will have the "Scrollable" suffix).
In Mobile, the Table containing the elements without Fix position when scrolling has the properties Auto Grow property in False and Overflow Behavior property with Add Scroll value.
In Web, the style of the elements with Fix position when scrolling defined in the Design System Object have set 'position: absolute' and their respective location/sizes in the top, left, bottom, right, width and height properties.
Related readings:
Creating fixed elements in Sketch, Creating fixed objects in Figma.
Notes:
- If the elements with Fix position when scrolling unchecked are overlapped, then the scrollable Table (whose Control Name property has "Scrollable" suffix) necessarily becomes a Canvas and a Table wrap is made over the Canvas.
- Avoid applying for the Fix position when scrolling property to symbols/components. The position is defined with respect to the symbol and not with respect to the Artboard (or Top-Level Frame) where it is instantiated.
These sections apply as of GeneXus 17.
Guide for developers