Designing Emails using Figma — Power of NoCode!
In this article, I am going to talk about my entire process of how we shipped brand new email designs for Unacademy using Figma.
Now even though this article is related to design, I am not going to be talking about UI and UX design. This is more where I talk about the process we followed to design and ship beautiful-looking emails.
I was the sole designer on the project and handled everything from start to finish along with other people.
- Product Managers: To understand the list of emails that had to be designed and the content of every email
- Senior Designers and stakeholders: To get timely feedback on my designs and the design direction.
- Engineers: To test if the emails end up looking exactly as intended on every device and breakpoint.
- Illustrator: For the various illustrations that I used in all the emails.
This article is mainly for anyone, especially designers who want to create stunning-looking emails,
- without compromising on design,
- with a smooth workflow between designers and engineers,
- without using paid and complex third-party tools.
Alright then, let’s get started.
About the company
Unacademy is an online learning platform where students in India can study for various competitive exams such as UPSE, IIT JEE, NEET, Banking, CA, and more.
The company hires educators who teach the classes LIVE and students can watch them at their own convenience. Students have to pay a subscription fee to access all the content the platform offers. Similar to Skillshare and Netflix.
Gameplan
So in my experience, there are two ways to go about designing and shipping emails to users.
- Using an email builder like MailChimp or,
- Manually coding it using a tool like MJML.
I’m not aware of any other ways. But these are the ones I am aware of.
Now we did not want to use a tool like MailChimp to create emails as we did not want to compromise on the design aspect. Email building tools are extremely limited when it comes to customization. Hence we decided not to go in that direction.
The other option was to code it. Sure we would ask the engineers to code it for us. But what we realized was that as the number of types of emails increased it would be very hard for the designers and developers to collaborate. We wanted a smooth workflow where neither the designers nor the developers would work too hard on a simple email.
Power of NoCode
So we started to look online for a few solutions and we came across one. We found this plugin for Figma called Marka Email Generator Plugin.
Now based on past experiences, we all know that these so-called plugins that export code from designs are a scam and they don't really do a great job.
That's what I thought too until I used it. And viola 😍
The tool did an incredible job of exporting the code. It exports the HTML file with inline CSS and the images. And, it's responsive for mobile as well, beat that!
I was too excited to get started. But when I started designing the emails in Figma, I realized it was quite complicated than I had expected it to be. I made the mistake of not reading the documentation on how to use the plugin.
So I highly recommend that you start by reading the documentation and exploring the project files that the plugin provides.
Exporting the code is just one click, but the trick lies in designing the UI in a way that the plugin understands.
Design Process
So let me take you through a bit of my design process for this project.
I started off with some ideas and inspiration. There are 2 things that I did to get some ideas for the visual language.
- Checked my inboxes for all promotional emails and,
- Visited a website called Really Good Emails.
As you can see down below, I gathered tons of screenshots and spent a good amount of time analyzing them. A few things that I focused on were
- how the email’s visual language matched the brand and,
- the way the content was displayed on the email.
So after coming up with a very basic direction of the visual language, it was time to design it. But first I sat down with the product manager to understand the list of emails that had to be designed.
There were about 10 different types of emails that had to be designed. OTP, successful purchase, weekly and daily stats, renewal were are a few of them.
But there was one very imporant aspect I kept in mind when designing the emails. And that was scalability.
This meant that I had to come up with plug and play system where anytime we had to design a new email, all we had to do was to use a component and change the text and numbers. Let me show you what I mean.
These are just a few of the plug-and-play components. Let me give you a few examples of how these could be used in action.
Exporting Code
After designing these emails with great care and following all the guidelines mentioned in the documentation, I exported the code and shared it with the backend developers.
They worked on connecting it with their database and sending it to users. I have absolutely no idea about that.
As you can see down below, the plugin allows you to see how the email will look on desktop and mobile devices. It’s pretty dope.
Time to retrospect!
So these were my learnings after working on this project.
- Designing emails are often underrated since it seems to be a very simple thing. But after working on this project, I can confidently say that it is way harder than it looks.
- The biggest challenge with the project was to figure out an entire system to design multiple emails and export the code in a way that our engineers wanted. Learning to use the plugin was extremely hard since the elements had to be designed in a very specific fashion.
- I’m very happy with the final designs that we shipped. But that came with tons and tons of iterations since we were not redesigning anything. We were creating these for the first time from scratch.
How did the emails perform?
Well here is the thing. Every company sends out emails to its users. And we used to send only basic emails such as OTP and successful purchases. Also, these were just text-heavy emails.
So coming up with good-looking emails for various use cases such as reminders, statistics, alerts, etc was really needed.
There was nothing that we felt meant measuring because emails were a necessity for the company.
But we of course got a lot of messages from our users that the new emails looked really good. So that’s good to hear.
And… That’s a wrap!
I hope you guys found this case article useful and informative. Feel free to hit me up on any social media platform if you have any questions. I would be more than happy to have a chat with you.
🔥 2 Free months of Skillshare Premium!
If you want to learn to build a fully functional website from scratch without using a single line of code in Webflow, make sure to check out my Mega Webflow Course for Beginners! You can find the course on Skillshare
Register with my link and get 2 free months of Skillshare Premium and watch it for free.
