Marka Email Generator Plugin For Figma
You can download a ready-made HTML layout of an email with the help of a Figma plugin
Marka Email Generator is a plugin for Figma — a tool that EmailSoldiers uses to work with email designs and prototypes.
Our team offered the developer fixes and features and participated in testing. While working on the plugin it became clear that we’ve underestimated the product’s potential. The new tool allowed us to materialize complex approaches and perks of email layout.
Plugin options
1. Layout quality is at the level of a top-tier HTML-coder.
Our leading HTML-coders helped with the analysis and getting the layout that is generated by the new Figma plugin into shape. They helped to reduce the code and make it comply with our agency’s standards.
If you’re looking for more information on creating HTML emails, here’s a tutorial made by our coders.
2. Adaptivity.
With the help of this plugin you can easily create adaptive emails. This feature is fully controlled by the designer.
3. Outlook support.
The emails layout that is generated by the plugin is always being tested on emailonacid.com and is supported by popular email clients, including Outlook.
4. Email arbitrary default width support.
Base width is considered to be optimal at 600px, but this isn’t required. A greater or lesser width is often needed for better results. The plugin can set the base width on a program level according to your design layout width.
5. Option of adding blocks into emails with a width differing from the default setting.
If you need to make a footer, a header of an email, or some accent block in the content with 100% width, you can do it in Marka.
6. Dark themes support.
In most cases emails look good in dark versions of various browsers. And if something goes wrong — you can control it.
7. Managing the blocks’ visibility in the desktop/mobile version.
You may need to show different options of one block to both the desktop and mobile audience. Or, you may even need to hide some particular content to one of the audiences. So if you need something of this, it can be done in Marka pretty easily.
8. Using the Google Fonts option.
You can use any of the fonts from the Google Fonts collection — the plugin will automatically add the fonts into an email.
9. SVG into bit-maps graphics automatic conversion.
When uploading the code, the plugin identifies the frames with the vector graphics and transforms them into PNG format.
10. Chessboard blocks support.
Sometimes alternating blocks are used in design: image-text, text-image, image-text. So in the adaptive version these blocks should be consecutive: image-text, image-text, image-text. Marka can do this.
11. Downloading an email as an archive with the images for this archive export to most of the email services.
Mailchimp, ExpertSender, GetResponse and other ESPs allow uploading an email layout as an archive where the HTML document has relative links to images in this archive. Marka lets you download email layouts in this format.
12. Optional autoupload of the email images to a cloud hosting.
Activating this option will allow the plugin to download only the layout and all the images will be uploaded to a cloud hosting.
13. Optional code minification.
If an email is bigger than 102 KB, the Gmail email client will not show it completely.
If you make an email in the Marka that doesn’t fit in the limit you can use the minification option. It will get rid of all the extra symbols (spaces, hyphenations, commentaries) and will reduce the code size by 40%.
14. Adding an invisible preheader option.
A preheader is text that is shown in the emails list of the email client right after the subject line.
Email compilation from a modular template with the help of Marka Email Generator
A video is worth many words:
https://imgems.ru/global/Marka_Email_Generator_in_action.mp4
Let’s compare the usage of the plugin for Figma with the other HTML coding methods
Marka Email Generator is a convenient no code solution with the agency level of quality of email layout. Marka gives a new approach and possibilities towards the process of creating an email Let’s compare the Marka’s approach with the other methods of layout creation:
Field use of the new Figma plugin
In summer 2020, the product was ready for practical use. We’ve closed several projects where the plugin replaced the classical HTML coding.
One of the first clients to use the tool was a tour operator “Alean”.
We’ve adapted the modular template’s design to the Marka Email Generator logic. The final assembly of the emails is now being done on the client’s side and is similar to working with a drag-and-drop editor.
Another job is emails for the i-Media agency:
What our clients say
“Alean” tour operator
Anna Sakahrova, an internet marketer of the Alean tour operator:
“With the help of Marka Email Generator you’ll get an HTML email layout from a Figma file within seconds. And this HTML will comply with the best practices of email coding.
The folks from EmailSoldiers have prepared two master templates for us with the blocks, which can be used in emails in different configurations. We’ve already made nearly 20 emails using these configurations. It’s really hard to settle on a standard template if you can always use something new. :)
What we liked:
Being able to create beautiful designer emails that have various blocks arrangements yourself was the main point. Email services’ standard templates lack this function.
Before downloading an email from Figma you can check the way it will look in the desktop and mobile versions.
You can process lots of images and even gif-animations and paste them into your email right in Figma.
Plugin is just 7$ a month.
The folks are ready to help with working with the plugin and upgrade the functions of it so it will be easier to work with.”
The Internet advertising agency i-Media
Maria Gudkova, an i-Media marketer:
“Here in i-Media we promote 13 services and 5 branches of business that we are aimed at. We compose email campaigns for every branch on a regular basis, send digests for our clients and employees. It is 3–8 emails a month.
Before new plugin implementation the email campaign’s delivery has been starting a long preparation process that made us kind of sick. First, drawing a unique design, then email layouts, then we again ran to the designer because some element didn’t want to take its place in the tests. Basically, we’ve been always testing our patience.
A couple of months ago we were among the first to try the Marka Email Generator plugin and to be honest, we doubted it and were worried. We thought that it is impossible to replace a professional coder’s work. But we tried it still and didn’t regret it.
Now marketers cope with the whole process on their own. We spend much less time and effort on emails. With the help of the plugin it takes no more than 2 hours from idea to sending an email.”
How our team reacted
What the designer says
Andrey Vedernikov, EmailSoldiers designer:
“Figma is a simple and minimalistic graphic editor. Unlike Photoshop it doesn’t have a lot of functions. But even despite Figma’s simplicity we’ve managed to add a complex plugin into it that impressed our designers, HTML coders, and developers. It generates the HTML code for the emails right from the design mockup.
Only a design mockup created according to the rules of the plugin’s developer fits. Main functions of the plugin for Figma are described in a Marka guide. It also contains detailed explanations of its work. But the main thing needed for Marka’s successful work is practice. We are still discovering the features of this tool.
When working with Marka, you need to think with blocks and create a block model of the original mockup. Everything is put to use in this plugin, every button has its own function and every function of the plugin is connected to some interface element.
You can upload any images, any text — it all automatically goes into the code.
Before, when compiling the modular template you needed to dive into the code to change something. I.e. the client gives their remarks in a text message and the coder goes and adds the fixes to the code. Now the client opens the mockup and changes it themselves”.
Minefields of the new plugin for Figma
“The plugin’s features are discovered mostly with a rule of thumb.
You can study a guide for developers, but something will be discovered directly during work. For example, a text has a 3% kerning (space between the letters), and the plugin for Figma didn’t read this information. So you have to fix it yourself.
Another example: the mobile version of the campaigns works not in the way it does on the desktop. Marka can move an image to the next line in the mobile version while on the desktop the images are placed on the same line. We could discover it only in practice”.
Marka’s advantages
“I can see one big advantage that overweights all the flaws: everything is done faster with the new plugin — design, emails layout, and a designer can be a coder, without touching the layout”.
What the manager says
Sergey Sobolevsky, EmailSoldiers internet marketer:
“I often do tasks connected with modular templates and creating such templates consumes much of the team’s time. The new plugin for Figma allows users to give up on the HTML coders’ work and it can be compared in quality with the result of the specialist’s work.
Marka is a great choice for the clients without a corporate coder.
The plugin for Figma is far more convenient than classical drag-and-drop editors: the latter have lots of restrictions when preparing an email.
Marka Email Generator has its own instructional manual, but it won’t help everyone. For proper work you need to know Figma at an average level”.
Summing up
We’ve discovered a new way of creating a layout and helped make it a reality. Our clients liked it as well, so we advise using the Marka Email Generator for your tasks. The tutorial and the basic components library by the plugin developer will help you to get to the first base.
