Official Content

The GeneXus 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: 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 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 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 under the "Create New Prototype" section.

GeneXus Prototyper - Home 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 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 Access Token
    Provide your Figma access token.
    For more information refer to Export From Figma: How to get a Figma token.
  • 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 under the "Last Prototype" section.

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

Options:
  • Stop Building Prototype
    Allows you to cancel the building process.
Success (for Mobile & Angular)  
GeneXus Prototyper - Home - Success - Mobile and Angular Indicates the entire process is completed when the Generate For option is set with Mobile & Angular.

Options:
  • Show QR Code
    Displays a QR code meant to be scanned with GeneXus Project Navigator.
    GeneXus Prototyper - QR Code

     

  • Open Angular App
    Opens the Angular app in a new tab of your browser.
Success (for Web)  
GeneXus Prototyper - Home - Success - Web 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:
  • View All Links
    Lists every generated Web Panel.
Error  
GeneXus Prototyper - Home - Failed 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 - View Log

     

You can resend a new prototype every time by clicking on the Create button; except when it is processing, in which case you can abort the process by clicking on the Stop Building Prototype button. Additionally, if the plugin is open, you will receive an audible notification when the prototyping operation concludes, whether in a Success or Error state.

FAQ (Frequently Asked Questions)

Q: How does the plugin works?
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 takes 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).
   

Notes

See also

Export from Figma


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