Used in this video
Emailify
メール
Easily create and export responsive, production ready HTML emails (eDMs) from Figma.
Try EmailifyGet started today
Video Transcript
Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma to the Campaign Monitor email marketing platform using the Emailify Figma plugin.
To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up here. If you just search for Emailify, and under the "Plugins" tab, click on Emailify. You can run it by either clicking on this run button here, or I'd recommend clicking on this little save icon here. That'll save it to your Figma plugins list for easy access. I've already done that, so I'm going to go to my canvas. Just going to right-click anywhere, go down to "Plugins," then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.
If you're new to the Figma plugin, the way that it works is it basically allows you to create HTML email designs in Figma and then export them to production-ready HTML with one click. I'm not going to be going through all of the design features today. I'm going to be assuming that you've already got your email designed and customized. If you're new to the Figma plugin, you can watch some of our tutorials on the YouTube channel. Just click on the Emailify playlist, and you can go through those. But for today, I'm just going to be doing a really, really simple template just to show you what this is going to look like once we upload it to the Campaign Monitor platform.
I'm just going to add a couple of components, and importantly, you just have to make sure under the "Footer" tab that you do add the Campaign Monitor footer. So this basically gives you a really easy way of adding a footer with the unsubscribed tag that's required. This will automatically add the unsubscribed tag into your footer, and that will be populated by Campaign Monitor automatically once the template gets uploaded.
Now that we're happy with our design, we can preview it in the Figma plugin just to see what that looks like on mobile and desktop. I'm fairly happy with this, so I'm just going to exit the preview and go to the "Export HTML" button in the top here. What we want to do is change the "HTML Email" option here to the "Campaign Monitor" option. I'm just going to scroll down under the Platform Integrations group and click on the Campaign Monitor option. That's going to ask us for our API key and client ID. You can click on that link to see the documentation for that, but I'm just going to show you now where to find those.
If you go to your Campaign Monitor account and log in, what you want to do is go over to the top right corner where your name and Avatar is. Just click on that dropdown and then click on Account Settings. Then you want to go down here to API keys. Click on API keys, and you can see here we've got our client ID. So you just copy that to your clipboard, paste that into the Campaign Monitor field. So the client ID is the second field, so paste that in there. Then you just want to click on the show API key link here, and that's going to ask you to put in your Campaign Monitor password. Once you've added your password and got that approved, all you need to do is copy-paste this enormous API key. Just grab the entire thing from left to right and copy that to your clipboard. Again, go back to Emailify, paste that into the first field here. It's API key and client ID, so we'll put the API key into the first field, paste that in.
Once that's added, all you need to do is optionally add a subject line. You can put in a subject line here. Importantly, whatever you call the email in your Figma file here is going to be the name of the template that gets uploaded. So we can call this one example CM template, and that's going to automatically use that name when we upload it to Campaign Monitor now. I'm just going to click on the upload to Campaign Monitor button now, and that should automatically export the HTML email from our design here, automatically upload the images, and then upload that as a template to Campaign Monitor.
It's telling us that it's been successful; the Campaign Monitor templates have been uploaded. It's just letting us know that we can find those templates again under that user icon and then clicking on the my templates link. Let's jump in there now. Click on the little user icon, go down to my templates, and once that page loads, we can see here that we've got our template in our preview. So I can basically open that up. I can see that our HTML has been uploaded to Campaign Monitor as we'd expect. Finally, you can see we've got our unsubscribed link down here in the footer that we just added in. So that will automatically get updated with the correct unsubscribe link whenever you send it out to a list. You can basically use this template directly in your campaigns.
You can spin up a new campaign in Campaign Monitor, and that will automatically allow you to use this campaign template. If we go to our campaigns page and click on create a campaign, we can just do my first campaign for now. This will load up the campaign options. We can click on design email, we can say use a template, and then you can see here in our templates, we've got that added in here. So we can just click on that, and that will automatically allow us to use it in our campaign. That's going to allow you to see the preview here and preview it. So you can preview what that looks like then click on Save and next. Now that's basically added it to our campaign. Then it's just a matter of adding your from and to and all that sort of detail which you're probably already aware of if you're using Campaign Monitor. So I won't be going through all of that. This is how you can apply your campaign template into the campaign itself in one click once you've already uploaded it from Figma.
I hope that's been helpful if you've been wondering how to automatically upload your HTML templates from Figma into Campaign Monitor. This should hopefully help speed up that process instead of doing it manually and adding all of the intricacies that come along with manually uploading the images and the unsubscribe tag and all that sort of stuff. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.
Adam Brock
Founder of Hypermatic
The secret weapons used
in high performing teams.
World-class teams of designers, developers and copywriters use our Figma plugins to 1,000x their daily workflows.
TinyImage
タイニー
Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.
Try TinyImageGet started today
Pitchdeck
ピッチ
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Try PitchdeckGet started today
Convertify
コンバート
Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma.
Try ConvertifyGet started today
Emailify
メール
Easily create and export responsive, production ready HTML emails (eDMs) from Figma.
Try EmailifyGet started today
CopyDoc
コピー
Everything you need to easily export, import, localize and update text in your Figma designs.
Try CopyDocGet started today
Bannerify
バナー
Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.
Try BannerifyGet started today
Crypto
ロック
Securely share your Figma designs and prototypes as password protected URLs or PDF files.
Try CryptoGet started today
Favvy
ファビー
Export production ready favicons (with code) for your website or PWA from Figma in seconds.
Try FavvyGet started today
Pixelay
ピクセル
Compare and visually QA your Figma designs against real website URLs using smart overlays.
Try PixelayGet started today
HyperCrop
クロッパー
Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.
Try HyperCropGet started today
Commentful
コメントフル
Supercharge your Figma comments and gather external feedback from stakeholders.
Try CommentfulGet started today
Weblify (Beta)
サイト
Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.
Try WeblifyGet started today