How To Design Emails In Figma For Klaviyo (2024)
Вставка
- Опубліковано 22 сер 2024
- In this video you'll learn how to optimise your Klaviyo emails using the best design tool, Figma. This is going to make your branding shine, and avoid the "dropshipper-look."
If you want us to guarantee you $30k-$100k dollars in new revenue with email marketing: retainwithemai...
Like and Subscribe
Here is how to send your email in Klaviyo after you've designed it: • How To Export My Email...
________________________________________________________________
christophe diouf,christophe diouf email,email marketing,flow,email campaign,klaviyo,ecommerce,organic marketing,scale ecommerce,email marketing for beginners,facebook ads,start email marketing,how to do email marketing,best email marketing strategy,shopify,conversion rate optimization,peyton fox,email compliance,ecommerce marketing compliance,email design,figma how to,branding,klaviyo design,How To Design Emails In Figma For Klaviyo
➡ Get more email design resources here: get.retainwithemails.com/guide
Bro you have no idea how much this simple video helps, massive thanks brotha
thanks, man 🥂
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!
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! 📈
You did such a good job with the design and copy that I now want to buy the product. Wow. Thanks for the tutorials.
Haha thanks 🤝
Nice one bro! hope your channel grows fast.
Thanks, man - glad you enjoyed the video 🤝
Great vid bro!
Thanks 🥂
thank you so much
You're welcome 🤝
this one is over my head but I see how it could be really helpful
100% - Figma is the best, but it takes some time to get used to it.
Brother, keep going I love you
love you too
This video is a godsend bro, thank you
Hahaha - appreciate you, brotha
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?
Glad you enjoyed the video 🤝
Here's how I export image-based emails: ua-cam.com/video/lK2n6XckU1I/v-deo.htmlsi=hBL0rbUcF5nFXkJR
thank you for the value bomb brotha! figma it's self is confusing asf to me
appreciate it man. it gets easier 🤝
great video where do you get inspired for such clean designs?
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
Please do. Like, How do you prepare before making an email @@Chris.Retention
Thank you!!
You're welcome 🥂
Thanks!! I subscribed 🎉
You're welcome - glad you enjoyed the video 🥂
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?
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 🤝
Great job keep going man 👍
Thanks, man 🥂
Is there any tool or plug in to export images, logos etc as a png without background just like your setup?
I use Clipping Magic, and it's great. If you google "background removers" you'll have a lot of options 🤝
Pretty good my man!
Solid, ay 🤝
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?
Hey - I filmed the exact process I use to do just that. You can watch it here: ua-cam.com/video/lK2n6XckU1I/v-deo.html
Thank you!
Thanks!
Of course 🥂
Great video Christophe, thank u for this tutorial. I have a question that how can i insert a link into a button ?
Thanks, man 🤝
you can do it this way: ua-cam.com/video/lK2n6XckU1I/v-deo.htmlsi=jGabudNdJVcTm9rE
Great video. Can you provide a link to these figma files?
Thank you for watching 🤝. You can email me here to get the file: christophe@retainwithemails.com
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
what's the exact variable you're having issues with?
@@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?
@MaybeItsAnthony Alright, got you. I'll make a video.
In the meantime, check out "Emailify" on UA-cam. They have good ressources on optimisation for dark mode.
@@Chris.Retention Thanks Chris, I appreciate that. I'll take a look at Emailify (looks interesting) - looking forward to your vid :)
all are fine , how to use this design into my email ? how to embed ?
you can check this video: ua-cam.com/video/lK2n6XckU1I/v-deo.htmlsi=EoCAC_6S5MbrmHP9
how do you get the buttons to actually work in klaviyo?
This is how I do it: ua-cam.com/video/lK2n6XckU1I/v-deo.htmlsi=q-qO-_0PH_YmDPNZ
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.
Nevermind, figured it out haha.
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.
you need to slice it after in photoshop and then bring it to Klavio, big step missing here
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: ua-cam.com/video/lK2n6XckU1I/v-deo.html
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
Happy to hear! For Canva, I have no idea (I don't use it at all)
How do you export this to klaviyo?
Exporting process right here: ua-cam.com/video/lK2n6XckU1I/v-deo.html