Adding Images to an Email

Updating an Image in an Email Design

1. Select the email frame that contains the image component you want to update.

2. Double-click on the image you want to update. This action will highlight the image and bring up its properties on the right-hand side of the Figma interface.

3. On the right-hand side, you will see the current image displayed. Click on the image, and a file selector will appear.

4. Select the new image you want to upload from your computer.

5. Once uploaded, you can resize the image if necessary to fit your design.

6. To adjust the image’s properties, select the image and then click the Properties tab within the plugin interface. From the Properties page, you can:
• Add a clickable image URL. This is useful for adding a link that users can click on when they interact with the image.
• Add alt text, or a description of the image that improves accessibility for users with screen readers and helps when images are blocked or fail to load.
• Paste an external image URL on the appropriate field to override the image source. This is helpful if you want to reference an externally hosted image, such as a countdown timer or an image from your website.

7. To customize how the image will appear on mobile devices, select the Mobile Styles tab within the plugin interface. From the Mobile Styles page, you can:
• Hide the image on desktop or mobile. By default, images are displayed on both desktop or mobile.
• Apply mobile-specific padding for a better fit on mobile displays.
• Update the image’s width and height for mobile display.

• Consistency: Ensures your images are correctly displayed across all devices.

• Accessibility: Provides alt text for better accessibility, making your emails more inclusive.

• Flexibility: Allows use of externally hosted images and mobile-specific styling, giving you more control over your email design.