Figma Email Design Tutorial | Design Dissection

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

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

  • @carolstaneck7694
    @carolstaneck7694 17 дней назад

    amazing video! thank you so much

  • @unkuOlaa
    @unkuOlaa Год назад +6

    The longest, most helpful and interesting tutorial I’ve ever watched… Loved the way it wasn’t scripted. Just pure actions, comments, and reactions plus the annoying tendency of the mind to want to be a perfectionist. Had me smiling and nodding in assent all through. Thank you Pey✨

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

      Thanks for your lovely comment!

  • @SamuelOseni-bt3rf
    @SamuelOseni-bt3rf 3 месяца назад +1

    Thanks for giving it all your best Pey, You have done a lot. Nothing is scripted at all

  • @arthur_wllms
    @arthur_wllms 10 месяцев назад +2

    really helpful like thanks Peyton I've leaned so much things and how to use Figma and canva, Wonderful and huge thank you from France. See you soon, bisous !

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

    Hi Peyton, thanks for this one, Im just started using Figma. 12:08, you can drop the blending option of that texture, to something like multiply so that I would be darker.

  • @Janine_Karla
    @Janine_Karla 9 месяцев назад

    Thanks for this! For someone who is just MEH with design, this is a huge help - design-wise and Figma-wise.
    Some questions:
    - What browser are you using?
    - How do you get that "convert and save download as" option?

    • @peytonfox
      @peytonfox  9 месяцев назад

      I use ARC as my browser (I LOVE ITTTT!) and that convert and download is a Chrome extension I downloaded called 'WebP / AVIF Image Converter.'

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

    This is so helpful. Just started playing around figma and its a bit overwhelming since there's a lot going on. Just wanted to know after creating the email on figma how can I get it exported on klaviyo?

  • @timirichards8111
    @timirichards8111 3 месяца назад

    Well done Peyton It was fun

  • @CC-wm7ei
    @CC-wm7ei 4 месяца назад

    Omg this was amazing. New sub!

  • @MikeOlivares-s7q
    @MikeOlivares-s7q Месяц назад

    Peyton, once you’ve imported your GIF into Figma, how do you export it for use in Klaviyo?

  • @cryptoisey4246
    @cryptoisey4246 9 месяцев назад

    great tutorial, thank you

    • @peytonfox
      @peytonfox  9 месяцев назад

      Glad you enjoyed it!

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

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

    • @peytonfox
      @peytonfox  9 месяцев назад

      When you slice the image of the button, you'll hyperlink it in your email program when you place it in.

  • @myrthemodderman8698
    @myrthemodderman8698 10 месяцев назад

    Thankyou a lot! It's really helpfull. I was wondering if you have tips for designing dark modus friendly. I know this design is because you use the slices. But sometimes my client wants a text block so they can edit it later. I do use image background for text block to keep the design, but the sometimes the letters are not readable anymore in darkmode. Are there some rules for using image background that you know? :) I'm sorry if you already made a video about this. Thank you again!!

  • @chelseabeton
    @chelseabeton 6 месяцев назад

    This is a great tutorial! Just one question, how did you place the website into the first frame to start with? :)

    • @peytonfox
      @peytonfox  6 месяцев назад

      Meaning that reference email? I used a chrome extension called GoFullPage and screenshot it from my inbox! Then after downloading it, tossed it into Figma.

    • @chelseabeton
      @chelseabeton 6 месяцев назад

      Amazing, thank you so much!

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

    thank you for this PEYTON!
    is SAFARI browser that you are using? why there's no "URL/address tab" at the above of the webpages? seems like semi fullscreen would love to know that settings hehehe

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

      It is a new browser called Arc! I’m obsessed with it, highly recommend!

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

      Wow thank youuuu! ❤️ thats a prompt response

  • @raelenelizabeth
    @raelenelizabeth 10 месяцев назад

    Amazing as always, thank you!! One question about the slices. When it comes to deliverability, I've heard that the less phots, the better. In terms of slicing a solid design like this, does that ever cause issues? I was under the impression that you would want to have the text and buttons separate if possible?

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

      If you think the domain is having deliverability issues, then I definitely recommend getting actual HTML text elements in place BUT when I've typically A/B with a healthy domain a design with more text added and one with just images, there isn't a huge difference in open-rates (a typical sign for spam placement if that is super low).

    • @raelenelizabeth
      @raelenelizabeth 10 месяцев назад

      @@peytonfox You're the best, thank you!

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

    Thanks for this! Please can I ask how you got the side bar for quick access to Canva, etc? Is this part of Figma? Thanks!

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

      That is my web browser called Arc! It is my favvvvvorite! Highly recommend, it is free to use too.

  • @israrmalik4336
    @israrmalik4336 11 месяцев назад

    ❤❤❤❤ its was great .my question is 600 was hight what leangh shoud we select

    • @peytonfox
      @peytonfox  6 месяцев назад

      Just depends on how long you want to email to go on for!

  • @jianne2733
    @jianne2733 3 месяца назад

    I cant get that viewer node from, ctrl shift LMB.

  • @rakibprodhen5312
    @rakibprodhen5312 2 месяца назад

    From Bangladeshi 😊

  • @astridandreaorantes2806
    @astridandreaorantes2806 2 месяца назад

    how can you use this as an embedded image on outlook?

  • @zalexstudios
    @zalexstudios 3 месяца назад

    Как это потом всё верстать? Нарисовала красиво! А с верстальщиком посоветовалась? Думаю матов от него будет много!

  • @lgmp
    @lgmp 7 месяцев назад

    I am engaged in email layout and wanted to draw your attention to the fact that about 60-70% of emails are opened from mobile phones. Therefore, the design needs to take this into account.

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

      Always! 😉

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

    On average, how long does it take you to fully design a complete email flow/sequence?
    Do you finish the entire email designs in a flow/sequence in one veryyyyy long sitting or you finish em up over the course of a number of days and breaks?

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

      It can vary greatly depending on the client! But typically, I don't do a full flow build in one sitting, it'll be spread out over the week or so but averaging about 1-2 hours per email if I'm coming up with a brand new design for each one.

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

      Okay thanks a lot for the clear insight@@peytonfox

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

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

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

      Photoshop use to be my tool of choice back in the day! Nothing wrong with it but for project management and see all of your designs in one working document is a huge plus.

  • @daintyana
    @daintyana 3 месяца назад

    Hello! Can I have your reference photo/screenshot email? Thank you!

    • @peytonfox
      @peytonfox  3 месяца назад

      Check out Otherland on Milled! You'll find it there.

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

    How much should I charge the client per email design?

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

      That depends a bit! If you are just getting started, I'd recommend an hourly rate vs. a flat per design fee. Revisions can become quite a pain unless you set a limit on those so hourly protects you if they come back with more and more edits.