Figma Email Design Tutorial | Design Dissection

Тәжірибелік нұсқаулар және стиль

✨ 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

Пікірлер: 43

  • @SamuelOseni-bt3rf
    @SamuelOseni-bt3rf15 күн бұрын

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

  • @unkuOlaa
    @unkuOlaa9 ай бұрын

    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

    9 ай бұрын

    Thanks for your lovely comment!

  • @arthur_wllms
    @arthur_wllms8 ай бұрын

    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
    @vanjuliussanlorenzo71982 ай бұрын

    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.

  • @CC-wm7ei
    @CC-wm7ei2 ай бұрын

    Omg this was amazing. New sub!

  • @timirichards8111
    @timirichards811128 күн бұрын

    Well done Peyton It was fun

  • @cryptoisey4246
    @cryptoisey42467 ай бұрын

    great tutorial, thank you

  • @peytonfox

    @peytonfox

    6 ай бұрын

    Glad you enjoyed it!

  • @HannahGraceRomero23
    @HannahGraceRomero239 ай бұрын

    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?

  • @myrthemodderman8698
    @myrthemodderman86988 ай бұрын

    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!!

  • @Janine_Karla
    @Janine_Karla7 ай бұрын

    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

    6 ай бұрын

    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.'

  • @astridandreaorantes2806
    @astridandreaorantes280610 күн бұрын

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

  • @lgmp
    @lgmp4 ай бұрын

    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

    4 ай бұрын

    Always! 😉

  • @jianne2733
    @jianne273323 күн бұрын

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

  • @user-fh8eu2ix3u
    @user-fh8eu2ix3u6 ай бұрын

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

  • @peytonfox

    @peytonfox

    6 ай бұрын

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

  • @zalexstudios
    @zalexstudios13 күн бұрын

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

  • @raelenelizabeth
    @raelenelizabeth8 ай бұрын

    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

    8 ай бұрын

    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

    8 ай бұрын

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

  • @letteredbyannie1448
    @letteredbyannie14482 ай бұрын

    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

    2 ай бұрын

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

  • @israrmalik4336
    @israrmalik43368 ай бұрын

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

  • @peytonfox

    @peytonfox

    3 ай бұрын

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

  • @chelseabeton
    @chelseabeton3 ай бұрын

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

  • @peytonfox

    @peytonfox

    3 ай бұрын

    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

    3 ай бұрын

    Amazing, thank you so much!

  • @ladyruthdeato8291
    @ladyruthdeato8291Ай бұрын

    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

    Ай бұрын

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

  • @ladyruthdeato8291

    @ladyruthdeato8291

    Ай бұрын

    Wow thank youuuu! ❤️ thats a prompt response

  • @unkuOlaa
    @unkuOlaa9 ай бұрын

    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

    9 ай бұрын

    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

    9 ай бұрын

    Okay thanks a lot for the clear insight@@peytonfox

  • @razin275
    @razin2759 ай бұрын

    How much should I charge the client per email design?

  • @peytonfox

    @peytonfox

    9 ай бұрын

    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.

  • @Darlucian
    @Darlucian2 ай бұрын

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

  • @peytonfox

    @peytonfox

    2 ай бұрын

    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
    @daintyana28 күн бұрын

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

  • @peytonfox

    @peytonfox

    24 күн бұрын

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

Келесі