How to translate email designs in Figma with ChatGPT (automatically) using Emailify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically translate your Figma email designs into multiple languages using ChatGPT in the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, go down to the actions icon down here, and just search for Emailify. Under the Figma plugins tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this run button down here or clicking on the save icon next to that. Then we can run the Figma plugin from our Figma plugins list.

Now I’m just going to go to my Figma canvas. I’m going to right-click anywhere, just go down to plugins, and then go down to saved plugins and click on Emailify. 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 basically helps you to design HTML emails in Figma, which you can then export to production-ready HTML automatically from the Figma plugin. Today, I’m not going to be showing you the design process as such. I’m going to assume that you’ve already got your email design set up using the Emailify Figma plugin. Today, we’re just going to be clicking on this localize option in the header here.

If we go ahead and click on localize, we’re basically going to automatically translate this email design into multiple languages. I’m going to show you how to do that now. By default, the localization option is currently set to Excel, but we’re going to go down and use the ChatGPT options. We have two different ChatGPT options. We can either use the ChatGPT API, which we’re going to do in just a moment, and I’m also going to show you how to do it manually just by using a manual prompt as well. If you don’t want to create API keys or don’t want to do anything like that, we’re also just going to use the regular ChatGPT interface, and I’m going to show you how to do it that way as well.

The first one I’m going to show you is the API method. What you want to do is basically select this dropdown list up here and just make sure the option is set to ChatGPT API. This is going to be under the AI translation API options. I’m going to click on the ChatGPT API option, and it’s going to ask you for your API key. What you need to do is just click on this API key link here, and that’s going to take you to the openai.com developers section. You just need to make sure you’ve got an account and you’ve got some billing set up, and then you can just create a new OpenAI API key. Go ahead and click on create new secret key, and you can then copy that directly into the Figma plugin here, and then we are basically ready to go.

It’s going to allow you to choose a model. At the moment, it’s just using the GPT 4.1 mini model, which is more of a faster, more cost-effective model. You can select the 4.1 model as well and other models in the future. I’m just going to make sure that’s checked. Then all you need to do is just add the local languages you want to translate to. In this case, we might pick French, we might pick Korean, and we might pick German. We’re just going to do these three for now. Because we’ve only got one email in our design, I’m just going to keep that one checked over here. If you’ve got more, you can check those ones as well. Then all you need to do is click on the translate and import button. That’s basically going to load up all of the text content from our email, and then it’s going to use that ChatGPT API key to connect with ChatGPT via API.

You notice we’re not going into the browser; it’s happening all through the Figma plugin. It’s basically behind the scenes translating all of this content for each of these three locales that we added. It’s done French; it’s now doing Korean. In a moment, once it finishes that one, it will move on to German. Then we’ll be able to automatically have those locales imported into our Figma file. It’s just doing the last one now, and once that finishes, you’ll see it automatically take all those translations that it just got back from the ChatGPT API. In a moment, it will automatically import all of those as brand new Figma designs using our original design and updating that content.

You can see here that we’ve just finished ChatGPT translating those three localizations from our original email. It says three locales created, and we can see that in here. What it’s basically gone ahead and done is created a new page in our Figma file just calling it a translation frame. It’s taken the original frame and made a copy of that, and that’s called the global translation. Then we can see it’s also gone ahead and created three new frames. We’ve got our French version, we’ve got our Korean version, and we’ve got our German version as well. Every single text layer has been translated, and that’s all looking really good. Again, we didn’t have to leave the file to do it; we could just do it directly via the API.

If you prefer not to use the API or you don’t have a key or you just prefer to use the regular ChatGPT site at chatgpt.com, you can also do that as well. I’m going to show you how to do that now just by going back to our original page. I’m going to jump back there, and once again I’m going to click the localize button. Instead of using the ChatGPT API option, we’re going to scroll down a bit further, and you can see there’s another section down here called AI translations, and then it says manual in brackets. Instead of the ChatGPT API option that we had a second ago, we’re going to now change that to ChatGPT prompt. This is a slightly different one. You’ll notice that there’s a new button up here. There’s no API field; it’s just saying generate prompt.

