Figma Email Design Tutorial | Design Dissection
ฝัง
- เผยแพร่เมื่อ 15 ก.ค. 2024
- ✨ Get monthly customizable email templates: theideainbox.com/join
✨ Design emails like the big brands! Sign up for my Figma Email design course here: emailmarketingbff.com/email-d...
Welcome to a fun new series where I take an email design I LOVE and then try to re-create it on the fly! This Figma email design tutorial is great if you need to learn some tips and tricks on just HOW do these big brands achieve these certain effects and designs.
Want to try Figma for yourself? sparkbridgedigital.com/figma
This video is a livestream replay that my Facebook group got first dibs on LIVE! Make sure to join our email group here to catch the next one: / emailmarketingbff
Want to work with me? www.sparkbridgedigital.com
00:00 Introduction
02:00 Starting Figma Design
03:23 Outline Elements
07:53 Pulling Assets In
11:00 Building Email Texture
14:11 Cutting Out Shapes
17:17 Finishing Header Layout
19:51 Inserting Elements
23:27 Building Bottom Section
28:26 Building Watercolor Background
31:45 Finishing Up Final Outlines
33:16 Creating Email GIF
40:20 Final Thoughts - แนวปฏิบัติและการใช้ชีวิต
Thanks for giving it all your best Pey, You have done a lot. Nothing is scripted at all
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!
Well done Peyton It was fun
Omg this was amazing. New sub!
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 !
great tutorial, thank you
Glad you enjoyed it!
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.
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?
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!!
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.
I cant get that viewer node from, ctrl shift LMB.
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! 😉
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!
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.
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!
❤❤❤❤ 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!
Как это потом всё верстать? Нарисовала красиво! А с верстальщиком посоветовалась? Думаю матов от него будет много!
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
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.
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.
Hello! Can I have your reference photo/screenshot email? Thank you!
Check out Otherland on Milled! You'll find it there.