The GeneXus Design Assistant plugin automatically generates the Figma design (the front-end) of a GeneXus Next No-Code Start application, using Generative Artificial Intelligence (Generative AI).
Install the plugin from this website: Figma Community | GeneXus Design Assistant.
For more information on how to install a plugin in Figma, please refer to Figma Help | Use plugins in files.
Note: If you are a designer lacking knowledge or interest in GeneXus Next, you may skip this step, but you should request the Application Web URL and Application Access Key from your developer.
Go to the GeneXus Next website and log in (or sign up).
Then, create a new project on GeneXus Next, wait until the process is finished (you will be notified by email), and open your generated project through the Menu > My Projects option.
Once you open your project, you will see a section like this:
Finally, get the Application Web URL and the Application Access Key as follows:
- Click on the Access Key tab.
- Click on the Copy button for the Access Key section. This key will be your Application Access Key.
- Click on the Copy button for the Backoffice URL section. This URL will be your Application Web URL.
Go back to Figma, open the GeneXus Design Assistant plugin, and set up the parameters for generating a new application flow.
Warning: Do not close the plugin in any stage. You can use the resize icon in the upper right to minimize or maximize. If you close the plugin, the process will restart from the beginning.
 |
Options:
- GeneXus Next Web Application URL
The Web Application URL you obtained in step 1.
- GeneXus Next Application Access Key
The Application Access Key you obtained in step 1.
- Platform
The target platform for generating the design (mobile or web).
Note: Only mobile is allowed until future releases.
- Describe your project
A brief description of the design to be generated (considered as a prompt for the Generative AI).
- Generate Application Flow
Starts the generation process for an initial application flow, and continues with the following step: Flow.
|
Note: The GeneXus Next Web Application URL information is required for fetching the source prompt and data model from the Application you (or your developer) have created, enabling a comprehensive understanding by the Generative AI before the plugin generates the screens for your solution. Additionally, the GeneXus Next Application Access Key is required to access the aforementioned URL, specifically for reading its OpenAPI specification.
After generating the initial application flow, it's important to review results to either accept or reject them (by regenerating a new one).
 |
Options:
- Restore
Allows you to restore a previously generated flow (only available after regenerating).
- Generate New Flow
Creates a new application flow, considering that the previous flow was not good enough.
- Keep Flow
Accepts the generated application flow, and continues with the following step: Wireframes.
|
Configure how the initial set of wireframes is generated.
 |
Options:
- Generate wireframes for the complete flow
Generates a set of wireframes for the whole set of nodes in the application flow.
- Generate wireframes for an individual node
Generates a single wireframe from an individual node in the application flow.
Note: Disabled until future releases.
- Generate Wireframes
Starts generating the wireframes.
|
When the initial wireframes are generated, you have to review the results and either accept or reject them (by generating a new set of wireframes). Please note that the wireframes are not intended to be editable, meaning any alterations made before generating the final screens will not be considered.
 |
Options:
- Restore
Allows you to restore a previously generated flow (only available after regenerating).
- Generate New Ones
Creates a new set of wireframes, considering that the previous set was not good enough.
- Keep Wireframes
Accepts the generated wireframes and continues with the following step: Look & Feel.
|
At this point, GeneXus Design Assistant will recommend you a set of color styles (palette). Each color is followed by a brief description of its purpose.
 |
Options:
- Try Again
Regenerate a new set of color styles.
- Use these Color Styles
Accepts the proposed color styles for the final application, and continues with the text styles selection.
|
GeneXus Design Assistant will then recommend a set of text styles. Each text style is followed by a set of properties (font-family, font-size, etc.) and a brief description of where to apply them.
 |
Options:
- Try Again
Regenerate a new set of text styles.
- Use these Text Styles
Accepts the proposed text styles for the final application, and continues with the generation of the final application.
|
After completing the wizard, GeneXus Design Assistant will generate the final application drawing, applying the color and text styles to the wireframes. At this point, you can start all over again.
 |
Options:
- Start New
Restart the complete process from the beginning.
|
Finally, the designer can make any adjustments deemed necessary before creating a prototype for it using the plugin GeneXus Prototyper for Figma or even import it directly into GeneXus using the Design Import option to see the generated objects before running the app.
- Each stage (flow, wireframes and screens) is generated in a new page named as: UserFlow, WireframePage and ScreenPage.
- Rembember that Figma's free tier accounts allow 3 pages per file. For more information, refer to Figma | Pricing documentation.
Export from Figma
GeneXus Prototyper for Figma