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✨
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.
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 !
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?
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?
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!!
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.
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.
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?
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).
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
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?
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.
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.
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.
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✨
Thanks for your lovely comment!
Thanks for giving it all your best Pey, You have done a lot. Nothing is scripted at all
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.
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 !
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?
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?
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.'
Great video Peyton, thank u for this tutorial. I have a question that How can i insert a link into the button ?
When you slice the image of the button, you'll hyperlink it in your email program when you place it in.
Peyton, once you’ve imported your GIF into Figma, how do you export it for use in Klaviyo?
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!!
amazing video! thank you so much
Well done Peyton It was fun
❤❤❤❤ its was great .my question is 600 was hight what leangh shoud we select
Just depends on how long you want to email to go on for!
how can you use this as an embedded image on outlook?
This is a great tutorial! Just one question, how did you place the website into the first frame to start with? :)
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.
Amazing, thank you so much!
great tutorial, thank you
Glad you enjoyed it!
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.
Always! 😉
Omg this was amazing. New sub!
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!
That is my web browser called Arc! It is my favvvvvorite! Highly recommend, it is free to use too.
I cant get that viewer node from, ctrl shift LMB.
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?
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).
@@peytonfox You're the best, thank you!
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
It is a new browser called Arc! I’m obsessed with it, highly recommend!
Wow thank youuuu! ❤️ thats a prompt response
Как это потом всё верстать? Нарисовала красиво! А с верстальщиком посоветовалась? Думаю матов от него будет много!
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?
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.
Okay thanks a lot for the clear insight@@peytonfox
Why designers create newsletter emails in Figma and not in Photoshop?
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.
How much should I charge the client per email design?
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.
From Bangladeshi 😊
Hello! Can I have your reference photo/screenshot email? Thank you!
Check out Otherland on Milled! You'll find it there.