How To Design Professional Emails with Figma 2024 for Klaviyo

Поділитися
Вставка
  • Опубліковано 11 гру 2024

КОМЕНТАРІ • 74

  • @BoyuanZhao
    @BoyuanZhao  Рік тому +1

    Join our Ecom Growth Vault: www.skool.com/plthora-ecom-growth-vault-6620

  • @henz456
    @henz456 3 місяці тому +20

    My left ear enjoyed it

    • @vixyp0p
      @vixyp0p 2 місяці тому

      OMG CAME HERE TO SAY THIS

  • @Kwelar
    @Kwelar 11 місяців тому +41

    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.

    • @ryan18462
      @ryan18462 5 місяців тому +3

      Why they use figma to just export as an image 😂

    • @JasonDainter
      @JasonDainter 5 місяців тому

      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.

    • @lucadeloddere4062
      @lucadeloddere4062 4 місяці тому

      Can’t you export html from figma

    • @drigfamous
      @drigfamous Місяць тому

      @@lucadeloddere4062u can

  • @wethecopybros4221
    @wethecopybros4221 Рік тому +14

    man you killin me, audio out of only one side every time

    • @BoyuanZhao
      @BoyuanZhao  Рік тому +1

      hey copy bros sorry about this, gonna check with my editor

    • @wethecopybros4221
      @wethecopybros4221 Рік тому

      @@BoyuanZhao haha its not really that big of a deal, im just bustin ya chops!

    • @ItsAlkis
      @ItsAlkis Рік тому +1

      Lol I have only the right speaker in my PC and I am hearing only the background music

  • @austinwhiting
    @austinwhiting Рік тому +21

    So the emails are all image based? Have you had issues deliverability doing it this way?

    • @Rove-d1m
      @Rove-d1m 8 місяців тому +2

      Yeah, so wondering the same. It may end up in the promotion inbox instead of the primary one

    • @DagHolmen
      @DagHolmen 7 місяців тому +1

      still no reply lol

    • @drigfamous
      @drigfamous Місяць тому

      There is a plugin which allows you to export it as a HTML

  • @JackEcom7
    @JackEcom7 Рік тому +6

    Nice one man, Love the high level overview. I made something similar but a bit more in depth just yesterday.

  • @timruder3850
    @timruder3850 10 місяців тому +1

    Hey Boyuan, van you work with slices and universal content sections together in 1 email without having issues with the visibility on different devices?

  • @lilbrusselsprout8261
    @lilbrusselsprout8261 10 місяців тому +4

    If it's an image, then how do you make the CTA's actual buttons?

    • @vixyp0p
      @vixyp0p 2 місяці тому

      i have this question too

    • @musicdroid1
      @musicdroid1 2 місяці тому +1

      You link the whole image slice to the desired landing page. So if they click on the button it will link to the landing page / product page.

    • @thestranger8528
      @thestranger8528 Місяць тому

      ​​@@vixyp0p After slicing the button up you add hyperlinks to it so it can be redirected to a landing page

  • @keonitebei7881
    @keonitebei7881 Рік тому +3

    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

  • @ArafatHassan-uh9bb
    @ArafatHassan-uh9bb 11 місяців тому +2

    is it safe to use all images to build a email?

  • @ry-stewart
    @ry-stewart 6 місяців тому

    i likeee this, my copy is great but I've just started working with ecom brands so need to step up my design game 😎😎

  • @elias4855
    @elias4855 10 місяців тому +2

    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?

    • @funniefluffyfun9398
      @funniefluffyfun9398 9 місяців тому +1

      It's just images, not HTML or text. That's why. What niche are you in?

  • @emmanuelmiguel5514
    @emmanuelmiguel5514 5 місяців тому

    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

  • @DvJorn
    @DvJorn 11 місяців тому

    Very informative and practical! Would you suggest use different ratio's or aspects for mobile versions or can you keep the same layout?

  • @dimakim
    @dimakim Рік тому +5

    But not everyone has their image display enabled by default so they wont see anything

    • @MonsieurX-17
      @MonsieurX-17 Рік тому +2

      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.

  • @christiana8356
    @christiana8356 Рік тому +2

    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?

  • @romanlove9624
    @romanlove9624 11 місяців тому

    great tips here, thanks a lot

  • @isaiahheine
    @isaiahheine Рік тому +1

    love the content boyuan!

  • @arabsaleman
    @arabsaleman 5 місяців тому

    So the email is just images? what about the " I want this button ", the email receiver is just gonna be clicking a picture?????

  • @dpvrt5117
    @dpvrt5117 Рік тому +1

    is there a way to add multiple, separate links via buttons within each sliced png image?

    • @unclejuju12
      @unclejuju12 Рік тому +1

      make different slices for each of the button sections and provide different links for the different sections

  • @ArafatHassan-uh9bb
    @ArafatHassan-uh9bb 11 місяців тому

    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.

  • @Ahmadhabash69
    @Ahmadhabash69 Рік тому

    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.

  • @timirichards8111
    @timirichards8111 6 місяців тому

    How can I practice this

  • @Darlucian
    @Darlucian 6 місяців тому

    Why designers create newsletter emails in Figma and not in Photoshop?

  • @abigailcarmichael9403
    @abigailcarmichael9403 Рік тому +1

    Hey! Is it also possible to build in Figma for Mailchimp?

  • @workingsubliminal
    @workingsubliminal 7 місяців тому

    Thank you! It's very helpful ❤

  • @MaybeItsAnthony
    @MaybeItsAnthony Рік тому

    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

  • @mathchrome
    @mathchrome Рік тому

    Where did you original design copy from? We just need to add these pics from original design? Please make a video from scratch

  • @simonsaruggia
    @simonsaruggia Рік тому

    If you export everything like you did, are the buttons cta working? isn't everything an image since you imported pngs?

    • @BoyuanZhao
      @BoyuanZhao  Рік тому

      watch the full video it explains

    • @simonsaruggia
      @simonsaruggia Рік тому

      @@BoyuanZhao Oh I understand now, so basically the whole slice png is a link in this way, not only the button
      thank you

    • @junaidzulfiqar8291
      @junaidzulfiqar8291 Рік тому

      ​@@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.

  • @kieran_dwyer
    @kieran_dwyer Рік тому +1

    Hey, I thought 600px wide was optimal?

    • @BoyuanZhao
      @BoyuanZhao  Рік тому

      as long as aspect ratios make sense you can limit the height/ width in klaviyo
      also mobile and desktop differ

  • @bollywoodmusicbox2031
    @bollywoodmusicbox2031 Рік тому +6

    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

    • @baileysallows
      @baileysallows Рік тому

      Hi there, how does it affect deliverability?

    • @baileysallows
      @baileysallows Рік тому

      Curious as im just getting started. Thanks!

    • @premvb3500
      @premvb3500 Рік тому

      @@baileysallows because its a complete image email not html email

    • @anthonyponcex
      @anthonyponcex 9 місяців тому +1

      Image based emails still get high deliverability. Hope that helps.

    • @CharliesCustomClones
      @CharliesCustomClones 6 місяців тому

      @@anthonyponcex are you sure? I do not think so.

  • @havalmarshal9221
    @havalmarshal9221 Рік тому

    Very useful tips👏,
    but what if we export it to HTML? just wondering

    • @brunoescoto9630
      @brunoescoto9630 Рік тому +7

      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.

    • @havalmarshal9221
      @havalmarshal9221 Рік тому

      @@brunoescoto9630 Dude, you nailed it

    • @marillarose
      @marillarose Рік тому

      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

  • @mauriciovillarreal2213
    @mauriciovillarreal2213 Рік тому

    what app is he using?

  • @rachealkazembe
    @rachealkazembe 11 місяців тому

    I love this!!! Definitely going to give it a go!

  • @spacedskunk
    @spacedskunk Рік тому +4

    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.

  • @ryan18462
    @ryan18462 5 місяців тому

    GUYS DONT DO IT

  • @taviux511
    @taviux511 Місяць тому

    coulnd't handle so many "leftist" style to the video