Letter layout in Figma, no-code approach
Posted: Tue Dec 03, 2024 5:11 am
“If only letters could be laid out in the platform as beautifully and quickly as their layouts in Figma,” I thought one day. I searched and found a way. If you also don’t want to spend a lot of time on layout, but want a unique design – welcome =)
Figma is a tool for interface design and prototyping that has gained popularity due to its simplicity, accessibility, and the ability to work in a team online. But not everyone knows how many opportunities Figma plugins provide.
For example, Ampier Email Generator, Emailify HTML Email Builder, Marka Email Generator and many other plugins allow you to create emails directly in Figma. Let's take a closer look at the stages of layout using the Ampier Email Generator plugin.
Figma plugins for email layout
Stages of layout of letters via Figma plugin – Ampier
Let's look at the layout of a simple letter using the Ampier plugin using the enKod newsletter as an example.
Step 1. Installing the plugin
To install the Ampier plugin in Figma, you need to (see screenshot below):
Open the list of all available plugins and enter Ampier in the search bar.
Click on the plugin in the search results and click Run in the window that opens.
Done, the plugin will appear next to the toolbar, on the right side.
Installing the Ampier plugin
Step 2. Creating a letter
You can create a blank letter, or you can use a simple template. I will choose the malaysia business email list first option to show how you can add a variety of elements to a letter.
Creating a letter
After selecting to create a letter, a blank letter with a default subject will appear on the screen. You can change it in the letter properties:
Changing the subject of the letter
I also recommend reading our article on how to properly create a letter design. It will be especially useful for those who have little experience in this =)
Step 3. Letter design
The most interesting part is the layout itself. We create a letter so that it has all the necessary elements - a header, body and footer, and air between them. What you need to do for this:
In the “Blocks” tab, select the desired element and double-click to transfer it to the letter.
Edit the element if necessary.
Go to the Preview tab to make sure all the elements look the way you wanted =)
For example, let's create a letter header:
Adding an element
Preview
Gradually adding and editing all the elements, we end up with a letter like this:
Letter design
Step 4. Exporting the letter
The design is ready, now you need to export the letter to a mailing service, in our case – to the enKod platform.
There is one caveat: if you have trial access to Ampier , the number of exported emails will be limited to 5.
So, how do you export a letter to enKod? Let's look at what you need to do step by step:
Open the letter preview and click "Export".
Export letter
Set the subject of the letter and, if desired, the preheader text. They can then be changed in enKod when setting up the sending.
Export letter
Unzip the letter folder, select the HTML file and open it in any browser.
Opening the HTML file of the letter
Open the page code in the browser and copy it.
View page source
Copying page code
Go to the enKod platform and create a new letter, selecting "Stripe Editor". This is important so that you can then edit the letter in the platform itself using Stripo tools, without interfering with the code =)
Creating a letter in enKod
Open the HTML console in the Stripo editor and paste the code you copied.
HTML console in Stripo
Voila, our letter is ready! Moreover, it can also be edited in the platform if necessary - change the text, links, etc.
Ready letter in enKod
Conclusion
This method will allow you to create unique email designs even if you don't know HTML or CSS.
Figma is a tool for interface design and prototyping that has gained popularity due to its simplicity, accessibility, and the ability to work in a team online. But not everyone knows how many opportunities Figma plugins provide.
For example, Ampier Email Generator, Emailify HTML Email Builder, Marka Email Generator and many other plugins allow you to create emails directly in Figma. Let's take a closer look at the stages of layout using the Ampier Email Generator plugin.
Figma plugins for email layout
Stages of layout of letters via Figma plugin – Ampier
Let's look at the layout of a simple letter using the Ampier plugin using the enKod newsletter as an example.
Step 1. Installing the plugin
To install the Ampier plugin in Figma, you need to (see screenshot below):
Open the list of all available plugins and enter Ampier in the search bar.
Click on the plugin in the search results and click Run in the window that opens.
Done, the plugin will appear next to the toolbar, on the right side.
Installing the Ampier plugin
Step 2. Creating a letter
You can create a blank letter, or you can use a simple template. I will choose the malaysia business email list first option to show how you can add a variety of elements to a letter.
Creating a letter
After selecting to create a letter, a blank letter with a default subject will appear on the screen. You can change it in the letter properties:
Changing the subject of the letter
I also recommend reading our article on how to properly create a letter design. It will be especially useful for those who have little experience in this =)
Step 3. Letter design
The most interesting part is the layout itself. We create a letter so that it has all the necessary elements - a header, body and footer, and air between them. What you need to do for this:
In the “Blocks” tab, select the desired element and double-click to transfer it to the letter.
Edit the element if necessary.
Go to the Preview tab to make sure all the elements look the way you wanted =)
For example, let's create a letter header:
Adding an element
Preview
Gradually adding and editing all the elements, we end up with a letter like this:
Letter design
Step 4. Exporting the letter
The design is ready, now you need to export the letter to a mailing service, in our case – to the enKod platform.
There is one caveat: if you have trial access to Ampier , the number of exported emails will be limited to 5.
So, how do you export a letter to enKod? Let's look at what you need to do step by step:
Open the letter preview and click "Export".
Export letter
Set the subject of the letter and, if desired, the preheader text. They can then be changed in enKod when setting up the sending.
Export letter
Unzip the letter folder, select the HTML file and open it in any browser.
Opening the HTML file of the letter
Open the page code in the browser and copy it.
View page source
Copying page code
Go to the enKod platform and create a new letter, selecting "Stripe Editor". This is important so that you can then edit the letter in the platform itself using Stripo tools, without interfering with the code =)
Creating a letter in enKod
Open the HTML console in the Stripo editor and paste the code you copied.
HTML console in Stripo
Voila, our letter is ready! Moreover, it can also be edited in the platform if necessary - change the text, links, etc.
Ready letter in enKod
Conclusion
This method will allow you to create unique email designs even if you don't know HTML or CSS.