It's really easy to change the content and the imagery in the backgrounds, but you can also change the layouts or order layout properties. You might also want to change the background for in this case you've got a call to action hero, and it's actually got a background image, so we can actually change that background image just by opening up the image fill Figma layer and either choosing an image by clicking on that image, or I can just drag and drop one from my desktop, and that will replace it over here. Then I'll just also change the text color, so I'm just going to change that to white you can get a sense of how easily you can start customizing these components. I can change the button, so if I wanted to change this button to more of a "stroke" button, I might knock out the fill, and I'll change the stroke and just add that onto there. If I want to reduce some of that character spacing I can do that, I can make the font size bigger or smaller, just as you would normally in Figma. ![]() I might change that to "Premium Sushi" as a heading, and I can customize that in the Figma styles over here on the right hand side. The other cool thing you can do is change the content, so we've obviously got this dummy content that's coming straight from the modules in the Figma plugin, but we can change this to whatever we want. You can also do that within components, so if you wanted to rearrange the text, you can just drag those up and down and that will automatically rearrange the elements inside of a module. Because they're all using Figma auto-layout, you can actually re-arrange these just by dragging and dropping the components or the modules up and down on the page you can just do that as much as you want, and rearrange those. All it's doing is adding, you can see on the left here, it's adding real Figma layers to your Figma canvas and you can open those up and explore them, but they work just like any other component that you designed yourself. 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. |