One of these changes will likely involve changing the size and placement of images. These changes can make your email longer, shorter, or even involve shifting around entire sections. Throughout the design process, you’ll likely be making changes to multiple aspects of your email’s content, which will impact its overall structure. This means depreciated elements like links that don’t work anymore or fonts that aren’t part of the brand guide, a thing of the past. Using components and variants ensures that key brand elements are up to date as long as you are keeping your design system up to date. Some quick wins are headers, paragraphs with toggles for a header, subheader and body text, CTA’s, and footers. Keeping your design system updated frequently will only save you time and make the design process much smoother when it’s time to start creating.Ī great way to avoid this is to start creating components that are used throughout all your emails ASAP.

But if it has any redundant or outdated information, it could throw off your audience. But even if you’re just working on a personal project, learning to keep your design system as organized as possible will help you avoid confusion.įor example, you may forget to update the footer of certain emails because it’s an element that usually stays the same. Brands are constantly coming up with new ways to improve their design standards, which means you have to keep up with them as a designer. #2 Design systemĭuring the design process, you’ll have to continuously evaluate which elements and components need to be changed. On the other hand, if you’re going to be creating a one-off email with a more unique design, you can have more flexibility. If you’re designing for a client, try to get an idea of how they want to use these emails beforehand. In that case, make sure the structure of the email is dynamic enough to allow for small copy or visual changes. #1 Email typeīefore you start designing an email in Figma, you’ll want to take into account the type of email you’re creating.įor example, if you plan on making a campaign of emails with a similar layout, you’d probably want to create a template. That’s why in this post, we’re not only going to go over some important tips to follow as you start designing emails in Figma, but we’ll also look at an easy way to get responsive HTML email code in just a few seconds using a tool called Cannoli. However, there are still certain aspects you should keep in mind as you use Figma to create emails specifically–especially if you’re fairly new to the platform. That’s why not only designers love this tool, but also developers, project managers and marketers alike. A few reasons are that the interface is more intuitive, excellent for handoffs and prototyping, and easy collaboration among other features. Figma is now one of, if not the most popular, tool for today’s UX/UI design.

Figma custom fonts