How To Design Emails In Figma For Klaviyo

Поделиться
HTML-код
  • Опубликовано: 15 июн 2023
  • 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: retainwithemails.com
    Like and Subscribe
    ________________________________________________________________
    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

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

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

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

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

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

  • @benrainford1319
    @benrainford1319 6 месяцев назад +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.

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

    This video is a godsend bro, thank you

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

    Nice one bro! hope your channel grows fast.

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

      Thanks, man - glad you enjoyed the video 🤝

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

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

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

    Brother, keep going I love you

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

    Thanks!! I subscribed 🎉

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

      You're welcome - glad you enjoyed the video 🥂

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

    Great job keep going man 👍

  • @ryan18462
    @ryan18462 25 дней назад +1

    Great vid bro!

  • @devonhill_
    @devonhill_ 10 месяцев назад +1

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

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

      appreciate it man. it gets easier 🤝

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

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

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

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

  • @drinktribini
    @drinktribini Месяц назад +3

    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  Месяц назад +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! 📈

  • @Its-a-me-maddy
    @Its-a-me-maddy 10 месяцев назад

    Pretty good my man!

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

    Thank you!!

  • @Tommy-yx9gv
    @Tommy-yx9gv 11 месяцев назад +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 11 месяцев назад +1

      Nevermind, figured it out haha.

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

  • @user-un6gc1uj2t
    @user-un6gc1uj2t 7 месяцев назад +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  7 месяцев назад

      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 🤝

  • @user-fh8eu2ix3u
    @user-fh8eu2ix3u 6 месяцев назад

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

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

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

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

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

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

    Thanks!

  • @motionmuse5684
    @motionmuse5684 11 месяцев назад +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  11 месяцев назад +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 11 месяцев назад +2

      Thank you!

  • @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 :)

  • @TheMMANationMX
    @TheMMANationMX Месяц назад +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  Месяц назад +1

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

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

    • @user-mn5un4wu8o
      @user-mn5un4wu8o 5 месяцев назад

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

  • @user-ov5hc6vp8y
    @user-ov5hc6vp8y 4 месяца назад +1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      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

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

    How do you export this to klaviyo?

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

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