This document outlines the best-practices as well as the limitations you have to be aware when importing a Figma document into PRESENTA Template.
Figma is a powerful design editor with a lot of smart features meant to serve their rendering and prototyping engine.
PRESENTA is a image generation service for personalization purposes. It has its own rendering engine.
Both engines are very different.
The Figma-2-PRESENTA converter is a PRESENTA platform built-in feature that allows to import a Figma Frame into a PRESENTA Project. Its purpose is to give users the typical features of a modern design tool and at the same time providing automation capabilities from PRESENTA Platform.
Understanding the differences if key to get the most out of both tools.
Following the above TL;DR list is pretty much what you need in order to design your own PRESENTA Template.
Only a single Frame can be imported at a time. A Frame in Figma is a Project in PRESENTA. Also, only the first Page of the Figma document is imported:
You can grab the Frame URL using the contextual menu or by selecting the Frame and copy the URL from the browser address bar:
Only elements within the Frame container are considered by the importer:
This can be exploited to keep additional elements, annotations or other element versions around the Frame without affecting the import process.
Text boxes have to be in the root level of the Frame in order to be dynamic.
By mention an element “in root level of the Frame” means that it can’t be in groups, components or nested frames
Text in groups/components/nested-frames will be converted as static graphic elements
Text boxes requires an explicit fixed size of the textarea. It’s not strictly a requirement but without an explicit size, the textarea size will be set according to the text that contains. This can be problematic in dynamic Text box where you’d like to put other text, possibly longer than the default value.
Parameters in text boxes need to be definet with the following syntax:
Multiple text formatting in a single text box is supported
Image boxes have to be in the root level of the Frame in order to be dynamic
Medium/large images are better to be in the root level to avoid importer size limit
Image boxes can be masked by one single shape in order to keep its dynamic nature
Figma doesn’t know anything about QRCode. PRESENTA does.
The way to add a QRCode block is by using a simple Figma Rect to position and resize its bounding box, and put in the layer name the magic word
PRESENTA importer will recognise and convert it in a proper QRCode block, preserving position and dimension within the Frame. It is possible to use more than one QRCode by giving a variation of the name, such as
Here a list of possible solutions for specific cases we’re aware of: