The Email Love Figma Plugin allows you to add various types of links to your email designs, including UTM parameters for site analytics, URLs, and clickable sections. This guide will walk you through the steps to effectively add and manage links in your email designs, making your emails interactive and engaging for recipients.
To Add UTM Parameters for Site Analytics
A UTM code is a snippet of text added to the end of a URL to help your analytics software, e.g. Google Analytics, track and gauge your email campaign’s performance.
For more information on UTM code parameters, click here.
- Select the frame in your email design to which you want to add UTM parameters.
- On the Plugin interface, select the Properties tab, then add the UTM parameters that will be applied to all the links in your email. For example, specify the medium as "email" and include the campaign name. These parameters will be appended to all URLs within the email.
To Add Links
You can add links to images, buttons, and text, and render a section as a clickable image.
To Images
- Click on the image you want to add a link to.
- On the Plugin interface, select the Properties tab, then enter the URL you want the image to link to. Optionally, add alt text to the image, and an override image source to reference an externally hosted image.
To Buttons
- Click on the button frame you want to add a link to.
- On the Plugin interface, select the Properties tab, then enter the URL you want the button to link to.
To Text
- Highlight the word or words in the text block you want to link.
- At the top of the Figma interface, click on the Link icon and enter the URL you want to link to the selected text. The text will be underlined, indicating it is linked.
Rendering a Section as a Clickable Image
- Click on the wrapper you want to make clickable.
- On the Plugin interface, select the Properties tab, and select the option to render the section as an image.
- Enter the URL you want to link to the entire wrapper section. This will make the entire wrapper clickable as an image.
- Optionally, add alt text to the clickable image.
Example Usage
- Image Link
- Select an image of a product and add a URL to the product page.
- Add alt text such as "Product Image" for better accessibility.
- Button Link
- Select a call-to-action button and link it to a landing page or form.
- Text Link:
- Highlight the phrase "Click here for more information" and link it to a relevant webpage.
- Clickable Wrapper
- Make a banner section clickable by rendering it as an image and adding a URL to a promotional page.
Powered by