How to Create Testimonial Themes with SVG Templates from Figma

To get started, a marketer or designer should first create a testimonial design in Figma. This design acts as a dynamic template — UserEvidence will automatically insert testimonial content based on specific layer names in your Figma file. When the design is exported as an SVG, those layer names become ID attributes that the platform uses to populate each testimonial’s details.

Use the following layer names to map testimonial attributes correctly:

The following section applies to all dynamic text variables described above. (Dynamic headshots are covered in the next section.)

There are two ways to structure your layers in Figma when using dynamic text:

​​Option 1: Single Text Layer
​
Use a single text layer with one of the supported variable names. This option works best for short, styled text that doesn’t need to wrap onto multiple lines.
​

Option 2: Group with Text + Rectangle
​
For longer text that may wrap, create a group using one of the supported variable names. The group should include:
​

​TIP: The order and position of your layers within the group don’t affect how your testimonial theme renders. The rectangle layer is used only to define the layout area — its visual appearance won’t be displayed.
​
This grouped structure lets you control both the style and layout of the dynamic text. If the text is too long to fit, it will automatically scale down to ensure all content remains visible. This auto-scaling only applies to the group structure — not the single text layer.
​

Refer to the screenshot below for examples of both structures.

To display a respondent’s headshot or avatar, apply the label HEADSHOT to an image layer in your Figma design. If available, the placeholder image will be automatically replaced with the respondent’s headshot.
​

The style, size, position, and any masking applied to the image layer will be preserved. If a testimonial does not include a headshot, the placeholder will simply be ignored during rendering.

In some cases, you may want a design element to appear only if a specific dynamic variable is available. For example, many themes include annotations or badges for NPS scores—but if a respondent hasn’t provided an NPS score, showing the annotation could look out of place.
​

To make any element conditional, wrap it in a Figma group and name the group using this format: IF_[VARIABLE_NAME].
​

For instance, to conditionally display an NPS annotation, wrap it in a group labeled IF_NPS_SCORE. The group and its contents will only appear if that dynamic value is present.

The structure shown in the image above will display the full speech bubble only when an NPS score is available. If there is no NPS score, the bubble will be hidden, preventing any empty or awkward blank space.
​

This conditional display pattern applies to all the other dynamic variables listed above.

When exporting your SVG, be sure to check the Include “id” attribute option and uncheck the Outline Text option.

These settings are not enabled by default, so you’ll need to update them once per design. After changing, Figma will remember your preferences. Your export settings should look like this:
​

There are two ways to export your theme as an SVG:

Method 1: Export via Export Panel

Method 2: Copy as SVG (Faster)

Some commonly used fonts — like Helvetica, Courier, or Times New Roman — are universally available and require no additional setup. You can use these safely in your design.
​
If your design uses custom or non-standard fonts, follow these steps to ensure they display correctly:

This ensures that your testimonial assets will render consistently with your intended typography across all platforms.