How To Design Professional Emails with Figma 2024 for Klaviyo
ฝัง
- เผยแพร่เมื่อ 11 พ.ค. 2023
- 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/boyuanzhao/growt...
Join Email Elite (a private mailing list for ecom owners and retention marketers)
manage.kmail-lists.com/subscr...
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
Join our Ecom Growth Vault: www.skool.com/plthora-ecom-growth-vault-6620
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.
Why they use figma to just export as an image 😂
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.
Can’t you export html from figma
love the content boyuan!
Nice one man, Love the high level overview. I made something similar but a bit more in depth just yesterday.
great tips here, thanks a lot
Thank you! It's very helpful ❤
i likeee this, my copy is great but I've just started working with ecom brands so need to step up my design game 😎😎
man you killin me, audio out of only one side every time
hey copy bros sorry about this, gonna check with my editor
@@BoyuanZhao haha its not really that big of a deal, im just bustin ya chops!
Lol I have only the right speaker in my PC and I am hearing only the background music
Very informative and practical! Would you suggest use different ratio's or aspects for mobile versions or can you keep the same layout?
So the emails are all image based? Have you had issues deliverability doing it this way?
Yeah, so wondering the same. It may end up in the promotion inbox instead of the primary one
still no reply lol
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
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
Hey Boyuan, van you work with slices and universal content sections together in 1 email without having issues with the visibility on different devices?
If it's an image, then how do you make the CTA's actual buttons?
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.
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.
is it safe to use all images to build a email?
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
So the email is just images? what about the " I want this button ", the email receiver is just gonna be clicking a picture?????
is there a way to add multiple, separate links via buttons within each sliced png image?
make different slices for each of the button sections and provide different links for the different sections
I love this!!! Definitely going to give it a go!
But not everyone has their image display enabled by default so they wont see anything
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.
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?
th-cam.com/video/uVbIMF-SWGg/w-d-xo.html
.
same thoughts here
Where did you original design copy from? We just need to add these pics from original design? Please make a video from scratch
How can I practice this
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?
It's just images, not HTML or text. That's why. What niche are you in?
Hey! Is it also possible to build in Figma for Mailchimp?
Yes l
Why designers create newsletter emails in Figma and not in Photoshop?
If you export everything like you did, are the buttons cta working? isn't everything an image since you imported pngs?
watch the full video it explains
@@BoyuanZhao Oh I understand now, so basically the whole slice png is a link in this way, not only the button
thank you
@@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.
Very useful tips👏,
but what if we export it to HTML? just wondering
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.
@@brunoescoto9630 Dude, you nailed it
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
Hey, I thought 600px wide was optimal?
as long as aspect ratios make sense you can limit the height/ width in klaviyo
also mobile and desktop differ
what app is he using?
for the template hehe
Figma
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
Hi there, how does it affect deliverability?
Curious as im just getting started. Thanks!
@@billionsbybailey because its a complete image email not html email
Image based emails still get high deliverability. Hope that helps.
@@anthonyponcex are you sure? I do not think so.
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.
I agree with you point.
GUYS DONT DO IT