General wireframing tools are made for websites and apps. An email is narrower, built from stacked sections, and has to work in inboxes that ignore half of modern CSS. Starting from website components means redrawing the same email shapes every time.
Blocks that are already email-shaped
Thirty-three blocks in six groups, each labelled with what it is:
- Top: view in browser, logo header, logo and menu, offer strip.
- Hero: hero image, hero with a headline and button on it, hero with image and words.
- Content: headline and text, text, image, image with caption, image and text either way round, two columns, three features with icons, a list of benefits, a quote or review, event details, video, countdown.
- Products: one, two or three products.
- Actions: one or two buttons, a discount code, app download badges.
- Bottom: a sign-off from a person, social icons, divider, space and two kinds of footer.
Real words, rough pictures
Type the actual copy into any block, or notes for the copywriter, or pull lines your team has used before from the Copy Bank. For images, write what the picture should show, put a headline or button on it, or sketch it on the drawing pad. A rough sketch is plenty: the designer makes the real one.
Style it as much as it needs
Drag blocks into order. Change a block's background, text colour, alignment and spacing. Make a button square, rounded or a pill, change its size and colours, or make it full width. It's enough to agree the layout, without turning the wireframe into a design job.
Shared, checked and signed off
Share the wireframe with the team, send yourself a test, run your brand checks, and send it for sign-off: approvers and clients see the wireframe from their review link with no account. When it's agreed, swap the grey blocks for real modules from your module bank, or hand the builder the HTML to start from.
Wireframe an EDM
The same tool works for any EDM: lay out the hero, products and offer before the designer starts, and get the client or marketing manager to agree the layout first.
Pricing
Studio, including wireframes, the module bank and team templates, is included on every plan, including Free. See the pricing page.
Questions
Is the email wireframe tool free?
Yes. Studio is included on the Free plan, along with the rest of Mailfois's basics.
Can I share a wireframe with a client?
Yes. Send it for sign-off and they see it from a private link with no account, and can comment and approve.
Can I turn a wireframe into a real email?
Swap the grey blocks for modules cut from your real emails, or copy the HTML as a starting point for your builder. Build and send the final email in your email platform as usual.
How is this different from Figma?
Figma is a general design tool: powerful, but you draw email layouts from scratch. Mailfois's blocks are email-shaped already, the words can come from your copy library, and sign-off is built in.