![]() ![]() ![]() That's roughly what it looks like to design an email you can you can spin one up really, really quickly using these modules, and these are totally customizable. I'm just going to go through and add a few more, I'll add these cards, I'll add some content, we can add maybe a testimonial, we might want to add some stats, we can do that and maybe just a footer as well. We can add as many of these as we want, in this case I might just add a few different types just so we can get a good mix of components going, and you can see here it's just instantly adding those components with one click. Just to give you a demo of how this works, we can go to any module in the list that we like, and just give it a click and that will instantly add it to our Emailify frame in Figma. These are all the different categories you can browse through there's many many different content modules and these are all available to you to add to your design with one click. Okay, so it's just added a brand new blank Emailify email frame to our Figma file, and you can see here now that I've actually added that frame, we've got all of these modules available to us in the Emailify plugin you've got categories up the top that you can click through, so for example we've just gone from "Header" to "Images" to "Content", "CTAs" (or "calls to action") and "Footer". All you need to do is give it a name in this case I'm just going to call it "Marketing Email" and I'm going to click on the "Add New Email Container" button. You can see here because I've run the Figma plugin for the very first time in my page, it's prompting me to add an Emailify container an Emailify container will allow me to start adding some modules to it. I'm just starting with a completely blank Figma file in this case, and because I've just installed the Figma plugin, I'm going to run it by right clicking anywhere, going down to "Plugins", and clicking on "Emailify HTML Email Builder", and that's just going to run the Figma plugin that we just installed a moment ago. If you haven't already done that, you can go to the Figma Community and search for the term "Emailify", and you'll see a result called "Emailify HTML Email builder" pop up, and all you want to do is just click on the "Install" button on the right hand side until it says "Installed", and then you can switch back into your Figma file. The first thing we need to do is just install the Emailify Figma plugin. If you want to skip through anything at any point, please feel free to do so and with that we'll get started. This tutorial is going to be split up into three different parts: the first part is just going to be installing the Figma plugin, the second part will be designing our email and the third part will be exporting the email from Figma to HTML. ![]() Today I'm going to be showing you how to create and export HTML emails directly from Figma, using a Figma plugin called Emailify. ![]()
0 Comments
Leave a Reply. |