How To Design Professional Emails with Figma 2024 for Klaviyo

In this video, i am going over how to design optimal email in Klevyio for your E-com brands that will increase your conversion rate!
Want me to run your brand’s email and SMS marketing?
Book a time to speak with me personally
calendly.com/b...
Join Email Elite (a private mailing list for ecom owners and retention marketers)
manage.kmail-l...
Upon entering your receive access to our ecom vault of resources:
- A design file of 100 high performing campaign designs that I’ve done
- Template of our ecom subscription LTV and churn calculator
- Training on how to audit your own Klaviyo account
More to be added overtime.
Instagram @realboyuanzhao

[@BoyuanZhao]

Join our Ecom Growth Vault: www.skool.com/plthora-ecom-growth-vault-6620

[@henz456]

My left ear enjoyed it

[@Kwelar]

This is NOT an "optimal" email design. These are just images and are going to end up in the spam/ junk folder automatically. You need to have html text in the email so it won't get flagged.

[@ryan18462]

Why they use figma to just export as an image 😂

[@JasonDainter]

Exactly. This is awful practise to tell people chunking up big image blocks is a way to get deliverbility. Just google it and you'll see plenty of reasons why this is horrible practice.

[@lucadeloddere4062]

Can’t you export html from figma

[@austinwhiting]

So the emails are all image based? Have you had issues deliverability doing it this way?

[@user-qx2qd5ez3b]

Yeah, so wondering the same. It may end up in the promotion inbox instead of the primary one

[@DagHolmen]

still no reply lol

[@wethecopybros4221]

man you killin me, audio out of only one side every time

[@BoyuanZhao]

hey copy bros sorry about this, gonna check with my editor

[@wethecopybros4221]

@@BoyuanZhao haha its not really that big of a deal, im just bustin ya chops!

[@ItsAlkis]

Lol I have only the right speaker in my PC and I am hearing only the background music

[@JackEcom7]

Nice one man, Love the high level overview. I made something similar but a bit more in depth just yesterday.

[@ry-stewart]

i likeee this, my copy is great but I've just started working with ecom brands so need to step up my design game 😎😎

[@lilbrusselsprout8261]

If it's an image, then how do you make the CTA's actual buttons?

[@keonitebei7881]

this is dope but my klaviyo audience is majority outlook and they dont have the image on, so im stuck on the classic builder crafting these emails

[@elias4855]

I used this exact method, with a very similar template using Figma and Klaviyo and my test emails are going to spam! I tried sending out to 4 email addresses and only 1 of them received the test email in their promotions! Can you please explain why?

[@funniefluffyfun9398]

It's just images, not HTML or text. That's why. What niche are you in?

[@isaiahheine]

love the content boyuan!

[@dimakim]

But not everyone has their image display enabled by default so they wont see anything

[@MonsieurX-17]

This explains why I can't see anything when I tried to check my sent test email to desktop, but the images appear when I checked it through my phone. Thanks.

[@DvJorn]

Very informative and practical! Would you suggest use different ratio's or aspects for mobile versions or can you keep the same layout?

[@emmanuelmiguel5514]

Please can you make a video on how to create the email design from scratch without having an already designed email in figma? The issue is building from scratch not drag and drop from already built email

[@timruder3850]

Hey Boyuan, van you work with slices and universal content sections together in 1 email without having issues with the visibility on different devices?

[@bollywoodmusicbox2031]

Hey come on just for the sake of views, don't share something that affects the deliveriability. What the point of doing this if your email lands to the spam? Only teach what you personally do with your clients

[@baileysallows]

Hi there, how does it affect deliverability?

[@baileysallows]

Curious as im just getting started. Thanks!

[@premvb3500]

@@baileysallows because its a complete image email not html email

[@anthonyponcex]

Image based emails still get high deliverability. Hope that helps.

[@CharliesCustomClones]

@@anthonyponcex are you sure? I do not think so.

[@ArafatHassan-uh9bb]

is it safe to use all images to build a email?

[@workingsubliminal]

Thank you! It's very helpful ❤

[@arabsaleman]

So the email is just images? what about the " I want this button ", the email receiver is just gonna be clicking a picture?????

[@romanlove9624]

great tips here, thanks a lot

[@spacedskunk]

Please people, take this as a how to NOT design emails. How do you personalise it? How do you handle accessibility if someone is on a very small screen since the text will just size to that? What about balanced image-to-text ratio? What about clients that don't show images by default? There's more but this doesn't deserve the attention.

[@ArafatHassan-uh9bb]

I agree with you point.

[@christiana8356]

What about the buttons? Because the buttons don't work being only a graphic. Is it possible to just put a real button via klaviyo onto the image's button?

[@saernst]

kzbin.info/www/bejne/q4fFeoB8YriKfck

[@fabianaruggiero5888]

.

[@DavidAmores-wo7dv]

same thoughts here

[@mathchrome]

Where did you original design copy from? We just need to add these pics from original design? Please make a video from scratch

[@Darlucian]

Why designers create newsletter emails in Figma and not in Photoshop?

[@Ahmadhabash69]

so i cant make a header with diffrent links? example shop men->link to men shooping, shop women ->link to women shooping on the site. etc. etc.

[@ArafatHassan-uh9bb]

I want to make a image non clickable, how can i do this in klaviyo. Because if i don't put a link, in email its becomes clickable and open in other tab for download.

[@MaybeItsAnthony]

Can you make a video on how to optimize emails for users using dark theme? I tried to make the background of all my blocks/sections white, but its still not working

[@dpvrt5117]

is there a way to add multiple, separate links via buttons within each sliced png image?

[@unclejuju12]

make different slices for each of the button sections and provide different links for the different sections

[@rachealkazembe]

I love this!!! Definitely going to give it a go!

[@abigailcarmichael9403]

Hey! Is it also possible to build in Figma for Mailchimp?

[@BoyuanZhao]

Yes l

[@timirichards8111]

How can I practice this

[@kierandwyercompoundflows]

Hey, I thought 600px wide was optimal?

[@BoyuanZhao]

as long as aspect ratios make sense you can limit the height/ width in klaviyo also mobile and desktop differ

[@havalmarshal9221]

Very useful tips👏, but what if we export it to HTML? just wondering

[@brunoescoto9630]

that's the tricky part. they probably use a plug in. yet you need to know HTML if you want the buttons to be clickable. And now that I watched the whole thing this is not the right way to create an email since it's just images, there's no actual text. this damages the email score and could be sent to spam. also, imagine that you tap by mistake and it send you instantly to the webpage. I'm sure he does it the right way but he's not showing it here.

[@havalmarshal9221]

@@brunoescoto9630 Dude, you nailed it

[@marillarose]

the plugin Emailify by Hypermatic is absolutely 🔥 I've been using it for 2 years for work. It costs money but they give you a long trial period to try it out

[@simonsaruggia]

If you export everything like you did, are the buttons cta working? isn't everything an image since you imported pngs?

[@BoyuanZhao]

watch the full video it explains

[@simonsaruggia]

@@BoyuanZhao Oh I understand now, so basically the whole slice png is a link in this way, not only the button thank you

[@junaidzulfiqar8291]

​@@simonsaruggia this is not a good way, customer will get bother if you use image as a link.Let viewer breath in your email template and it will get them attract.

[@mauriciovillarreal2213]

what app is he using?

[@mauriciovillarreal2213]

for the template hehe

[@aquamagie]

Figma

[@ryan18462]

GUYS DONT DO IT