badsender logo

Save time with Figma to industrialize email creation.

05/11/2020
Industrializing email design is a challenge. After years of using the prehistoric Fireworks for email design, it became urgent for me to find a modern tool. After a lot of research, my choice was Figma. I'll explain why.

I realize for the customers of Badsender Customized email templates with many blocks to automate email production. Thus, the designed templates are then developed in HTML/CSS, parameterized and inserted in our Email Builder, "The Boss. It's not a feat, there are plenty of people who do this every day. From "Le Patron", the client can then keep this or that element, change the content, modify the photos, the internal and external margins and thus produce emails by the dozen... It's an email Builder, as its name indicates. It allows you to build emails by the bucketful, in an intuitive way ????

But the realization of such templates requires a tool that simplifies designThis tool should also be "intelligent" so that, as far as possible, it can automatically adapt the design when new modules are added. I don't ask either K2000but a minimum.

Let's be clear, and imagine it: the customer wants to have the choice between several dozen modules (100% wide image with text underneath and call-to-action, 2 or 3 columns side by side with image, text, price, cta, cta alone centered, footer, header version 1, version 2, countdown, what have you...). Preparing an emailing skeleton that includes all of these contents will allow you to industrialize the production of emails. (The term "industrialize" is not necessarily the right word, I prefer "automate"). But this creation will have to be based on coherent styles.

Update on existing solutions

Adobe Fireworks

Fireworks

Until now, I was using the Fireworks of the Adobe suite to be able to create this type of pattern. Hey ho it's ok ! I know I'm the only one using it but don't blame me Pierre! I've always been a little... different.

I was quickly constrained as to the height of the email: Fireworks has serious bug problems once a height of 6000 pixels is exceeded. And this limit is quickly reached when we are talking about a newsletter template gathering about twenty modules. Moreover, when a significant number of elements is accumulated, the tool consumes a significant amount of memory. Which quickly leads to saturation and crashes. Or maybe it's my machine that's a bit of a wreck. Anyway, you have to spend some time there. ????

Adobe Photoshop

Photoshop

Photoshop has never been my favorite of the Adobe suite for email layout. The solution seems to me much more adapted to photo editing work, but not to prototyping. Besides, the synopsis says well "Create beautiful images, photos and illustrations on computer and iPad". So, the die is cast. The interface is not necessarily intuitive, and the sharing of models with the customer is not there either. I don't give a damn, I'm just like that! At the same time, it's a software for professionals, so I don't risk anything. And then, you also have to consider the price of the software 23.99/month including VAT, or 59.99/month including VAT for the "All Creative Cloud". When it's worth it, I don't say so, but Figma, I pay 15 balls per month... Oops, spoileeeeeer... ????

Adobe XD

Adobe XD

