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.
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]
- Log in into your Figma account
- From the file browser, click on your profile icon in the top-left corner and select Settings.
- Go to the Security tab.
- In the Personal access tokens section, click Generate new token.
- Set a description, choose an expiration period and enable the file content scope so GeneXus can read the design file.
- Click Generate token.
- Copy the token immediately and store it in a secure place. You won’t be able to view it again.
- If you lose it, you can always revoke the token and generate a new one.
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.
Finally, you can get the snapshot URL by going to File > Show Version History, selecting your snapshot, and clicking on the Copy Link option.
Now you can share your link with a developer who can use the Design Import option for importing your design into GeneXus.
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).
Guide for designers
Design Import option