The Properties tab under the Email Love Figma Plugin interface allows you to apply various properties to different components of your email design. This includes adding metadata, customizing backgrounds, and linking URLs. Follow the steps below to understand how to use this feature effectively.
Layers that Support Properties
Before everything else, you will need to select a layer that you would like to apply properties to. The following layers are supported:
- Frame: Add a subject line, preview text, or UTM parameters to your overall email frame.
- mj-wrapper: Enables you to turn a section into an image, add a URL, or add a full-width background
- mj-image-frame: Add an image URL, alt text, or outside image destination URL
- mj-button-frame: Add a URL to your button
Using the Properties Tab
- Select the Properties tab within the Plugin interface.
- Select the layer from the list on the left of the Figma interface. The options displayed under the Properties tab change depending on the selected layer.
To Apply Properties to a Frame
When you select an entire frame, you can:
- Add a subject line and preheader text to the frame.
- Add UTM parameters to any URLs within the frame to track email campaign performance.
To Apply Properties to a Wrapper
When you select a wrapper, you can:
- Add background color extending across an email’s entire width.
- Render a section of the email as an image.
- Add a URL and alt text to any images within the wrapper.
Apply Properties to an Image or Button
When you select an image or a button within a wrapper or frame, you can:
- Add a URL to make the image or button clickable
- Add an optional Alt Text to the image
- Merge in an external image source by entering the URL of an image hosted on a website. This allows for a dynamic image that pulls from the external source.
Step-by-Step Instructions
- Select the frame you want to edit. The Properties tab will update to show options for adding a subject, preheader, or UTM parameters.
- Click on a wrapper within your frame. The Properties tab will update to allow changes to the background color and render the content in a wrapper as an image.
- Click on a button to add a URL link to it via the Properties tab.
- Click on an image to add a URL, alt text, or merge an external image source.
Example Usage
- Frame Properties
- Add a subject line like "Welcome to Our Newsletter" and preheader text such as "Stay updated with the latest news."
- Include UTM parameters for better tracking:
utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale.
- Wrapper Properties
- Turn the content in a wrapper into an image
- Add a full-width background color
- Image Properties
- Link an image to a specific product page and ensure it has descriptive alt text.
- Use a URL of an image hosted on your website for dynamic content that updates automatically.
Powered by