My First Design System

Official Content
This documentation is valid for:

This Knowledge Base was created as part of the first steps to implement a Design System for a multi-experience application for a travel agency.

It has three Design System Objects, and each of them is an extension of the previous one.

  • TravelAgency was a first version for Web that was extended in the next DSO, TravelAgencyFrontendExtended.
  • TravelAgencyFrontendExtended will be used by all Web Panel and related objects (it imports the TravelAgency DSO). It will also be used by Panels for Angular. 
  • TravelAgencyMobileExtended will be used by objects of Panel type not Web. It is an extension of the DSO TravelAgencyFrontendExtended.

The application was tested only for Web Panels in a .Net environment and Panels generated for Angular on an Android phone.
It allows testing the main features of the Design System Object.

All the objects were created in folders within a module called "Manual" to distinguish it from another option, which would be to import from Sketch the design made by the designers. 

Run the Home_web Web Panel and the Home Panel to view the implemented design at runtime.


Since GeneXus 17 Upgrade 6.


Start Video Cómo modelar: herencia entre Design System objects (DSO’s).
Start Video Cómo modelar: modificar clases de acuerdo a tamaño de pantalla.
Start Video Cómo modelar: propiedades específicas de GeneXus para clases en DSO.
Start Video Cómo modelar: Design System para aplicación mobile nativa.
Start Video Cómo modelar: Design System para aplicación Angular.

Subscribe to KB feed
KnowledgeBase MyFirstDesignSystem
GeneXus Server URL here
No news available on this feed