How To Design Emails In Figma For Klaviyo (2024)

[@Chris.Retention]

➡ Get more email design resources here: get.retainwithemails.com/guide

[@louis-emilepattyn6931]

Bro you have no idea how much this simple video helps, massive thanks brotha

[@Chris.Retention]

thanks, man 🥂

Nice one bro! hope your channel grows fast.

[@Chris.Retention]

Thanks, man - glad you enjoyed the video 🤝

[@KingKai365]

Thank you bro. I'm starting an email marketing business and this is GOLD

[@Chris.Retention]

Glad you liked it, man 🥂

[@benrainford1319]

You did such a good job with the design and copy that I now want to buy the product. Wow. Thanks for the tutorials.

[@Chris.Retention]

Haha thanks 🤝

[@AnneCarvajal]

Thank you! I’m learning how to use Figma, and it’s been a great help. I just subscribed to your channel.

[@Chris.Retention]

@AnneCarvajal good luck on your Figma journey and glad you found the video helpful

[@petrunecula]

Christophe, amazing amazing, glad to have found this tutorial, thank you !

[@EdWilliams]

Dope content, my guy! Thank you! Super helpful.

[@Chris.Retention]

You're welcome! Glad you like it 🤝

[@drinktribini]

Well this is awkward - this is our brand and we just found out this video existed...but if you're an espresso martini fan, please support our small business! new customers get 15% off!

[@Chris.Retention]

Happy to add your 15% off discount code to the description if you think that would help - I would have ordered if you guys shipped to the UK. Best of luck with Tribini! 📈

[@teeshesee]

Oh this video is excellent. Thank you for this.

[@Chris.Retention]

Glad it you liked it 🤝

[@nabeelazeezdxb]

Solid tutorial thank you sir

[@Chris.Retention]

Thanks, glad it helped 🤝

[@FeiraTudo]

Thank you!!

[@Chris.Retention]

You're welcome 🥂

[@ryan18462]

Great vid bro!

[@Chris.Retention]

Thanks 🥂

[@JE-zl7io]

This video is a godsend bro, thank you

[@Chris.Retention]

Hahaha - appreciate you, brotha

[@Davor_Antonijevic]

Brother, keep going I love you

[@Chris.Retention]

love you too

[@simplywhitney362]

Great video! Thanks so much for showing the linear gradient tool. That is going to be a game changer for my email designs. Question, do you use the slice tool to export sections of the email and then load them into the ESP?

[@Chris.Retention]

Glad you enjoyed the video 🤝 Here's how I export image-based emails: kzbin.info/www/bejne/onyVn2mOmNCIZ6ssi=hBL0rbUcF5nFXkJR

[@drlisadaniel]

this one is over my head but I see how it could be really helpful

[@Chris.Retention]

100% - Figma is the best, but it takes some time to get used to it.

[@codingbox4199]

great video where do you get inspired for such clean designs?

[@Chris.Retention]

I used to browse reallygoodemails(dot)com & mailcharts(dot)com a lot now, I'm subscribed to loads of newsletters with great copy/design probably gonna do a video on the thinking behind making the email

[@AmigoWay]

Please do. Like, How do you prepare before making an email @@Chris.Retention

[@Realcolorsofegypt]

Thank you for this. How did you separate those elements that you are using from the email? I can't figure out how to separate those layers. Thank you.

[@umairunc7053]

when i design it but how to add it in email specialy outlook

[@Chris.Retention]

This is how I send the email in Klaviyo: kzbin.info/www/bejne/onyVn2mOmNCIZ6s (people will be able to see it with their outlook inbox)

[@Cookiepopcrumblegirly]

how do you get the buttons to actually work in klaviyo?

[@Chris.Retention]

This is how I do it: kzbin.info/www/bejne/onyVn2mOmNCIZ6ssi=q-qO-_0PH_YmDPNZ

[@onlinehustlerai-]

all are fine , how to use this design into my email ? how to embed ?

[@Chris.Retention]

you can check this video: kzbin.info/www/bejne/onyVn2mOmNCIZ6ssi=EoCAC_6S5MbrmHP9

[@motionmuse5684]

How do you get it over into klaviyo? Section by section recreation or can you import the entire design over as a png or - export the html code?

[@Chris.Retention]

Hey - I filmed the exact process I use to do just that. You can watch it here: kzbin.info/www/bejne/onyVn2mOmNCIZ6s

[@motionmuse5684]

