Marka Email Generator: a Figma Plugin for Email Designers

Marka Email Generator is a plugin for Figma that can help email designers save much time and effort. It's a no-code tool that can create adaptive and beautiful emails that are compatible with popular email clients and look amazing both on desktop and mobile screens.

At the beginning, the options of this email plugin were limited, but the idea got us hooked. At that moment, it seemed that the plugin would simplify the creation of basic digests and triggers. We met the developer of this email generator, Grigory Mashkovtsev, and offered him our expert help in product development.

We offered the developer some corrections and participated in testing. While we were working on the plugin, it became clear that we've underestimated the potential of the product.

Features of Marka Email Generator

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.

2. Adaptivity

This email generator allows you to easily create adaptive emails. This feature is fully controlled by the designer.

3. Email client support

The emails layout generated by this Figma plugin is always being tested on emailonacid.com and supported by popular email clients.

4. Email arbitrary default width support

Basic 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 that differs 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 visibility of blocks in the desktop/mobile version

You may need it to display 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

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.

10. Chessboard blocks support

When uploading the code, the plugin identifies the frames with the vector graphics and transforms them into PNG format.

11. Downloading an email as an archive with the images for this archive exported 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

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 with 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 an email 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:

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 design pf the modular template to the logic of Marka Email Generator. Now, the emails are being done on the client's side; it's similar to working with a drag-and-drop editor.

Another job is emails for the i-Media agency:

What Our Clients Say

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 the 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."

The Feedback of Our Team

What the Designer Says

Andrey Vedernikov, a Creative Soldiers 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 email mockup.
Only an email mockup created according to the rules of the plugin's developer fits. The main functions of the plugin for Figma are described in a Marka guide. It also contains detailed explanations of its work. However, 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 ones 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.