Video transcript
6-minute video ·
Today I’m going to be showing you how to export HTML emails from Figma with right to left RTL text formatting.
To get started we just need to install or run the Emailify Figma plugin, and you can do that by clicking on the “Resources” icon at the top of your Figma file searching for the word “Emailify” and if you click on the “Plugins” tab you’ll see Emailify pop up. All you need to do is either click on the “Run” button here or you can save the plugin to your Figma plugins list for later by clicking on the “More options” icon here and then clicking on the “Save Figma plugin” link that pops up.
I’ve already done that, so I’m going to go to my Figma canvas I’m just going to right click anywhere, go down to “Plugins” go down to “Saved plugins” and then I’m just going to click on the Emailify Figma plugin that we just saved. Once that runs you’ll see that we’ve got a bunch of different options here; I’m not going to be going through how to design emails in this Figma tutorial we’ve got some other Figma tutorials on the YouTube channel if you’re new to the Figma plugin and want to know how to actually design the emails. I’m just going to assume that you’ve already got an email set up and you need to export that email with RTL text formatting right to left and I’m going to show you how to do that in a second.
Just to make sure you’ve got it set up in your Figma file first; the RTL formatting options are just under the “Figma” icon in the top left here and then if you go to the “Text” option and then down here there’s an option called “Text Direction”; by default, this is always set to “Left to Right”, if I click on “Left to Right”, for example, you can see here that the text has been reversed. This is the default way that it’s aligned, but for any text layers that need the RTL or right to left text formatting you can change that as I just showed you; just go to the Figma icon go down to the “Text” option and go to “Text Direction” and just change that to be “Right to Left” instead of “Left to Right”. I’m going to switch that back and you can see here that the text has been reversed.
We’ve already got an email designed just using the components from the Figma plugin; as I said, I’m not going to go through that today but you can basically just click on any of these and automatically add these components and that will help you design the email. I’m going to be exporting this to HTML now, so if we preview this email just by clicking on the “Preview” button in the Figma plugin you’ll see that by default the text is the wrong way around, it’s actually exporting it with the default order, so the the order in the Figma file doesn’t actually get applied automatically to the Figma plugin and we need to change an option to make that work. To make that work, we just go to the export HTML options, so if you click on the “Export HTML” button in the Figma plugin you’ll notice that there’s a setting down here called “RTL Text” and that’s turned off by default, but you can turn that on just by clicking on this toggle switch here.
If we toggle that on and then go back to our preview options and click on the “Preview” button, you can see here that the text is now rendering the way that we expect. The reason for that is it’s automatically injecting some RTL text formatting, so there’s some special HTML that needs to be added to make sure that the text direction gets applied with RTL or right to left attributes and styles; that “RTL Text” option is going to enable that for you.
That’s all you need to do; if you now want to export that RTL HTML email from Figma to your computer or export it from Figma to any of these platforms, for example: MailChimp, Klavio, or any of the email platforms that you might be using. Today, I’m just going to be exporting it from Figam to a simple HTML email that we can download to our computer. The way we do that is just by selecting the emails that we want to export, so I’m just going to select this one and then click on the “Export to HTML” button with my “RTL Text” option enabled. I’m going to click that now, and that’s going to upload our images, upload our assets and automatically generate production-ready HTML from Figma for us. I’m going to click on the “Download your zip file” button and I’m going to save that to my desktop.
If you double click on the zip file and open up the folder, you’ll see here that we’ve got a couple of files; our HTML has been exported from Figma into this folder here, so this is the actual HTML that we can view. If we drag that into the browser you can see that we’ve got our email here, or you can use the “preview” HTML file as well and that will just give you a nice preview page that you can use and see what it looks like on desktop and mobile. As I said before, if we inspect that email, if we go back to the email and click “View Source”, we’ll be able to see that the content basically has “direction” properties. If we look down here we can see that the text direction is set to “rtl”; that HTML attribute is basically getting automatically added, based on the “RTL Text” setting that we enabled in the Figma plugin.
I just want to keep that really short for today, as I said, if you want to get a more detailed idea of how to actually go about designing these emails in Figma there’s plenty of other Figma tutorials on the YouTube channel; just check out the Emailify playlist and you’ll be able to find quite a few in there. For today, I really just wanted to go through that really simple new RTL right to left text formatting option that you now have available if you need to export your emails from Figma to HTML in that kind of text formatting.
We’ll leave it there for today and keep it a short one. I hope that helps you if you’ve been wondering how to export your HTML emails from Figma with RTL right to left text formatting, this is going to be the easiest way to go if you’re designing your emails in Figma and need to export them out to HTML. Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.
Pro Bundle