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.
The developer will appreciate you follow these rules.
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.
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.
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.
Sketch Links, Figma Interactions.
- 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.
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:
Sketch Images, Sketch Exportable Layer, Figma Images, Figma Exportable Layer.
- GeneXus supports .png, .jpg, .jpeg, .gif, and .svg image formats.
- Those layers exported as images for PNG/JPEG requires 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. 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.
Sketch Text Layer, Sketch Text Styles, Figma Text Layer, Figma Text Style.
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 Styles as style-classes in the Design System Styles section. If your Fill/Border styles define colors, they will be added to the associated the Design System Tokens section, specifically in the #color group, and referenced by the target style-class.
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 better understand the application and how to interact with it.
GeneXus will interpret Colors 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.
Sketch Color Variables, Figma Color Paints.
Resizing Constraints 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.
Sketch Resizing Constraints, Figma Constraints, Figma Auto-Layout Resizing.
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.
Creating fixed elements in Sketch, Creating fixed objects in Figma.
- 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