Video transcript
9-minute video ·
Today I’m going to be showing you a quick tutorial on how to create Outlook compatible gradient buttons for your HTML emails using the Emailify Figma plugin.
To get started, we just have to go to our Figma file, click on the little “Resources” icon up the top here. If you search for Emailify and under the “Plugins” tab, click on the Emailify item. You can run the Figma plugin by clicking on this “Run” button here or I’d recommend clicking on this little save icon here and that’ll save it to your Figma plugins list for easy access. So, I’ve already clicked on the save icon. I’m going to go to my Figma canvas, just right click anywhere, go down to “Plugins”, then go down to “Saved plugins”, and click on the Emailify item. 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 helps you to design and Export HTML emails from Figma automatically. So, I’ve already got an email designed here that I’ve taken from the templates. So, there’s some templates that you can duplicate for free from the Figma community that are Emailify compatible. So, these are sort of some pre-designed templates to give you some inspiration of what can be created with the Figma plugin. I’m not going to be diving into all of the design features today. I’m going to be assuming that you’ve already watched some of the other tutorials and read through the documentation to create your own Emailify design and I’m just going to be assuming you’ve already got that set up and you’ve got some buttons that are currently solid fills that you want to then convert into gradient buttons instead.
We’re going to do that now. I’m just going to close off this little window and again just a really quick refresher if you need to add a button you can do that by clicking on the column layer in your designs then going to the button layer down here clicking on “Add” and that will add an Emailify button that you can then customize in Figma. You can also add a URL to that by clicking on the button layer then clicking on the little settings icon or settings button in the Figma plugin and you can paste in your clickable URL link there and that will automatically link the button to that URL later along with some other responsive features that you can customize to your own liking.
I’m just going to close that off and delete that new button and we’re just going to focus on converting this one into a gradient button. So, all we need to do is click on our Emailify button layer, go over to the fills panel here and we’re just going to click on that fill and we’re going to change it from solid to gradient. So, just go ahead and click on this little gradient icon in the fills panel and automatically converts it into a linear gradient. So, all I’m going to do is change this second color to match this red from this logo here and you can see we’ve now got a darker red to a lighter red so we can change that however we like we can make that lighter or darker we can also adjust the gradient angle if you want to change that you can obviously change that to be vertical or you can flip it around today I’m just going to be keeping it really simple and making it a linear angle straight through the middle here.
Now that we’ve got that added in we can also adjust the Border radius I’m just going to make this 60 to make it a really big one you can actually turn that off or you can make it a small one it’s totally up to you I just want to do this to show you how the radius is also going to work in Microsoft Outlook so these are Emailify buttons that are going to get exported with some special code to automatically work in Outlook which isn’t usually the case so I’m going to show you what that looks like in a moment but first just to make sure we’re happy with the design we’re just going to click on the preview button in Emailify and this is going to show us what the HTML version looks like so you can see this is a real HTML button we can see what that looks like on desktop as well so that’s looking really good.
I’m happy with that so now we can export this to HTML by closing off the preview clicking on the export HTML button in the Figma plugin and then you can export this to any platform you like if you’re exporting it to a certain platform like MailChimp or Klaviyo go ahead and select that option option but for today I’m just going to be exporting it directly to my computer using the HTML email export option so I’m going to select that option I’m going to upload the images automatically so I’ve got that little toggle checked and I’m just going to leave the subject line in preheader blank for now so I’m going to click on the export to HTML button that’s going to automatically convert the design into HTML code and upload all of the images and then we’re going to be able to download the zip file to our computer once that finishes export in.
It’s just finished exporting so I’m going to go ahead and click on the download your zip file button and I’m going to save that to my desktop I’m going to open that up by double clicking on the zip icon and then opening up the folder so you can see here we’ve got our export and you can see we’ve got a couple of files we’ve got the previews HTML file and we’ve got our index.html file so the previews HTML file is actually a preview file that you can send to clients or stakeholders so that just allow allows you to see what the design looks like on mobile and desktop at the same time on a really easy to browse page that you can share and then the actual HTML is inside of the Emailify template folder which is what we named our frame in Figma so if you open up that folder you’ve got the real index.html file here and you can see what that looks like by opening up in your browser and this is the HTML email code that we’re then going to use for our send.
Just to show you what this looks like in Outlook as I said I’ve uploaded this HTML into Litmus which allows you to test your HTML emails across all different types of email clients and it’s going to render the HTML in the real email client so these are real screenshots of real email clients so you can see here we’ve got Outlook 2010 running on Windows 10 so if we open up that preview you can see that the HTML that we sent to Litmus has been rendered in the real app so we can see what the HTML is going to look like when it’s opened on Outlook 2010 in this case so the important thing to note is that we can see the gradient button is getting rendered as expected so this is a real HTML button this is real Rich text as we could see in the preview and you can see here that it’s rendering the corner radius as well so we’ve got Corner radius and we’ve got gradients fully supported in the legacy Outlook apps which in notorious for being really bad for rendering things so we can see it’s working as expected 2016 2019 20121 all of the clients there as you’d expect and of course the mobile clients as well so we’ve got outlook on iOS is also going to render that as we’ expect so we’ve got our gradient buttons there and also we’ve got iPhone mail so Apple Mail as well also going to render that as expected this particular test I moved the button above the copy just to make it easier to see in some of those previews but it’s the exact same design that we just created in Figma a moment ago.
I just wanted to show you what that looks like in these devices and as I said Gmail is also going to support these it’s going to be pretty much supported across the board with the exception of Yahoo so Yahoo mail does not support this so what Yahoo will do is it will fall back to the solid color that you used in the first color in your gradient so so what I mean by that is you can see this dark red or purple sort of color here is being used in Outlook as a solid color you can see in Figma when we open that up it’s actually taking the first color from our gradient so basically whatever we use is that first color in the gradient that will always be used as the fallback solid color if the gradient isn’t supported in a certain email client which in this case is the Yahoo male client so that’s what that looks like there.
That’s basically it; I just want to keep this really short short to show you how to create these gradient buttons HTML gradient buttons that work in Outlook and all of the other modern email clients that you’d expect to support it but most importantly all of the legacy Outlook versions and Outlook apps on windows are going to render this as we expect directly from our Figma designs so I hope this gives you a little bit more flexibility when you’re creating your email designs where you can now add gradient buttons and buttons with Corner radiuses which will now get supported automatically for these legacy Outlook clients when you export the HTML from Figma using the Emailify Figma plugin so that’s what that looks like there.
I hope that’s been helpful if you’ve been wondering how to create bulletproof gradient buttons that you can use in your HTML email designs and still have them look great in even the worst clients which are obviously the Outlook browsers and Outlook email clients that we’ve all grown to deal with the problems of so this should make that process a little bit smoother and remove some of the headaches when it comes to troubleshooting and figuring out how to code these buttons to work in Outlook so thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle