Figma: a great time-saver to mechanize email design

I create tailor-made email templates for Badsender’s clients, using numerous blocks to automate email production. The designed templates are developed into HTML/CSS, configured and inserted into our email builder ‘Le Patron’. This is not a feat: many people do this daily. From ‘Le Patron’, our clients can choose the elements they want to keep or not, change the content, modify the pictures, the internal and external margins… Thus creating assembly-line emails. As the name suggests, it’s just an email builder, made to design emails by the shovel load very intuitively. ??

Nonetheless, creating such templates requires a tool that facilitates the designing process, that centralizes the whole of the typos styles, as well as the colors and the various elements from the visual identity guidelines. Moreover, this tool should be a smart one and be able to automatically adapt the design when you add new units. I’m not asking for K2000, but still.

Let’s be clear: your client wants to be able to choose between dozens of different units (a 100% wide image with the text below and a Call-To-Action, 2 or 3 columns standing side by side with image, text, price, CTA, stand-alone and centered CTA, footer, header version 1 and version 2, countdown and so on). Elaborating an email frame that takes into account the whole of those contents is a way to mechanize (or ‘automate’) email production. But this method of designing needs to rely on consistent styles.

Review of the existing solutions

Fireworks

Up to now, I used the Adobe Suite Fireworks software to create this type of templates. I know, I might be the only guy in email marketing to use it, but don’t judge, ok? I’ve always been a bit… different.

This is quite restrictive when email height is concerned, as Fireworks generates serious bugs when you exceed 6000 pixels (a limit that is easily reached with newsletters’ templates including about twenty units). Moreover, if a substantial quantity of elements is accumulated, the tool uses a significant amount of memory, that leads to bursting point and crash. Or is it my machine? Anyway, this is a drawback you should take into account. ??

Photoshop

Photoshop has never been my favourite tool from the Adobe Suite to design emails templates. I find this tool very good for photo retouching, but not designed to create prototypes. As the presentation states, Photoshop is a way to “Combine photos, artwork, elements, and text to craft entirely new images on desktop or iPad.” The die is cast! The interface isn’t always intuitive and you can’t share your templates with your clients. Yes, I’m snitching on it (I don’t give a damn; the software is aimed at pros, so I shouldn’t face a heavy sentence)! One also has to consider the price of this software: €23,99 a month or €59,99 a month (including all taxes) for the whole of the Creative Cloud. Is it worth it? Figma costs me €15 a month… Oops, spoileeeeeer. ??

Adobe XD

Yes, Adobe XD is good for email design. It’s an interesting tool that incidentally looks like Figma, as much regarding the interface as regarding the functionalities. But templates sharing isn’t its strength. And some other features aren’t up to what Figma can offer to create an email template. I encourage you to read the comparison that I served over and over to my colleague Greg (sorry Greg, I know I really bored you with this my friend).

Other solutions

Solutions like inVision or Sketch allow you to collaborate easily with your clients, to gather feedback and comments, and, coupled with tools like Zeplin or Measure, to work closely with your integrator/developer. But only one tool really drew my attention… AND THIS IS MY TEASER! (Not a Game of Thrones one).

Figma

Introduction

Figma enables you to design an email, to create Design Systems, to collaborate very easily, to save your work very simply, to import SVG in one click, to work on vector stuff, to enlarge, to zoom (and dezoom), to add units in a flash (while automatically and cleverly adapting the template), to assemble styles, to organize your files… TO SOMERSAULT, PLAY, FOOL AROUND! Ok I’m getting carried away… And I’m now going to focus on this tool. ??

Auto Layout: a super powerful feature

Auto Layout corresponds to an automated page layout, certainly THE feature that became essential to me. Actually, consider that you have a title, a text and a CTA within the same unit (with a plain background). You’d like this unit to display 40px internal margins on the right and left, 50px internal margins at the top and bottom, and the content (title, text, CTA) to appear on the left with a 10px space between each block.

Figma makes this possible in a flash, with incredible precision and neatness. You just need to assemble your components and to select the Auto Layout conversion… And that’s it. It’s magic (like Paris)!

And this is not all. If you push it, you can also entirely create your newsletter template with Auto Layout, meaning that if you add or remove a unit, the template automatically adapts itself — no need to move up or down the rest of the content. You can even automatically manage the spacing between each unit or change their order: IT’S A HUGE TIME-SAVER! ??

Figma ‘quick’ responsive email

So, you might have understood from my previous point that Auto Layout allows you to choose between two configurations: horizontal or vertical… kudos! When you think about basic responsive principles, you think that what you really need is to be able to move from a 600px width to a 320px or 360px width for mobile phones (I mean smartphones of course).

I won’t start a discussion about the recommended width for emails, as I already wrote an article on that subject. What I mean is that a ‘desktop’ format is generally 540px to 640px wide, whereas a ‘mobile’ format is about 320px to 360px wide. You therefore opt for a vertical format where side by side elements move one under the other. This is easily done with Figma, that allows you to alternate horizontal format and vertical format.

Adding Google Fonts and special typos

One could think that an online platform doesn’t allow you to easily use the fonts installed on your machine… Certainly not! You just need to install ONCE — and only once — a little plug-in offered by the tool, and you’ll be able to access all typos installed on your good old computer. You’ll also have direct access to the Google Fonts library… Now you’re walking on air. We all know that good all Google Fonts are exactly what you need in email marketing when you wish to use exotic and original typos.

Atomic design…

Atomic what, sorry? Atomic design is a new approach of modular design imagined by the webdesigner Brad Frost to create Design Systems from simple components: atoms, molecules, organisms, templates and pages. Atomic design amounts to a biological metaphor: atoms (the smallest elements) gathered together create molecules that together create organisms that in turn create templates… And so on.

Concretely, consider that a simple text in a specific formatting (typo size, line spacing etc.) is an atom. If you add to this text a background color, internal margins, rounded corners, you’ll get something close to a Call-to-Action (molecule). Joined to a title and a text, this CTA becomes a unit (organism). Assembled end-to-end, organisms make a template.

Designing a good master template also relies on the work done ahead of atomic design. Indeed, defining the different styles for titles, paragraphs, notes, CTA texts, tabs etc. makes the designing stage easier and more coherent.

That’s where Figma makes a great start: you can save ‘basic’ styles to be able to use them again. This way, you can define a whole set of text styles and be sure to stay consistent when designing your units. The first implementation requires a bit of patience but is really time-saving in the medium and long term. See it like a colonoscopy: not a pleasant thing to go through, but once it’s done, hello peace of mind! And you can even do it from home; merci remote working!

You need to create a ‘working team’? With Figma, you can create a Design System allowing you to start from coherent elements when you’re working collaboratively. Let’s be clear about the point I’d like to make as far as emailing graphic design is concerned: suppose you’ve created several email campaigns for one of your clients and at some point, you need an external service provider to create a campaign for that client (you know, you can’t do it this week because of your swimming lesson — yes, you have a certificate to prove it!). With a Design System, your external provider will be able to create something that is consistent with what has already been done for your client. In short, this will simply save you time and money.

The trouble with atomic design is that no matter how powerful it is, it can be restrictive for designers in terms of freedom. But as far as email marketing is concerned, when you know all the constraints linked to email HTML integration, it’s not a bad thing to be constrained beforehand (precisely on graphic design); to be limited to what is feasible and avoid getting carried away (yes dear).

…And components

What’s the next step once your styles and atoms are ready to use? Well, you simply need to put them together, in order to create molecules and organisms. So, once you’ve defined your level 1 and level 2 titles styles, as well as the finish of a major CTA, you can bring them together and create a first ‘unit’. ??

Once your unit is created, Figma enables you to save it as a component, to use it as you wish in your email, and even to duplicate it. But the main point is that the original component stays the ‘original component’ (logical, I know): therefore, any change made on the first component will be automatically applied on the duplicated component.

So, I say hats off, bravo and well done. Thanks to Figma, you can now gather all of the components into a file, and when you need to use them, retrieve them from the shared libraries to create another email in a jiffy. Actually, the tool is like an email builder, but without code — you’re only designing. ??

Sharing email templates with Figma…

This is the icing on the cake. When you need to submit your template to your client, you usually have no other option than converting the template into JPEG format and send it by email. Don’t tell me stories, I know you’ve already been there. And those who use inVision simply know how obsolete this is.

Well little rascals, hear me out: Figma implemented a way to share your template in no time at all through a URL. Moreover, your clients can only see it in view mode — they won’t be able to directly change any element (even though this can be done through another functionality for collaborative work). So, you send a URL, your clients log in and can even see you working online! Extremely convenient when you’re on the phone with them asking you to implement their feedback. Well, if you forget about the little feeling of being spied on when you follow your colleagues or your project managers’ cursors gliding onto the template (call it a Stasi, KGB, Big Brother or Gestapo feeling ??).

… And sharing comments

This is another appreciable feature, also offered by inVision for instance: gathering your clients’ comments and feedback on the template (see these lovely speech bubbles displaying the corrections and changes to make?). Not to be outdone, Figma also offers this option. And when you design a master template reaching a 6000px height, believe me when I say that it feels nice to find easily all the updates you should make.

Plug-ins…

Saving time also comes down to saving minutes here and seconds there (doesn’t it?). Figma and the Figma community offer plug-ins that REALLY make this possible: one ‘Lorem ipsum’ plug-in generates a text in Latin to simulate the place of a paragraph, another one directly imports imagery from Unsplash, a third one can introduce vector icons, a fourth one can rename layers with consistency using logical sequences according to the parent folder name, and you can also replace units contents with ‘real’ contents transcribed into an Excel file…

In short, all those ‘little extras’ are extremely useful in email design. Figma plug-ins are probably underestimated as they indisputably represent such a time-saver when designing an email template. Even more when they’re targeting accessibility and contrast. If the control room could send a little animation, pleaaase!

…And offered files

The Figma community is generous; they also offer copyright-free files that are very helpful: a wireframing components kit (to create a prototype out of your master template — really useful believe me), an illustration pack, icons galore, tutorials, mockups, logos, cases studies… Oh my gosh, all sooo interesting! It’s like opening a chocolate box, you’ll want to try everything.

Vector images

I’ve always been hopeless at redesigning vector pictograms. Or at designing any sort of vector picture to be honest. Bézier curves, control points… I’m just not good at it. Thanks to Figma, I finally recovered a liking and a capacity for creating icons for an email for example. I’ll spare you the list of things I can do now (it isn’t worthy inflicting this upon you, really). But the thing is that I manage to do it now, and being able to work on vector stuff using a template/prototype tool isn’t usual.

When I mention ‘vector images’, I also mean the possibility to zoom on a template almost indefinitely while keeping optimum quality. When I was using Fireworks, I had to send my templates to my customers in a JPG format, and they often came back to me complaining that it was all blurred when they zoomed on the template (yes of course, sweetie). Well, I’m done with this; now customers can zoom as much as they like, it’s open bar!

Transition effects

And to rub it in (forgive the turn of phrase), I’d like to add that you can also put transitions in place and show their effects to your client. I know, pure HTML and CSS transitions require either keyframes animations or hover animations. And the support of these CSS features isn’t ideal… Be that as it may, if you want to stand out from competition, this is a good move to make. Moreover, if you properly analyze your sending list, you might be quite right to allow yourself this kind of ingenuity. Yes indeed.

Code access

Finally, it should be remembered that you can very quickly access the ‘Inspect’ tab, which, for its part, allows, a bit like the ‘inspect the code’ tool of some browsers, (sorry for all those commas, hope you don’t get lost) of knowing CSS properties and values to expand in code for HTML developer. This is priceless. But I prefer to leave the floor to my colleague Grégory 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 going for it … I could for example mention the visibility of the styles applied to the elements such as the background colors, the sizes and border colors, the sizes and colors of text, etc.

The tool even goes so far as to indicate spaces between elements at the hover of the mouse and allows for quick and efficient copy and paste of text and / or style. In terms of integration, you no longer have to take out Photoshop, measure “roughly” the space between two elements, click in different places to have everything you are looking for. Having all of these information directly at hand saves precious time.

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

In short, even in terms of integration, Figma is a great time saver as he prepares and organizes the integrator’s work superbly.”

Convinced now?

If the answer is ‘No’, I think I’ll lose it. More seriously, I’d be happy to get some feedback: what’s your view on the matter, have you ever used Figma to create an email? And if not, why? Have you already designed master email templates, or do you plan to? Do you need assistance on email design? Do you need a reliable email builder? Well, I’ll leave it here, I think I’ve done my part!

PS: I hereby vouch that Figma hasn’t paid us one cent for this article, nor offered us any bribe or gift. Hey, don’t want anyone to think that we have any interest in this and are not neutral. By the way, where’s my Montblanc pen to sign this? Honey, can you have a look next to the Ming vase?