How To Design Emails In Figma For Klaviyo (2024)

Поделиться
HTML-код
  • Опубликовано: 4 ноя 2024

Комментарии • 76

  • @Chris.Retention
    @Chris.Retention  Год назад +1

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

  • @petrunecula
    @petrunecula 8 дней назад

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

  • @louis-emilepattyn6931
    @louis-emilepattyn6931 Год назад +11

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

  • @AnneCarvajal
    @AnneCarvajal Месяц назад +1

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

    • @Chris.Retention
      @Chris.Retention  Месяц назад +1

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

  • @benrainford1319
    @benrainford1319 9 месяцев назад +1

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

  • @teeshesee
    @teeshesee 2 месяца назад +1

    Oh this video is excellent. Thank you for this.

  • @EdWilliams
    @EdWilliams Месяц назад +1

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

  • @nabeelazeezdxb
    @nabeelazeezdxb Месяц назад +1

    Solid tutorial thank you sir

  •  7 месяцев назад +1

    Nice one bro! hope your channel grows fast.

    • @Chris.Retention
      @Chris.Retention  7 месяцев назад

      Thanks, man - glad you enjoyed the video 🤝

  • @drinktribini
    @drinktribini 5 месяцев назад +7

    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
      @Chris.Retention  4 месяца назад +1

      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! 📈

  • @drlisadaniel
    @drlisadaniel 11 месяцев назад +1

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

    • @Chris.Retention
      @Chris.Retention  11 месяцев назад

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

  • @FeiraTudo
    @FeiraTudo 7 месяцев назад +1

    Thank you!!

  • @simplywhitney362
    @simplywhitney362 Год назад +3

    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
      @Chris.Retention  Год назад +1

      Glad you enjoyed the video 🤝
      Here's how I export image-based emails: ruclips.net/video/lK2n6XckU1I/видео.htmlsi=hBL0rbUcF5nFXkJR

  • @JE-zl7io
    @JE-zl7io Год назад +2

    This video is a godsend bro, thank you

  • @devonhill_
    @devonhill_ Год назад +1

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

  • @EphraimBalaguer-h6i
    @EphraimBalaguer-h6i 11 месяцев назад +1

    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
      @Chris.Retention  11 месяцев назад

      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 🤝

  • @Davor_Antonijevic
    @Davor_Antonijevic 6 месяцев назад +1

    Brother, keep going I love you

  • @ryan18462
    @ryan18462 4 месяца назад +1

    Great vid bro!

  • @NguyenNguyenVuThao-y8o
    @NguyenNguyenVuThao-y8o 10 месяцев назад

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

    • @Chris.Retention
      @Chris.Retention  10 месяцев назад

      Thanks, man 🤝
      you can do it this way: ruclips.net/video/lK2n6XckU1I/видео.htmlsi=jGabudNdJVcTm9rE

  • @codingbox4199
    @codingbox4199 Год назад +2

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

    • @Chris.Retention
      @Chris.Retention  Год назад +3

      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
      @AmigoWay 9 месяцев назад

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

  • @codentistry6876
    @codentistry6876 11 месяцев назад +1

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

    • @Chris.Retention
      @Chris.Retention  11 месяцев назад

      Thank you for watching 🤝. You can email me here to get the file: christophe@retainwithemails.com

  • @TheMMANationMX
    @TheMMANationMX 5 месяцев назад +1

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

    • @Chris.Retention
      @Chris.Retention  4 месяца назад +1

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

  • @oluwatopeliasu
    @oluwatopeliasu 3 месяца назад +1

    thank you so much

  • @caressterrado4580
    @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
      @Chris.Retention  Год назад

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

  • @MaybeItsAnthony
    @MaybeItsAnthony Год назад +1

    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
      @Chris.Retention  Год назад

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

    • @MaybeItsAnthony
      @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
      @Chris.Retention  Год назад

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

    • @MaybeItsAnthony
      @MaybeItsAnthony Год назад

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

  • @Tommy-yx9gv
    @Tommy-yx9gv Год назад +1

    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
      @Tommy-yx9gv Год назад +1

      Nevermind, figured it out haha.

    • @Chris.Retention
      @Chris.Retention  Год назад +3

      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.

  • @Lizliz223
    @Lizliz223 Год назад +1

    Thanks!! I subscribed 🎉

    • @Chris.Retention
      @Chris.Retention  Год назад

      You're welcome - glad you enjoyed the video 🥂

  • @motionmuse5684
    @motionmuse5684 Год назад +2

    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
      @Chris.Retention  Год назад +2

      Hey - I filmed the exact process I use to do just that. You can watch it here: ruclips.net/video/lK2n6XckU1I/видео.html

    • @motionmuse5684
      @motionmuse5684 Год назад +2

      Thank you!

  • @Cookiepopcrumblegirly
    @Cookiepopcrumblegirly 8 месяцев назад +1

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

    • @Chris.Retention
      @Chris.Retention  8 месяцев назад +1

      This is how I do it: ruclips.net/video/lK2n6XckU1I/видео.htmlsi=q-qO-_0PH_YmDPNZ

  • @AnnaParker712
    @AnnaParker712 Год назад +1

    Thanks!

  • @onlinehustlerai-
    @onlinehustlerai- 9 месяцев назад +1

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

    • @Chris.Retention
      @Chris.Retention  9 месяцев назад +1

      you can check this video: ruclips.net/video/lK2n6XckU1I/видео.htmlsi=EoCAC_6S5MbrmHP9

  • @alhussienalmahrazye4331
    @alhussienalmahrazye4331 Год назад

    Great job keep going man 👍

  • @Its-a-me-maddy
    @Its-a-me-maddy Год назад

    Pretty good my man!

  • @alisimon
    @alisimon Год назад +1

    How do you export this to klaviyo?

    • @Chris.Retention
      @Chris.Retention  Год назад

      Exporting process right here: ruclips.net/video/lK2n6XckU1I/видео.html

  • @messaoudha5512
    @messaoudha5512 Месяц назад +1

    How l can downlaod it as html

    • @Chris.Retention
      @Chris.Retention  14 дней назад +1

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

  • @nourhanbalian3294
    @nourhanbalian3294 8 месяцев назад

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

    • @Chris.Retention
      @Chris.Retention  8 месяцев назад

      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: ruclips.net/video/lK2n6XckU1I/видео.html