Official Content

The GeneXus Next Prototyper plugin creates a fully functional application prototype, based on your Figma design by using the Design Import tool and hosting the application on GeneXus' Cloud.

Note: To ensure GeneXus Next Prototyper can accurately interpret your design, it is essential that your Figma design adheres to the documented best practices and conventions required by the Design Import tool.

Note: This plugin works from design to runtime. This means that designers do not control the objects, layouts and controls generated by GeneXus. But this plugin does not replace the developer's role through the complete workflow. It rather aids designers in reducing the adjustment phase of that cycle.

Installation

Install the plugin from this website: Figma Community | GeneXus Next Prototyper.

For more information on how to install a plugin in Figma, please refer to Figma Help | Use plugins in files.

Usage

1. Get your access key

Open the plugin and in the login screen click on the Get Access Key link. This action will open a GeneXus website in your browser where you can obtain your access key in three easy steps.

Select your desired option Enter your user credentials Generate and copy your access key
GeneXus Prototyper - Login (step 1)   GeneXus Prototyper - Login (step 2)   GeneXus Prototyper - Login (step 3)

 

Go back to Figma and paste the access key in the "Access Key" field. Then, click the "Log In" button.

GeneXus Prototyper - Login with Access Key Options:
  • Get Access Key
    Input for your access key.
  • Log In
    Access to home screen.

2. Set up the environment

After you successfully log in, you must set up your prototype environment.

GeneXus Prototyper - Home (Settings) Options:
  • Generate For
    Specifies to prototype the design for either Web or Native mobile. Equivalent to the Import As Web Panel checkbox in the Design Import dialog in GeneXus. It also allows enabling/disabling Android, iOS, and Angular generators for optimizing response times.
  • GeneXus Version
    Specifies the GeneXus version to be used for prototyping.
  • Figma Access Token
    Provide your Figma access token.
    For more information refer to Export From Figma: How to get a Figma token.
  • Figma File Link
    Provide the link to your Figma file.
    If you are using a web browser, copy the link from the address bar and paste it here. Alternatively, if you are using the Figma desktop app, right-click on the file tab, choose the Copy Link option, and paste it in this field.
  • Figma File Version
    Allows you to choose a specific (and previously frozen) version of your Figma file in addition to the current version of the document.
    Learn how to freeze a Figma version in Export From Figma: How to save a Figma version.

When you're done setting up your prototype, you can click on the "Create" button and the plugin will send your design to GeneXus' servers for importing, building, and deploying it.

3. Start working with your prototype

When you start working with a prototype, you can get one of the following states.

Processing  
GeneXus Prototyper - Processing state Indicates that the import, build and deploy process is in progress.

Options:
  • Stop Building Prototype
    Allows you to cancel the building process.

 

Note: If the plugin is open, you will receive an audible notification when the prototyping operation concludes. You can adjust or mute the notification volume in the user settings.

Success (for Mobile & Angular)  
GeneXus Prototyper - Mobile success state Indicates the entire process is completed when the Generate For option is set with Mobile & Angular.

Options:
  • Open Mobile Apps / Open Android App / Open Apple App
    Displays a QR code meant to be scanned with GeneXus Project Navigator.
    GeneXus Prototyper - QR Code
    Depending on the Generate For  configuration, the button caption and available options in the displayed QR section will change if you select both Android and iOS, or just one of them.
  • Open Angular App
    Opens the Angular app in a new tab of your browser.
  • Back to settings
    Return to the settings screen where you can reconfigure your prototype to create a new one or forward to this state.
  • Regenerate
    Regenerates the prototype using exactly the same configuration you set.
  • Finish
    Closes the plugin.
Success (for Web)  
GeneXus Prototyper - Web success state Indicates the entire process is completed when the Generate For option is set with Web, listing a few links for the generated Web Panels.

Options:
  • Show All Links
    Lists every generated Web Panel.
    GeneXus Prototyper - Display all web links
  • Back to settings
    Return to the settings screen where you can reconfigure your prototype to create a new one or forward to this state.
  • Regenerate
    Regenerates the prototype using exactly the same configuration you set.
  • Finish
    Closes the plugin.
Error  
GeneXus Prototyper - Failure state Indicates the process has failed.

Options:
  • View Log
    Displays error details that you can share with your developer or with the GeneXus support team.
    GeneXus Prototyper - Log
  • Back to settings
    Return to the settings screen where you can reconfigure your prototype to create a new one or forward to this state.
  • Try Again
    Tries to regenerate the prototype again using exactly the same configuration you set.

4. Access to user options

When you click on your name in the upper bar and you can access to a set of user options.

GeneXus Prototyper - User settings Options:
  • Notification Volume
    Allows you to adjust the notification volume for prototype creation alerts
  • Help
    Opens this document in your browser.
  • Logout
    Logs you out of the application.

FAQ (Frequently Asked Questions)

Q: How does the plugin work?
A:  Server side solution is based on GeneXus .NET Generator technology and relies on GeneXus Deploy To Cloud feature for deployment. Client side solution will be based on your configuration when create a prototype, and could refer to: GeneXus Native Mobile Generator (for Android and iOS), GeneXus Angular Generator or GeneXus Web Generator.
   
Q: How much time does it take to create a new prototype?
A: Depends on the file size (how many layers, bitmaps, and fonts are used) and how many generators are enabled when you create the prototype. Also, it depends on the availability of our servers processing every file from other users using the plugin.
   
Q: How many prototypes can I create using the plugin?
A:  Just one prototype deployment per design file is allowed. If two or more users open the plugin in the same file, they will all see the same last deployment information (regardless of which user has created the prototype). Only the latest prototype deployment will be hosted (for a maximum of 3 months). When a new prototype is created, the previous prototype deployment will be permanently deleted (every link referencing the deleted prototype will become unavailable).
   
Q: Why does the plugin never finish processing?
A: This issue may be related to a known problem in the early versions of the plugin. Usually, this problem is solved by closing and reopening the plugin. If that's not your case, contact us at GeneXus Support providing details on how to reproduce your problem.
   
Q: Why do I consistently get error state after prototyping?
A: There could be multiple reasons. Please inspect the provided log carefully to identify the issue (errors will be highlighted in red). Often, these errors can be resolved by redesigning the problematic panels. In that case, we recommend using a divide-and-conquer strategy removing elements until you find and address the issue. Less commonly, the errors may result from generating the model or deploying the application in our cloud; if you believe this to be the case, contact us at GeneXus Support for assistance.
   
Q: Why the Figma File Version field is not loading all my saved versions?
A:  Only the top 10 most recent versions are displayed. The plugin searches through the latest 50 versions, including both manually saved and auto-saved versions, to determine which ones to display. Additionally, for Starter plan members, only versions from the past 30 days are considered. For more information, please refer to Figma Help | View a file's version.

Notes

See Also

Export from Figma
Layers conventions
Design best practices


Last update: April 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant