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 with .Net environment and Panels on an Android phone and Angular.
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 un Design System desde cero.
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