Thank you!

[@Lizliz223]

Thanks!! I subscribed 🎉

[@Chris.Retention]

You're welcome - glad you enjoyed the video 🥂

[@TheMMANationMX]

Is there any tool or plug in to export images, logos etc as a png without background just like your setup?

[@Chris.Retention]

I use Clipping Magic, and it's great. If you google "background removers" you'll have a lot of options 🤝

[@devonhill_]

thank you for the value bomb brotha! figma it's self is confusing asf to me

[@Chris.Retention]

appreciate it man. it gets easier 🤝

[@MaybeItsAnthony]

how do you get around dark mode issues for users? Can you make a video on this? Its a huge problem I am having, especially for emails where I utilize variables such as cart reminders

[@Chris.Retention]

what's the exact variable you're having issues with?

[@MaybeItsAnthony]

@@Chris.Retention For instance, abandoned checkout email variable: item.product.title Quantity: item.quantity|floatformat:0 - Total: {% currency_format item.line_price|floatformat:2 %} The problem is moreso to do with how dark theme presents Klaviyo emails. I have worked around the rest of the email using images, but I can't do this for ones that contain a variable like the one I just mentioned , the formatting just looks off relative to the rest of the email - any workaround or solutions for this?

[@Chris.Retention]

@MaybeItsAnthony Alright, got you. I'll make a video. In the meantime, check out "Emailify" on KZbin. They have good ressources on optimisation for dark mode.

[@MaybeItsAnthony]

@@Chris.Retention Thanks Chris, I appreciate that. I'll take a look at Emailify (looks interesting) - looking forward to your vid :)

[@Its-a-me-maddy]

Pretty good my man!

[@Chris.Retention]

Solid, ay 🤝

[@alhussienalmahrazye4331]

Great job keep going man 👍

[@Chris.Retention]

Thanks, man 🥂

[@oluwatopeliasu]

thank you so much

[@Chris.Retention]

You're welcome 🤝

[@EphraimBalaguer-h6i]

This is Great thank you for this Christophe! I have a question though, is there a Plugin for Creative's in Figma? Like Canva they have a Creative Section. I was wondering if there's also available in Figma?

[@Chris.Retention]

Assuming you're talking about how to make static ad creatives in Figma, you can just change the size and ratio of your frame. I don't use Canva, so maybe that's not what you meant by "Creative section." If that's the case, let me know 🤝

[@AnnaParker712]

Thanks!

[@Chris.Retention]

Of course 🥂

[@codentistry6876]

Great video. Can you provide a link to these figma files?

[@Chris.Retention]

Thank you for watching 🤝. You can email me here to get the file: [e-mail]

[@NguyenNguyenVuThao-y8o]

Great video Christophe, thank u for this tutorial. I have a question that how can i insert a link into a button ?

[@Chris.Retention]

Thanks, man 🤝 you can do it this way: kzbin.info/www/bejne/onyVn2mOmNCIZ6ssi=jGabudNdJVcTm9rE

[@messaoudha5512]

How l can downlaod it as html

[@Chris.Retention]

You can use Emailify, I haven't used it in a while, but it did a solid job when I did

[@Tommy-yx9gv]

Hello Christopher, apologies if this is a very basic question. But you know the trick you use to make it look smoother, when I click on the colour I don't seem to have the options solid, linear etc it only shows me custom and I cannot change this. Could you please tell me how I access these options? Thank you.

[@Tommy-yx9gv]

Nevermind, figured it out haha.

[@Chris.Retention]

Seems like you figured it out, but I'll share the solution here for everybody: Below "Custom", there's a full square (for solid colors). Right next to it (on the right), there is another square. This time it's the one for gradients. You can find the linear gradient from this video there.

[@alisimon]

How do you export this to klaviyo?

[@Chris.Retention]

Exporting process right here: kzbin.info/www/bejne/onyVn2mOmNCIZ6s

[@caressterrado4580]

Thanks for this video. Great help! Question, is there a way to export an email design 'template' from figma to canva that can be editable? TIA

[@Chris.Retention]

Happy to hear! For Canva, I have no idea (I don't use it at all)

[@nourhanbalian3294]

you need to slice it after in photoshop and then bring it to Klavio, big step missing here

[@Chris.Retention]

that's just not the point of this video 👍 you also don't need phothoshop at all, check this link if you want to see the process: kzbin.info/www/bejne/onyVn2mOmNCIZ6s