Video transcript
9-minute video ·
Today, I’m going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the SugarCRM platform using the Emailify Figma plugin.
To get started, all we need to do is go to our Figma file, click on the “Resources” icon at the top, and if you search for Emailify under the “Plugins” tab, if you click on the Emailify result, you can then run the Figma plugin by clicking on this run button here or I’d recommend clicking on this “Save” icon here which will let you run the Figma plugin from your Figma plugins list. I’ve already clicked the save icons, I’m going to go to my canvas, just right click anywhere, go down to “Plugins”, then go down to “Saved plugins” and click on Emailify, and 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 HTML emails in Figma which you can then export to production-ready responsive code automatically. So, I’m just going to be creating a really simple email, just going to call it example SugarCRM template, and I’m going to add that as a new Emailify frame to my page, and that’s going to allow us to start adding some Emailify components. These are preset components that you can customize with your own content and brand and styles using Figma, but for today, I’m just going to be keeping it really simple and just spinning up a few blocks. I’m not going to be going through all of the design features of the Figma plugin today. If you’re new to the Figma plugin and you want to learn more about those, I’d highly recommend checking out some of the other tutorials on our YouTube channel which are longer ones that go into depth about how to design the emails and customize them for your own brand and styles.
Today I’m just going to be keeping it really simple with these few presets and not making any customizations, and assuming that you’re happy with your Emailify layout as well. The last step you want to do is go to the footer tab in the Figma plugin and under the platforms category, just scroll down to the letter “S” and find the SugarCRM footer. So you want to click on this SugarCRM footer and that’s going to automatically pre-populate this footer component with the correct unsubscribe link and viewing browser link for SugarCRM.
You can see here if I inspect the link layer here and then click on the settings panel in the Figma plugin, that’s going to show me the pre-populated link for our unsubscribe link and our viewing browser link. So that’s a really easy way to add those in there if you don’t want to manually add them yourself. And of course, you can customize the footer colors and the fonts and everything like that as you’d expect as well. So now that we’ve got our SugarCRM footer added in, we can preview the HTML in the Figma plugin just by clicking on the preview button here, and that’s going to load up a real-time HTML preview of what the content’s going to look like when it gets exported to code. We’re looking at the iPhone size at the moment, we can change that to desktop to see a larger view of what that’s going to look like in bigger email clients. And of course, you can also add custom mobile-specific overrides. So if you click on any of your Emailify layers and click on the settings panel button here, that will let you inspect these layers and apply custom mobile responsive overrides to things like font sizes, paddings, spacing, showing and hiding elements, and everything else that you’d expect to be able to do for responsive design.
I’m not going to be applying any of those today. Again, I’m just going to leave this a really simple default design and assuming that I’m happy with my HTML, I’m just going to close off the preview and we’re going to jump into the export HTML button up here. So if you click on export HTML and then you just want to go down here and change the default HTML email option, scroll down to the platform section and again, we’re going to find the SugarCRM option. So go ahead and change that to SugarCRM and click that. And then you can add your subject line here. So I’m just going to add my subject line and preheader text. So the preheader text will show up after your subject line when your audience is viewing the email in their inbox. So the text that comes straight after or under the subject line in there, that’s what this text box here will relate to. And for the subject line, you will have to add this again in SugarCRM in a moment, but it’s worth adding it here as well because that will add it to your title tag in the HTML. So if someone does click on the viewing browser link from your email, this line of text here, whatever you add in this input box, is going to show up as their browser window title or their tab title. So just make sure you copy that to be the same thing in SugarCRM later which I’ll show you.
Once you’re happy with your email and your subject client preheader, just go ahead and click on the export for SugarCRM button, and that’s going to generate the HTML automatically and upload any images. So what you want to do is click on the download your zip file and that’s going to allow you to save the zip package to your desktop. So I’m just going to save that there, go ahead and double click on the zip file, and if you open up the folder that it unzips, you should see something that looks like this. So it will have your email name, so you’ve got the Figma frame name, email name, that’s going to automatically get populated as the folder. So just go ahead and open up that folder, and the file that we’re looking for is the HTML and the file that we’re looking for is this index.html file, and that contains your final email code. So we’ll be using that in a moment.
Now that we’ve got that exported, we can now log into our SugarCRM platform, and this is the Sugar Market product in the CRM Suite. So you’ll be able to get access to the Sugar Market instance if you’re a customer of SugarCRM and you’re using that particular product. You’ll know what your login is and you can get to this dashboard here. So what you want to do is once you’re on the dashboard just go ahead and hover over this little plus icon where it says quick create, and if you click on that quick create icon then go ahead and click on the email option. So go ahead and click on email under quick create.
Once this page loads, you just want to go ahead and select your email type. I’m just going to leave this as regular email for now, give the campaign a name. So let’s call this test campaign from Figma, and then you can also add your subject line. So the subject line that you added in the Figma plugin, just copy and paste that here. So we can just call that subject line test, even though we called it something else before, that’s okay. And then folder-wise, you just want to select the default folder or whatever folder you want to create to store your campaign in for organizational reasons. And then just update your from name and your address, so those are all sitting under here. I’m just going to update those now.
And once you’ve populated all of those fields below, just go ahead and click on the next button, and that’s going to bring up this page here which allows you to select the email design. And we want to change it from themes, it’s currently selecting the themes tab, we want to change that to this code tab here. So go ahead and click on code, and then there’s only one option which is the blank option. So go ahead and click on blank, and once you’ve selected blank, go ahead and click on the next button again. So in the bottom right there, click next, and if it says a warning about templating changes, just say yes, just confirm that, and then it’s going to give you this editor view here.
You can see here it’s giving us a blank HTML file or blank HTML editor with nothing really in it except this default tag here. So what you want to do is get rid of all that code, so just select that line and delete it, and then go to your folder, find that index.html file we’re just looking at, and drag and drop that into this window here. So drag and drop that code file into your editor in SugarCRM, and that’s going to automatically populate the code editor with the code that we just exported from Figma. So you can see here in the Sugar Market editor, it’s automatically rendering the preview. So this is looking just like we saw in our Figma file a moment ago. So you can see all the contents here, all the images have been uploaded, and everything’s looking really good.
Once you get to this view, you can preview that, you can send a test email to yourself just to make sure that you’re happy with it. You might also want to do a send to something like Litmus or Email on Acid to test that email out. But this is basically adding in the custom template to SugarCRM which you can do whatever you like with sending it out. So I’m just going to click on save to save that template. So that’s just saved the code for us, and then you just go through your regular steps in the SugarCRM email flow.
For example, if you click next that’s going to take you to the recipients page, you can assign your audience and things like that from there. So you can assign your lists and then you can click next again and decide when you want to schedule the email. So you could either send the email immediately, schedule it for later or send it in different batches so that’s entirely up to you. And I won’t be going through how to schedule an email in this particular tutorial. I just really wanted to focus on how to get your custom HTML into this build step here using the custom code option in SugarCRM.
We’ll leave it there for today. I hope that’s been helpful if you’re using the Sugar Market product in the SugarCRM platform and you’re also wanting to get custom HTML email designs out of Figma into the SugarCRM platform this is going to be a really easy way to go about it if you just design your emails in the Emailify Figma plugin export those out to the SugarCRM option and then as we just saw download the zip file and drag and drop the index.html file directly into your SugarCRM code editor here. So thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle