Big Idea

The argument in one line.

Jumping straight into Figma is the mistake that kills email design — high-converting emails are won in the research and asset phase, before you touch the design tool.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You design e-commerce emails for clients or your own brand and want a repeatable pre-design workflow you can apply to any new brand.
You use Figma for email design but have been eyeballing layout decisions — this gives you a concrete sizing rationale and gradient technique.
You are an e-commerce founder who wants to understand what a conversion-ready email structure looks like before briefing a designer.
You are early in email design and want one end-to-end walkthrough covering research, asset prep, and production in a single session.

SKIP IF…

You are looking for ESP setup, Klaviyo automation, or email strategy — this video covers design only, not deployment or sequencing.
You already have a mature brand style guide and established Figma workflow — the value here is in the asset-gathering phase, which you have already solved.

TL;DR

The full version, fast.

Most email designers waste their first hour staring at a blank frame. The fix is a three-step pre-design phase: find a high-converting reference email on Milled, extract fonts, logos, and images directly from the brand website via browser DevTools, then read the site copy to absorb voice. Only then does Figma open — at 1200px wide for clarity in Klaviyo, with the hero image extended using a gradient-sampled rectangle, on-brand typography, a pill-shaped CTA button, and a review section anchored by a named testimonial. Two CTAs and product imagery do the conversion work; the pre-design prep is what makes them feel native to the brand.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 00:25

01 · Intro

Credibility hook ($50M in email revenue across FlyByJing, Dip, TheManshake), promise to build an email from scratch with the exact conversion-focused process.

00:25 – 07:09

02 · Collect Assets

Browse Milled to find a reference layout (Gruns raspberry lemonade launch email). Navigate to demo brand Despierta, use browser DevTools Network tab to pull fonts, download product images via inspect element, use CSS Peeper for brand colors, convert .woff files with CloudConvert, read site copy to absorb brand voice. Mid-section service CTA at ~5:00.

07:09 – 15:06

03 · Designing the Hero

Open Figma, create 1200px-wide frame, import all assets, place logo at 75px height, drop in hero image at full width, add ChatGPT-generated headline in brand font at 100pt centered, create gradient rectangle to extend hero background using dropper-sampled color points, add subheadline at 36pt, design pill-shaped CTA button with gradient stroke and brand purple fill.

15:06 – 19:34

04 · Designing the Body and Footer

Add product info section below hero with Celestial Calm headline and second CTA. Build a review card: tan/cream background with purple border, star rating, bold review title, named reviewer attribution, pull quote, product image. Add footer with logo, unsubscribe link, mailing address. Final reveal of the complete email.

Atomic Insights

Lines worth screenshotting.

Opening Figma before gathering reference layouts and brand assets is the most common reason email designs fail to convert.
Milled.com holds over 43 million e-commerce emails — use it to reverse-engineer the layout of any high-performing brand in your category.
Every font, logo, and product image a brand uses is already publicly accessible via browser DevTools — no brand kit request needed.
.woff font files are not directly usable in Figma; download via Network tab, convert to TTF or OTF with CloudConvert.
Design emails at 1200px wide, not 600px — upload the full-res file to Klaviyo and clarity improves significantly on retina screens.
A gradient rectangle sampled from the hero image itself creates a seamless background extension without Photoshop AI or manual blending.
Adding the reviewer name next to a star rating increases conversion — anonymous testimonials carry less weight than attributed ones.
A pill-shaped CTA button built from a gradient stroke matches brand identity better than a default solid-fill rectangle.
Reading a brand website copy before writing email copy is how you stay on voice — CTA language and hero taglines are direct clues.
The footer needs only three things: logo, unsubscribe link, and mailing address.

Takeaway

The pre-design phase is where email conversion is won.

WHAT TO LEARN

Before opening Figma, three steps — reference research, asset extraction, and copy absorption — determine whether the finished email feels native to the brand or generic.

Use Milled to find a brand in a similar category and study its best-performing layout before designing anything; borrowing structure is faster and safer than starting from intuition.
Every asset a brand uses on its website — fonts, logos, product images — is accessible via browser DevTools without requesting a brand kit, removing a common project bottleneck.
Font files downloaded from websites are usually .woff format; convert them to TTF or OTF with CloudConvert before importing into Figma, or the text will not render correctly.
Design email frames at 1200px wide rather than the conventional 600px; most modern ESPs like Klaviyo render the full resolution and clarity is noticeably better on retina screens.
A gradient rectangle sampled from the hero image itself — with color stops at 20, 40, 60, and 80 percent — extends the background seamlessly without Photoshop.
Reading a brand website copy before writing email copy keeps you on voice; pay attention to CTA language, hero taglines, and product description phrasing, not just the visual identity.
Adding a reviewer name to a testimonial card increases its conversion weight; an anonymous five-star rating carries less social proof than one attributed to a real person.
A review section that combines a star rating, bold title, named attribution, pull quote, and product image in the same card is more persuasive than a quote block alone.

Glossary

Terms worth knowing.

Milled: A searchable database of over 43 million e-commerce marketing emails, used by designers and marketers to find layout references and study what high-converting brands are sending.
ESP (Email Service Provider): The platform used to send emails to subscribers, such as Klaviyo or Mailchimp. Designers export finished Figma frames and upload them here.
Hero section: The top visual block of an email — typically a full-width image with headline, subheadline, and a CTA button. It determines whether the subscriber scrolls.
DevTools: Built-in developer panel in Chrome. Used here to inspect page elements, find image URLs for download, and view network requests to identify font files.
CSS Peeper: A browser extension that surfaces a website color palette, typography, and image assets in a single panel without manual DevTools inspection.
.woff / .woff2: Web-optimized font formats used on websites. Not directly importable into Figma — must be converted to TTF or OTF first.
Oneirogenic: Producing or enhancing dreams. Used by the demo brand Despierta as a product descriptor for their sleep supplement blend.

Resources

Things they pointed at.

00:48toolMilled ↗

05:54toolCSS Peeper ↗

03:07toolCloudConvert ↗

09:50toolChatGPT ↗

08:56productKlaviyo ↗

01:02channelGruns ↗

01:51linkDespierta ↗

Quotables

Lines you could clip.

00:44

“Most people are gonna wanna jump straight into Figma, which is a huge mistake.”

Contrarian opening claim with high agreement potential among target audience→ TikTok hook↗ Tweet quote

16:57

“Names always increase conversion rates, so make sure we get those included.”

Specific, actionable, quotable as a standalone tip→ IG reel cold open↗ Tweet quote

08:49

“When you upload a 1,200 pixel wide thing into Klaviyo, you're gonna see much, much better clarity.”

Concrete technical tip that counters conventional 600px advice→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphor

In the past four years, I've generated over $50,000,000 creating emails for brands like FlyByJing, Dip, and TheManshake. And in this time, I've, you know, figured out how to actually create very high converting emails.

So that's why in this video, I'm gonna cover my exact process for actually doing so. While most videos will involve just a few boxes being dragged around and some templates that'll just honestly never be used, in this video, I'm gonna create an email from scratch. That way, you know exactly how to create an email design that's gonna convert.

Now before we even get started, we need to actually gather our brand assets. And, really, this comes down to the difference between an email that's gonna flop versus an email that's gonna convert like crazy. The reason being is that most people are gonna wanna jump straight into Figma, which is a huge mistake.

Because at the end of the day, a very high converting design comes down to the right imagery, the right copy, and actually understanding what a high converting email format actually looks like. So with that said, let's get right into my process of how I go about doing that. Alright.

So here we are inside of mill.com, which is a great search engine essentially for emails. And what we're gonna wanna do is that most of you are not gonna know exactly how to lay out an email, just quite frankly speaking.

Uh, and what we can do is actually we can rely on other brands, which do convert very, very well to actually give us the structure that we need. So let's look at a high converting brand. So look at something like Grunz.

We pull up Grunz. We're look gonna at this brand because it's actually very similar to a brand that we're gonna wanna build an email for. Uh, what we're gonna wanna do is we're gonna build a launch kinda email.

So I'm gonna look around here, uh, and it looks like we got a launch that went on with this raspberry lemonade. So let's go to this. New flavor alert.

Looks great. And this is actually a great thing. I mean, it looks visually great.

This is actually built in a very, very strong way. I love the hero section with how it's laid out with the CTA and whatnot. And as we go down, we can see exactly how they're laying this out.

They're going through some daily benefits, doing a good infographic here, pointing out the product. I like the way that this email is laid out. It's very, very clear.

CTAs are great. So I think this is a great spot as far as a potential thing that we can use as a email design example. So what I'm gonna do is I'm gonna download this email.

I'm gonna throw it into Figma for later, uh, and we're gonna go on to the next step. Alright. So here we are on the site for the brand that we're gonna actually do this email design on, which is Despirta.

Uh, what we're gonna wanna do is we're gonna actually try and do a product launch email. Now, obviously, they are not launching this product, but we're gonna do this as an example. Uh, we're gonna do this for the product called Celestial Call.

Uh, and what we're gonna wanna do whenever we work with any kind of brand. Now, typically, if you're working with a brand, you might actually have access to this pretty quickly. But if you're working with a brand that you haven't worked with, what you can do is you can actually pull a lot of the assets that you're gonna need because you're gonna need imagery like we spoke about.

You're gonna need fonts. You're gonna need logos, and all of that can be pulled from the brand's website. What this can be done with is you can either, in this case, for example, go to inspect, uh, or you can run up your, um, console.

So you can run like this. Uh, and this is how you're gonna actually pull a lot of the assets that you wanna use. So for example, if I wanted to pull the fonts, I'm gonna go here.

I'm gonna hit the network tab. I'm doing this inside of, uh, Google Chrome right now. And if I refresh this page, I'm actually gonna have every single one of the fonts that are used on the site right here.

And if I wanted to download these, I'm just gonna double click, and it's gonna download each of these things. And then I'm gonna have those font files. Now I may have to convert them into usable versions because the w dot o f f, um, you're not gonna be able to use.

Uh, but you can convert those using something like a CloudInvert like I have up here to actually convert those into usable, um, things like a TTF or an OTF. So with that being said, you know, we're also gonna shop around for some imagery.

I'm loving this image right here. So like we did before, I'm gonna inspect the element here. I'm gonna pull it here.

I'm gonna see that there's a image here. And what I can do here is I can actually pull this piece. So if I click on here, click on this, I can actually go in there and just download the image.

Pretty simple. Pretty straight to the point. We're gonna download that.

It great. Looks fantastic. I'm gonna look around and potentially download some other imagery, but this is a great way to go about doing so.

Uh, what you can also use are some tools. Like, I have this one called CSS peeper, which allows you to quickly, if you wanted to, pull the colors of the website. Uh, you can also pull some assets here and also see the typography.

So if I wanna just know, for example, which, uh, font this was, this is Wilkista. Don't know exactly that font, not as big one, but Grotesque is being used here on the h two level, looks like, and on the, uh, body.

It's also using Grotesque, which is great. Uh, and we can also pull things like the logo as well. So if I wanted to pull a logo, inspect that element.

Let's go down to here. You typically have different multiples here, a one x, two x, and three x version depending on the size. We're gonna click on this again, and we can download that, uh, logo as well.

So I'm gonna save that. Perfect. And as we go through, it obviously you know, different ways things and what we can download.

Uh, I'm gonna wanna also pull a product image because this is obviously just not the only the piece. So if I go to the shop page, it looks like we have something here. And we're gonna again do an inspect element.

You know, this is a a big cheat code, if you will, in terms of getting these assets. I'm gonna dig into here a little bit. Uh, we're gonna dig into that.

Uh, and you can break it down usually by what it's highlighting. Um, and if you don't understand, um, any kind of CSS or whatnot, you know, click around until you find it.

You'll probably find it. Uh, in this case, here's the exact image that we're after, which is the, you know, PNG with the, you know, transparent background.

So let's do that. Let's download that. And there we go.

From there, I pretty much had all the assets at least I'm after at this moment. And we have our fonts. We have our logo, and now we have our imagery.

Now if you wanna generate more revenue for your brand through emails and you don't wanna spend countless hours designing the emails yourself, book a call using the first link in the description. We've helped FlatWeijing, for example, sell out their entire catch up launch, and we think we can do the same exact thing for yours.

So if this is something you're interested in, we'll call you in the first link in the description. Obviously, I can continue to download imagery that I see. Instagram is also a great place to get imagery for different brands and whatnot, but this is obviously a very, very rapid and quick way to at least pull from the site, which is a, obviously, best way to get the the brand assets.

So with that being said, what you then wanna do is convert any of that into usable pieces. A lot of this is gonna download as a dot web p. So you may have to use something like the cloud convert to actually convert those.

Now, obviously, I'm gonna skip through this. You guys don't need to watch me convert my files. Um, but once I'm done with that, we'll move on to the next piece.

Alright. Now that I'm done converting the actual files and making sure that they're in usable formats so that when we go to the design process, it's actually very straightforward. We can use everything.

I wanna make sure that I'm also pulling language and getting a good understanding of the product. So I'm gonna read through the copy here. Get an idea of the the way that people are talking, um, in this, you know, the brand voice and whatnot.

Uh, so that when we do write the thing, for example, I'm looking at CTA language. I'm looking at, you know, let's go to the the, you know, homepage of the website here. Awaken the magic within.

Loving the language here, you know, very I'm gonna call it very fairy like in a way. So I love exactly kind of you know, obviously, I'm loving the imagery that I'm seeing here.

It's great imagery. Loving the CTA language, getting a good idea of how they're kinda talking, uh, as far as the, um, you know, the way that they're actually speaking in terms of brand voice. Uh, and I'm gonna use this as far as when I'm going to actually put together said info, you know, for the actual email when you could launch it.

So, you know, looking at things like the info, looking at what it's formulated with, looking at reviews, uh, what it may assist with, this is all great information. Uh, and so when we go to generator copy, and if you decide to write the copy yourself, you can also use potentially the the help of AI like ChatGPT.

Obviously, make sure you're keeping an account how the brand brand is sounding. You wanna send on, you know, on voice and whatnot, make sure we're not mixing things up too much. But with that said, once we have the copy, we can then move on to the next step, which is moving into design, is the, obviously, the exciting part.

Now that we have our brand assets ready, we can finally get to the exciting part, which is actually jumping into Figma and getting right into the design process. So let's get into Figma, and we'll go right through it. Alright.

So here in Figma, we're gonna open up a new design file. So we're gonna go up to the top, hit plus, hit design, and we're gonna be brought into our working area. In this case, you know, I'm gonna wanna bring in all of the assets that we've since downloaded.

So let's bring them in one by one. We're gonna bring in our product image. We're gonna bring in our imagery that's more of a I'm gonna call it more of a not not lifestyle, but more interesting of an image with some, you know, different elements going on with it.

We're gonna wanna bring in our logo for sure. So let's put that in. Let's pop that in there.

And then let's bring in our email design that we wanted to, uh, look at as an example. Right? So we have our inspiration here as well.

We're gonna keep that here. Then we're gonna also wanna do is we're gonna wanna pull any colors to brand colors. So in this case, make this a 500 by 500 thing.

So back to the website really quick. And, actually, I already had it pulled up there, but let's go through it again. We're gonna wanna pull any colors that we wanna pull into here.

It looks like the brand colors in this case is purple that they're running, 798 instances of it. We're gonna copy that code right there.

We're gonna go back, and we're just gonna leave it here just so that when we do need to work around with it, we can do so. Alright. So now let's actually get to creating the email.

So we're gonna wanna use a frame. Uh, to do that, you're gonna have to use the frame tool here at the bottom, or you can click the f key, and we're gonna drag and drop that. And we're gonna wanna set it to 1,200 pixels wide.

You know, you might be asking, hey, Aaron. Why are you designing 1,200 pixels versus 600 pixels? The reason is is because, yes, while we can, you know, try and conform things to the 600 pixel width, we do wanna get as much resolution as we can.

And quite honestly, it's just a little bit easier to work with more because you can always, you know, bring it down and compress it down to 600 pixels if you need to. But when you do upload a 1,200 pixel wide thing into Klaviyo or whatever you might be using as your ESP, you actually are gonna see much, much better clarity.

And that's honestly just worth it when it comes down to making sure that your designs are shining through. So now that we're here, let's get into designing it. So with an email, it's always gonna start with the really just the logo portion at the top and then the hero section.

So let's design both of those. So for one, we're gonna pull our logo. Let's copy that, and let's drag it over here to our email.

Let's go over here. Let's blow this up to 75 pixels in height. Looks like a good size for this specific logo.

Let's drag it into there, and then let's make sure we then move into building our hero section. So hero section, typically gonna be based off of some kind of lifestyle image. In this case, if we're looking at this, you know, Grunz was using a product image, which I think is great, obviously, with some different things.

So let's do a very, very similar thing with Despirita here, with celestial calm. Let's drag and drop that into our frame here. Let's resize that a little bit.

In this case, let's actually just bring it down to 1,200 pixels so we can use the entire thing, and let's center that up right there. I'm liking what I'm seeing so far. Alright.

Sweet. So now what we're gonna wanna do is we're gonna start wanting to bring in our copy. So as far as our copy, I went through and actually went and just generated this through ChatGPT, uh, just to make this easy and quick.

Alright. So our headline, what we're gonna wanna do is use the text tool, drag and drop this in here. We're gonna put in rediscover sleep, and then we're gonna want to use those fonts that we're using before.

So if I remember, this is the font that they're using for the headers, and we're gonna wanna ahead and go ahead and pull that up. So let's pull it up to, like, 80 and see what that looks like. They can go definitely a little bit bigger.

So let's do that. Let's go up to a 100.

I'm liking what I'm seeing this so far. So this is already a great font. Let's shrink what this is as far as the sizing between these.

Let's drop this down to, like, a 110%. Uh, let's go up to one twenty.

Yeah. Yeah. Like what I'm seeing there.

I do like to design all of my emails for center. So let's do this. Let's through the space there.

Do it like this and drop it like this. Alright. Sweet.

So what you're looking at right now is it's pretty basic. You know, you're probably looking at this and like, hey. This this doesn't look great, and I agree with you.

What we need to actually work on right now is we do need to work on the transition. And what this can be done as far as, you know, this is a little secret that I to do is I like to actually create a thing to extend the image itself.

This is very, easy to do. So I'm gonna create a rectangle in here. I'm gonna go into the fill section.

I'm going to click on the gradient, make it a linear one. I'm gonna add in a few points here. So I'm gonna add in one at 80%, one at 60%, one at 40%, and then one at 20%.

And then what we're gonna wanna do is pull the colors for each of these. So you're gonna go here. You're gonna go to your dropper tool.

Click on this. And you can do this for every single thing right below the point that you're sampling at. And as we go down, what you're gonna see here is gradients gonna be formed.

That is going to allow us to essentially very easily extend this background without it looking like we're actually doing anything to it. Now you actually can do this in Photoshop very easily using their AI tool, but what you get here is you actually get this perfectly extended piece right here, which looks fantastic.

And then as we go to here, I'm not liking the black. Let's either convert it to the purple, and let's try it like this.

So let's go over here. Let's use our dropping tool here and go touch this. This looks okay.

I do potentially wanna try something, and let's see what this looks like in white. Might be a little bright. So let's go back to the purple.

Looks perfect. Let's stick to that. And then at the top here, just because I wanna keep this looking pretty strong, let's actually not do that.

Let's add in a line. So we're gonna put this line here starting at the corner here, going like this. And what that does is we get this nice nice transition from top to bottom.

So we have that headline there, which looks fantastic. And what we're gonna wanna do now is we're gonna add some subheader copy. So let's go through here.

Add our text, and we're gonna add in this this subheadline. See what this looks like. Too big right now.

We're going down to grow test, MTD, STD, which is what the font was from there. And we're gonna drop this something more more approachable. Now keep in mind, obviously, that we're still designing for, um, our mobile.

So under this, let's do that. Let's go like this. Let's go down to our colors, and let's make this a little bit bigger.

I'm not liking how big this is. Let's jump this up to 32. So you can't see that before inside of the mobile.

So now we're doing looking at this. I'm gonna pull this up into here. Looks a little bit better.

I still wanna go a little bit bigger. Let's go up to 38. Still no.

A little bit big. Let's go to 36. Make this a little bit wider.

Let's drop this in the middle. Looks fantastic. So we already got our sub headline there.

Now let's go ahead and add in our CTA button. So to design a button, all it's really gonna be is a rectangle with some text over it. So you're gonna click r.

We're gonna create our rectangle here. And very, very similar to how we, uh, went through and made some edits to really any of these things, we're gonna go through and go up here now to our actually, why am I blanking on this here? Uh, we're gonna actually go ahead and change the corner radius.

Uh, in this case, let's look at the website to get some ideas on what CTA should look like. In this case, it's more of a a pill shaped button, so let's let's do the same thing there. Let's try this at 30, see what that looks like.

Not enough. Let's just throw it up to a 100. Honestly, it doesn't matter.

And now we got a pill shaped button, which looks fantastic. But let's let's try and do something actually pretty fun. Let's actually try and recreate this exact same style as what we're seeing here.

So it looks like it's a purple kind of transition. So let's do that. Let's make that, uh, the fill.

And let's actually make this sorry. It shows in the stroke, like that two pixels wide, and then the fill itself is gonna be the same gradient we had from here, up here. So let's do this.

Can I copy this? I can. There we go.

So that's a nice little button that we put in there. It's actually very, very similar to the background here, but I'm gonna make this a little bit darker at some of the ends. So in this case, let's do this.

Let's remove these three things here in the middle. Let's draw this to this, and then let's go ahead and make these a little bit darker. So we just get some more color off of this button.

Looks fantastic. So let's go ahead now and add in the CTA. So we can go ahead and just duplicate our piece here, and we're gonna add in our CTA.

So this case, it's going to shop celestial calm. Uh, let's do it all in caps to match the style from before.

Let's just do it like this. Perfect. And then we're gonna wanna center this at the button itself.

So in this case, it looks like the text is not quite here. Let's do it like this. Here we go.

And let's center this within the middle of the button. Looks great. Let's make the button just a little bit wider and center the button.

And then what we're gonna wanna do is select these both, and we're gonna group it. You can either right click up here and hit group, or we can do command g and group them. Looks fantastic.

Let's actually change the button text to be white because I just wanna see what that looks like really quick. Honestly, I'm not loving it. Let's go back to the purple.

Let's stick with that. That looks fantastic. So now we've got our header.

We've got our, um, subheader here, and we have our CTA. That's a great hero section. And I think we're off to a very, very strong start.

I'm liking how this email is coming together. But either way, now that we've designed a very, very high converting hero section that's gonna grab their attention, we now need to design the body section, which is actually gonna move the person potentially towards actually buying the product. So with that being said, a lot of this does come down to transitions.

So let's look at what that exactly means and how you can actually do that yourself. Alright. Let's design next a product review section.

So what I'm gonna do is I'm actually gonna keep it such that we kinda shift things around. So before, we had a wave type of pattern going into something. So I'm gonna pull the section from above, which I think is actually a great color asset, and we're gonna add a top and bottom to this.

So let's add an effect. We're gonna add stroke to the sorry. Not an effect.

Stroke. And we're gonna do this specifically to the top and bottom. So we're gonna put zero, uh, and zero for the sides.

And then on the top and bottom, we're gonna add a let's do three. And we're gonna add it as a purple top and bottom. Now that I think about it, I should adjust this up here.

And we're gonna add a product review in here. So, like, crafting a section like this, I think, is a pretty good way to to go about, uh, the transition and whatnot. So what we're gonna wanna do is let's add in a rectang tangle section.

I think the color in this case can be something a little bit more more of the tan variety. So what I'm gonna do is I'm actually gonna pull something like this, and we're gonna lighten it up. So we pull up to the left a little bit.

Great. And then let's add some edges here. Let's do, like, a 30.

We're gonna add a stroke to the inside like so. And this gives us a a very good canvas to at least work on. You know, I'm actually gonna want this to be a little bit more more of the tan yellow like this.

Yeah. That looks great. Alright.

Perfect. Alright. So let's get the review in here.

So let's put the text in. Elixir to rest. We're gonna bold that out.

Looks great. Let's put this to our purple.

Looks perfect. We're gonna use a very, very similar format to what the actual view itself looks like. Let's copy and paste this out.

Unbold this, and let's pull the review from the actual site. Let's drop this in here. Perfect.

We're gonna left justify it. Put this to the right. Looks perfect.

And then we're gonna wanna do this. Let's add in some stars. So we actually do have that as a piece here.

So let's do that. Let's put these as 60 by 60, and then let's fill it with purple. So we're gonna go like this, like so, and then let's put names as well.

Names always increase conversion rates, so make sure we get those included. Perfect. Let's put in there.

And then what I like to do too, if possible, is adding the actual product. So let's do that because we actually do with the asset. See if that looks like this.

We can always play around with that. So let's try this. Let's make it a little bit like this.

Maybe we like it straight and pull this thing down here. Beautiful. Actually, do you like it like this?

Let's put it like this, actually, so that's like this. Set that in. And from there, we have ourselves a review.

Let's actually make this a white background. Let's see what this looks like really quick. Actually, I think that looks a whole lot better now that I'm looking at it.

Let's make this slightly bigger. Perfect. We're gonna drag and drop this up.

I think that looks great. And then we added ourselves a great review. So now that we're at this point, we're gonna wanna now add is we're gonna add a footer section, which is very, very important because it's a great way to finish off our email.

So let's go down to the bottom, and let's add that in. This does not need to be anything special. It should include the basics.

I always like to conclude with some kind of logo at the bottom. Always easy to do. So let's put that down there.

And then we're gonna wanna add the pieces of text that we need to add in. So let's do this. Let's go in and add our pieces of text.

For example, let's do like this. This, we're gonna wanna underline that as such.

And then typically, this text is a little bit smaller, so let's do that really quick. And then with every email, there's always gonna be some kinda address. But in this case, for example, let's also add in any of this, you know, address information if there's any kind of terms of service, privacy policy, etcetera.

From there, let's add just a little bit of height. Oh, way too much like that. And then from there, we have ourselves a full email that is ready to go out and send.

And just like our example over here, we have some very, very good imagery being used here. We have on the right side our hero section followed by a section covering the actual product and even a review of said product being used here, which I think is a great addition. So overall, I think this is a pretty good email, uh, and definitely can be sent out and actually is built in a way that would convert very, very well.

Uh, we have two different, uh, CTAs being added at this point, so I see this as a very, very strong email. Alright. So now that we've wrapped up things inside of Figma, I'm gonna put the full email design up on display now for you to see.

You know, that being said, I'm actually very, very happy with how things turned out. So at this point, you should be able to design your own high converting email inside of Figma just following the same steps I went through. You know, that being said, I also did not cover exactly how to put together a profitable strategy.

So if you do wanna see how I was able to generate $30,000,000 in the strategy behind that in the last twelve months, view the video right here. With that being said, I'd appreciate a like on the video. And if you wanna see more of this content, feel free to subscribe.

That being said, I'll see you guys on the next one.

The Hook

The bait, then the rug-pull.

Fifty million dollars in attributed email revenue is the credential he leads with — and then, unusually for a design tutorial, the first seven minutes do not touch Figma at all.

Frameworks

Named ideas worth stealing.

00:48concept

Milled Reference Method

Before designing, find a brand in a similar category on Milled, download their best-performing email into Figma as a structural reference. Borrow the layout logic, not the visual identity.

Steal forany new email client onboarding — gives you a defensible layout rationale on day one

02:30list

DevTools Asset Extraction

Network tab for fonts (.woff to CloudConvert to TTF)
Inspect element for images
CSS Peeper for colors and typography
Shop page PNG with transparent background for product shot

Systematically pull every brand asset from the live website without asking the client for a brand kit.

Steal forany freelance email or ad project where brand assets are not provided upfront

10:49concept

Gradient Background Extension

Place a rectangle over the bottom of the hero image. Apply a linear gradient with 4 stops at 20/40/60/80%. Use the dropper to sample image color at each stop. Result is a seamless extension that eliminates the hard edge.

Steal forany email or landing page hero where the image does not fill the full frame

CTA Breakdown

How they asked for the click.

VERBAL ASK

05:00product

“If you wanna generate more revenue for your brand through emails and don't wanna spend countless hours designing the emails yourself, book a call using the first link in the description.”

Mid-video service pitch placed at the natural transition point after asset gathering and before design. Clean, non-disruptive. Outro points to a related strategy video.

MENTIONED ON CAMERA