Email signatures have a size limit of 10,000 characters in the HTML. The plugin will warn you after exporting your email signature if its over the size limit. To avoid this you can use some of the Signature starter components under the Footer tab in the Emailify plugin.
Unfortunately, any responsive mobile overrides won't be rendered for any "HTML Email Signature" exports, as any CSS style tags and @media queries are stripped out by email clients (therefore, it's also not included in the code export), so it's worth trying to strike a balance in the original design that looks nice across both desktop and mobile widths.
Video Tutorial: Design and export HTML Email Signatures from Figma
This video walks through how to design and export production-ready, responsive HTML email from Figma using the Emailify plugin.
Export your HTML signature from Emailify
In the Emailify plugin, click on the Export HTML button to open the export panel, select the HTML Email Signature option from the dropdown list, then click the Export to HTML Signature button to start exporting the emails you've selected from Figma to HTML.
After Emailify has finished processing your email(s), you'll be shown a confirmation message; you can download your .zip file to your computer by clicking the Download your .zip file button, then you can unzip the .zip to see your exported files.
Copy your HTML email signature to the clipboard
After you've exported your HTML email signature from Emailify and unzipped the .zip file, you can open the preview-and-install.html file in your Google Chrome web browser (as other browsers like Safari may have issues) and then click the Copy HTML Signature button on the preview page, which will automatically copy the contents of your HTML signature to your clipboard.
Some email clients may require the "raw" HTML code, so if that's the case, you can click the Copy HTML Signature (Raw Code) button in the preview-and-install.html file to copy the selection as raw HTML to your clipboard that way instead.
Once you've copied the HTML to your clipboard, you can follow the instructions below (taken from the excellent guides provided by SignatureHound) to install the signature in your email client.
How to install your HTML email signature in Yahoo! (Web Mail)
Unfortunately, Yahoo! Mail makes on the fly adjustments to the images in your signature which is out of our control. Please read all of the details about these rendering issues below.
Once logged into your Yahoo account, click the Settings Cog in the top right corner.
With the dropdown open click More Settings.
Click Writing Email from the settings options.
Click the + button at the bottom of the middle column.
Copy and paste your new email signature into the signature editor.
There is currently a bug with Chrome and the way it performs the copy/paste that causes your signature's links to appear underlined. Please complete the signature install process using a different browser such as Mozilla Firefox to resolve the issue. You can go back to using Chrome once your email signature is setup using another browser.
If your signature does not appear in the preview on the right then move the text cursor in signature editor to the top of the pane and hit the Enter key.
- Your signature should then save automatically. Close the settings page, compose a new email and enjoy your new signature!
Important information about Yahoo! Mail image scale rendering issues
Unfortunately Yahoo Mail makes on the fly adjustments to the images in your signature which is out of our control. This can cause rendering issues in certain email clients if your images are being scaled down from their natural size.
We've noticed that the following images are being scaled down:
- Profile Image (400px → 100px)
- Logo (600px → 150px)
While the signature may look fine in the Yahoo Mail preview, it is likely that recipeints using Microsoft email clients such as Outlook 2019 will see any images at their full size (example below).
Please test your signature by sending it to a recipient who is using a Windows mail client. If the issue is occuring you can resolve it by uploading your images at the exact size that they should appear in the signature (and not scale them down). You can use a free online service (or Figma) to resize your images appropriately.
Once resized your images will render correctly in Windows email clients however they will appear slightly blurry on tablets, phones and other high resolution screens. If you are not willing to compromise on this we recommend using a different email client.