We’ve got our same three languages in there. I’m just going to click on generate prompt. That’s going to automatically fetch all of the text content from our design. It’s going to generate a custom prompt, which we can now copy to our clipboard. You notice this button wasn’t there before. The first thing we need to do is click on generate prompt, which we just did. Then, we need to click on copy prompt to clipboard. I’m going to do that now. That’s copied the prompt to the clipboard, and it’s telling us to paste it into ChatGPT. Now I’m going to go back to ChatGPT in the browser, and I’m just going to click on the input field there and paste from my clipboard.

You’ll notice that we did click that copy prompt to clipboard button. I’ve just gone ahead and pasted all that content into ChatGPT, just the regular ChatGPT window. Now I’m just going to send that off to ChatGPT. That’s going to automatically go ahead and translate this using ChatGPT, and it’s going to give it back to us in a format that we can then paste into the Figma plugin and translate those frames. You’ll notice that it’s going through and translating all of that content. Because this is a customized prompt specifically for email, it’s telling the ChatGPT window exactly what format we expect and giving it very strict instructions about what to do and how we need that content brought back to us in the final response.

You can see it’s going through and making all those translations. We’re doing all three languages in one prompt. That’s basically going to take a moment, and now it’s just finished. Once it finishes, all we need to do is click on the copy response button in ChatGPT. That’s now copied to our clipboard. We’ve basically just copied this entire CSV response. The third and final step in Emailify is we want to go down here to where it says paste the ChatGPT reply below. I’m going to click on that text field, paste the contents that we just copied out of ChatGPT. We pasted it into there, and finally, we just go ahead and click on translate Figma frame. I’m going to click on that now, and that’s going to do the exact same process.

You can see it’s imported the ChatGPT CSV translations. Once again, we’ve now got these translated Figma frames that have taken our original content, which we’ve run through the chatgpt.com window over here. We’ve pasted in that response, and the Figma plugin has taken that response and automatically generated three new translated versions of our email, and that’s basically good to go. Those are the two different options you can use. If you’re interested in automatically translating your email designs in Figma, you can use the ChatGPT API if you prefer that option and you have an API key already set up or you’re willing to set that up.

The easier method is just to use the ChatGPT prompt option, and then you can just go straight to chatgpt.com. You don’t even need an account; you can just drop it straight in there, get the response back, and manually copy-paste that back into this field here, and you’ll get the same outcome. That’s basically it. I hope that’s been helpful if you’ve been wondering how to quickly localize and translate your Figma email designs in the Emailify Figma plugin. Once you’ve finished importing that, you can then preview these as real HTML in the Figma plugin.

We can see here that we’ve got our translated version all in HTML. If you want to export those out to HTML emails, you just go ahead and click on the export HTML button here. Then you just select the platform you want the export to go to. In this case, I’m just going to leave it default and click on export to HTML. That’s going to automatically generate the HTML, the images, and all of the code that we need for each of those four emails in this case. Once that’s finished, you just go ahead and click on download your zip file and just save that anywhere to your computer, or it might have been uploaded if you uploaded it to a platform. You’ll basically just have access to all of your HTML code for each of those locales there.

We can load up the preview page just to show you what that looks like. If we open up that in a new window and drop that in, you can see here that we’ve got our emails all exported in those different translated versions. This is all HTML. If you’re running a global campaign or running a campaign that needs to be in different languages, this is a really easy way to generate all of those different translations just by using the ChatGPT versions or ChatGPT API and prompt versions and then exporting it out to HTML from the Figma plugin. That’s going to be it for today. I hope that’s been helpful, and thank you as always for watching. We’ll be back soon with more Figma tutorials like this one.