Official Content

Designers can send designs made in Figma format to developers. Then, developers can import these designs using the Design Import option in the GeneXus IDE.

How to send a Figma design

When a designer sends a design, it should include a Figma URL and provide an Access Token in case the developer does not have an account in Figma or cannot access the Figma project.

The Figma URL must have the following format:
https://www.figma.com/file/:key/:title[?version-id=:version]

How to get a Figma token

  1. Log in into your Figma account
  2. Go to the Home page
  3. Click on your user icon on the right side of the app bar and go to "Settings" options
  4. Scroll down to the "Personal access tokens" section
  5. Input a token description (e.g. 'gx-project') and hit the enter key on your keyboard
  6. Copy the token you received, you will not be able to see it again. Either way, you can always delete the token (by using the "Revoke access" option) and generate a new one.

How to save a Figma version

It is highly recommended to save a snapshot of the Figma file before sharing the Figma URL, which includes the version-id parameter.

The snapshot can be saved by going to File > Save to Version History in Figma, and Figma will ask you for a revision title and revision description as follows.

DesignOps - Export design - Figma - Save snapshot   DesignOps - Export design - Figma - Save snapshot - Comment

 

Finally, you can get the snapshot URL by going to File > Show Version History, selecting your snapshot, and clicking on the Copy Link option.

DesignOps - Export design - Figma - Show snapshot   DesignOps - Export design - Figma - Show snapshot - Link

 

Now you can share your link with a developer who can use the Design Import option for importing your design into GeneXus.

How to include custom fonts

If you are using Figma fonts, GeneXus will try to get them from Google Fonts but this process might not work in every case. In case the developer had experienced issues with the font files while importing the design file into GeneXus or if you are using custom fonts (not provided by Figma), you have to deliver the font files to the developer and the developer must install them on the development machine (in Windows, installation have to be done by right-clicking and selecting "Install for all users" option).

Scope

See also

Guide for designers
Design Import option

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