There is also of course the solution Adobe XDvery strong for the layout. A really interesting solution... Yes yes... Who looks like two drops of water to Figma by the wayThe interface and the functionalities are very good. But sharing a template is not its strong point, and other points were below what Figma could provide me to create an email. I invite you to have a look at this very good comparisonthat I served to my colleague Greg with all the sauces (sorry buddy, I've blasé you with it, I know baby).

InVision and Sketch

Other

There are then solutions such as inVision or Sketch. They make it easier to collaborate with the client, to gather feedback, comments and, coupled with tools like Zeplin or Measure, to work closely with the integrator/developer. But only one really managed to catch my attention... CRAZY TEASER ! (and I don't mean "Games of Thrones")

Figma

Figma

Introduction

Figma is the possibility to create an email, some design systemsYou can collaborate very easily, save your work easily, import svg in one click, work on vectors, enlarge, zoom in and out, add modules quickly with, in addition, an automatic and intelligent adaptation of the model, gather styles, organize your files, MAKE GALIPETTES, DO THE FOUFOU !!! I'm getting carried away... And it is precisely this tool that I will focus on in this article. ????

Auto-layout: a powerful figma feature for email.

Auto layout is an automatic layout (even for this I used Google translate, I am appalled...). And it is without a doubt THE feature that has become, for me, indispensable. In fact, consider that you have a title, a text, and a Call-to-Action in the same module (module with a solid color background). I want this module to have internal margins of 40 pixels on the right and left, 50 pixels on the top and bottom, and that the content (title, text, and call-to-action) is left-shod, with a spacing between each content of 10 pixels.

In no time at all, this is made possible for an email with Figma, with incredible precision and sharpness. All I have to do is group my elements, then select the auto-layout conversion. Boom, it's like Paris, it's magical.

auto layout figma
Auto-layout demo. It amazes you, doesn't it?

And it doesn't stop there, you guys! Because if we pull the functionality to its limits (it doesn't mean anything), you can also create your own newsletter template with the auto-layout. So when I add or delete a module, the layout automatically adapts, no need to move the rest of the content up or down. I can even automatically manage the spacing between each module, or change the order of the modules! IT'S A HUGE TIME SAVER! ????

emailing template in auto layout on figma
Here's the slap in my face!

Quick responsive for email in Figma

Because, you may have noticed in the previous point, but in fact, the auto layout allows you to choose two types of configuration: horizontal, or ... Vertical, bravo my rabbit! So, when we think about responsive, we think that we need to go from a width of 600 pixels to a width of 320 or 360 pixels wide for a consultation on mobile device (smartphone, I mean).

I do not enter the debate of the recommended width for an email I have already made an article on this point. What I mean is that a "Desktop" format is generally between 540 and 640 px wide. For a "Mobile" format, we will be more around 320 or 360 pixels wide. We then prefer a vertical format and the elements side by side will tend to go "under each other". This is also very quickly done with Figma, by alternating from horizontal to vertical format.

responsive figma email
Have you seen how it automatically adjusts? Pretty cool, huh?

The addition of Google font and special typos

You might think that with an online platform, it would be difficult to use the fonts installed on your machine... No way! The tool provides a small and practical plugin (you only need to install it once) for access the fonts installed on your good old PC To top it all off, we also have direct access to the Google font. And when it comes to using exotic and unusual fonts in email marketing, you yourself know that nothing beats a good-old-Google-Font-of-families.

typo figma email google font
Look at this choice...

The atomic design...

Quoah? What is it? Atomic design is "a new approach to modular design". designed by web designer Brad Frost to create Design Systems from simpler components: atoms, molecules, organisms, templates, and pages. Atomic design is finally a biological metaphor : the atoms (the smallest element) assembled create molecules, which themselves create organisms, which create templates...

Concretely, consider that a simple text, in a particular formatting (type size, weight, line spacing) is an atom. If you add to this text a background color, internal margins, rounded corners, you will get what could be a Call-to-Action (molecule). This call-to-action, next to a title and a text, could compose a module (organization). The organisms, put together, create a template.

All the design of a master Template also lies in the upstream work of the atomic design Defining styles for the different levels of titles, paragraphs, mentions, call-to-action text, and menu tabs makes it easier to create organizations in a consistent manner.

A panorama of styles that you can create yourself. And still, my panorama is really light.

This is where Figma starts very strong it is possible to save "basic" styles to be able to reuse them. Thus, you can define a whole set of text styles and colors to be able to call them later and remain consistent throughout the creation of your modules. It takes time to implement, but it saves a lot of time in the medium and long term. It's like a colonoscopy: it's a bad moment to go through, but afterwards you're fine! And moreover, it can even be done at home, within the framework of telecommuting...

When creating a new work "team", Figma will allow you to create a design system so that, when collaborative work is necessary, everyone can start from consistent elements. I explain and detail my point of view in the field of emailing graphics: Imagine that you have created several campaigns for one of your clients. Tomorrow, you ask an external provider to create a campaign for your client (because you have a pool and you have a travel certificate). If a design system exists, the provider will be able to propose something consistent with what was done previously (and it will also save him time and money for you). Do you understand?

A small screenshot of a beginning of atomic design

The concern with theatomic designis that it is very powerful, but it is somewhat limiting in terms of freedom for designers. But in the field of email marketing, when you know the constraints related to HTML email integration, it is also good to have constraints upstream (on graphic design specifically) to limit yourself to what is really possible to do and not to get carried away.

... and the components

Because once our styles and atoms are ready, what do we do? What do we do? Well, all we have to do is assemble them to create molecules, then organisms. So, once I have defined the style of a level 1 and level 2 title, and the rendering of a "major" Call-to-action, I will be able to put them together and create a first "module". ????

figma email component
An example of a component created

Once this module is established, I will be able to use Figma to register it as a component (component if you are not bilingual) and use it as I wish in my email, and duplicate it. But the main interest lies in the fact that my initial component remains "the initial model". (logical after all... It will be cut in the editing) : any modification made on the first component will be automatically reflected on the duplicated component.

Component email figma
The ease of duplicating a component is disconcerting... And the modification of the duplicated component too!

And there I say hat, miracle, and genius. It will now be possible for me, from Figma, to group all the components in a file, and to call on them via the shared libraries to be able to recreate a new email very quickly. Finally, figma is also an email builder, but without the code: we are only at the design stage! ????

figma email component library
With Figma, using my component library in an email creative is a breeze! (I'm very good for commercials)

Sharing email templates on figma...

This is the icing on the cake. When you want to get the client's opinion, you are often forced to export the model in JPEG format, then send it by e-mail. Don't tell me you've never done this, I won't believe you. For those who use inVision, you know how outdated this method is.

Well my rascals, you should know that Figma has set up the possibility to share with a disconcerting velocity, via a url, your email model. (and only its visualization for example, I reassure you: the customer will not be able to directly modify elements, even if it is possible via another functionality for the collaborative work). So, I just send a url, the customer connects, and can even see me working online! Ultra convenient when I have the client on the phone and he asks me for feedback, isn't it ? On the other hand, there is a slight "stasi/KGB/BigBrother/Gestapo" effect when you see your colleagues' or project managers' cursors moving around the model live... (isn't it Marion Moillet? ????)

share email template
As easy as sharing a krit&krat

...and the comments

This is also a very popular feature on inVision, for example: collecting customer comments and feedback on the model (with cute little bubbles, to centralize and find all the patches or changes to be made). Figma is not left out, since the functionality is also present! And when you make a master model, with a skeleton that reaches a height of more than 6000 pixels, I can tell you that it is very easy to find the updates to make.

The plugins...

Saving time also means make small savings of seconds and minutes on the right, on the left. And, as you know, "there are no small economies, only rolling stones"! (Call me Jean-Michel-about-town). The extensions made available by Figma and its community CLEARLY make this possible: a "Lorem ipsum" plugingenerating a Latin text to simulate the location of a paragraph, another one that import visuals directly from Unsplashanother fromintroduce icons in vector formatanother one for rename layers in a consistent manner with logical sequences according to the name of the parent group, or for replace module content with "real" content transcribed in an Excel file...

In short, all those little extras that go a long way when creating an emailing design. We probably underestimate them a lot, but Figma plugins are an undeniable advantage for saving time in designing an email template. Even more so when they target the issue ofaccessibility and contrast. If the control room could send the little animation, thank you!

figma plugins
An impressive list of plugins. All guedins.

... and the proposed files

Because the Figma brotherhood is generous, and does not stop at extensions: it also offers fileswhich are free to use and will be of great help to you: a kit of components of wireframe (to prototype your Master Template skeleton, you'll soon have the use of it, believe me!)s, the illustration packss, the icons in abundance, from tutorialss, the mockupss, the logoss, the case studies... Oh my Gosh, one would quickly lose track of everything so interesting. It's like a box of chocolates, we have all the flavors and we want to taste everything!

figma community files
A generous community in files, I love it.

The vector

I've always been a sucker for redrawing pictos in vector. Or even to make a drawing in vector for that matter. Bézier curves, control points... If you want, I like it, but I'm not good at it! And in fact with Figma I finally found the taste and the ability to make icons for example in an email. So, I'll spare you the torture of inflicting on you what I manage to do (it's not worth it, believe me). But at least I can do it! And being able to work on vector graphics in a mockup/prototyping tool, it's not completely common!

What I also mean by Vector is the possibility of be able to zoom in almost indefinitely on a model, while maintaining optimal quality! Before, on Fireworks, as I exported my layout in JPEG format, I often had the client say "Yes, but when I zoom in, it's blurry!" (he's cute...). Well, that's all over! From now on, it will be able to zoom at will, like a buffet!

vector figma email mockup
Zoom, zoom, zoom and it's not for conferences!

Transition effects

Finally, I would like to make a point (even if the expression is rather negative: you drive the nail in for a coffin, right?) There is a way to set up transitions and to make the client see the effects. So ok, a pure HTML and CSS transition requires either animations via keyframes, or animations on mouseover (:hover). And the support of these CSS features is not top notch... Still ! If you want to stand out from the competition, this is an advantage to take as well. And if you analyze your mailing base carefully, you might be right to indulge in this kind of fantasy. Yes!

transition CSS email animation
Ahhhhh... A hover effect as I like them, even if the support is deplorable!

Code access: figma improves email coding.

Finally, it should be remembered that you can quickly access the 'Inspect' tab, which, for its part, allows, a bit like the tool 'inspect the code' of some browsers, (sorry for all these commas, I hope I won't lose you) from know the CSS properties and values to develop in the code for the HTML integrator/developer. That's priceless. But I prefer to leave the floor to my colleague Gregory Van Gilsen to give his opinion on this part:

"Thomas asked me for my opinion on Figma. For the design part, I trust him completely! And for the integration part, I admit that the software has a lot of things for him... I could for example mention the visibility of the styles applied on the elements like the background colors. Or border sizes and colors, text sizes and colors, etc.

The tool even goes so far as to indicate the spaces between elements by simply hovering the mouse over them and allows quick and efficient copy and paste of text and/or style. In terms of integration, there is no more need to take out Photoshop, to measure "roughly" the space between two elements, to click in different places to get everything you want. Having all these indications directly at hand is a precious time saver.

And, the icing on the cake, the export of images can be done directly by selecting the desired image. No need to create a slice, to isolate the image by digging in the layers to make the background transparent to get the png export. One click on the image, one click on the export button, and boom, your image is ready to use!

In short, in terms of integration, Figma is a precious time saver: it prepares and organizes the integrator's work superbly well."

So, convinced?

If you answer "no", I'll go crazy and take off my underwear. No, let's not exaggerate either! I'd be happy to get some feedback on the subject though. Please give your opinion, your feeling: have you ever used Figma to create an email? If not, what for? Have you ever made giant emailing templates? Do you plan to do any one day? You need of support on the subject ? Or do you want to an email builder who's holding up ? ???? I'll stop, it's getting boring as Sophie Tapie would say...

PS: Figma didn't pay us any money for this article, neither bribe nor gift, I specify. No, because then people will think that we have interests, that we are not objective and everything... Where is my Montblanc pen to sign the article? Honey, can you look by the Ming vase?

Need a design system email ? Or an email design at all? Or an HTML integration for email ? Or an email builder ? We can also offer you :

Badsender also animates a training on the subject of HTML development of an email !

Leave a Reply

Your email address will not be published.