How To Design Professional Emails with Figma 2024 for Klaviyo

[@BoyuanZhao]

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

[@henz456]

My left ear enjoyed it

[@vixyp0p]

OMG CAME HERE TO SAY THIS

[@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

[@drigfamous]

@@lucadeloddere4062u can

[@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

[@austinwhiting]

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

[@Rove-d1m]

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

[@DagHolmen]

still no reply lol

[@drigfamous]

There is a plugin which allows you to export it as a HTML

[@JackEcom7]

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

[@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

[@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 😎😎

[@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?

[@lilbrusselsprout8261]

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

[@vixyp0p]

i have this question too

[@musicdroid1]

You link the whole image slice to the desired landing page. So if they click on the button it will link to the landing page / product page.

[@thestranger8528]

​​@@vixyp0p After slicing the button up you add hyperlinks to it so it can be redirected to a landing page

[@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!

[@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

[@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?

[@ArafatHassan-uh9bb]

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

[@romanlove9624]

great tips here, thanks a lot

[@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?

[@fabianaruggiero5888]

.

[@DavidAmores-wo7dv]

same thoughts here

[@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?????

[@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

[@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

[@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.

[@mathchrome]

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

[@rachealkazembe]

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

[@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.

[@Darlucian]

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

[@abigailcarmichael9403]

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

[@BoyuanZhao]

Yes l

[@timirichards8111]

How can I practice this

[@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.

[@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.

[@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.

[@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

[@kieran_dwyer]

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

[@mauriciovillarreal2213]

what app is he using?

[@mauriciovillarreal2213]

for the template hehe

[@aquamagie]

Figma

[@ryan18462]

GUYS DONT DO IT

[@taviux511]

coulnd't handle so many "leftist" style to the video