Design HubSpot Email Campaigns in Figma with Marka

Build your next HubSpot campaign where your brand work already lives: in Figma. Use shared components for the layout, comments for review and Marka Email Generator to export the approved email.

This guide focuses on making the campaign and keeping the process repeatable. For the account-side handoff, use the custom HubSpot template guide.

Start with a campaign you send regularly

Choose a welcome email, newsletter or product announcement. A recurring message gives you a useful foundation to reuse.

Browse the HubSpot templates for Figma, duplicate a file and give the working frame a campaign name. Replace the logo and sample copy before spending time on decorative details. Keep the main message and call to action visible near the beginning.

Plan the HubSpot handoff with the campaign owner before final approval. Access to email template tools depends on the account's subscription and permissions; consult HubSpot's template requirements.

Build the campaign from reusable sections

Give the email a shared header, a flexible content area and a standard footer. A monthly newsletter might need a lead story and two smaller updates; a welcome email might need a short introduction and one next step.

You can also start from Marka's ready-made blocks, then edit their text, imagery and spacing in Figma. The block guide explains how to add them to your project.

Keep the button, logo treatment and type styles consistent across related campaigns. Save an approved example beside the working frame so teammates can see how the pieces fit together.

Review the message with your team

Use Figma comments to resolve copy, image and layout feedback before export. Ask reviewers to check three things: what the reader should understand, what they should do next and whether every link points to the intended destination.

Use realistic copy lengths. If you plan a personalized greeting, review a long name and a missing-name fallback as well as the ideal example. Confirm the actual personalization setup with the person managing HubSpot.

Prepare the mobile version

Review the content order, paragraph width and image size on a narrow layout. Check that supporting links do not compete with the primary button.

Use Marka's preview during design review and make revisions in the Figma frame. For setup details, follow the email export walkthrough.

Export the approved design with Marka

Open Marka in Figma, select the project and review the final preview. Marka documents a HubSpot export connection using a private app; use the connection instructions to configure the account handoff.

Once the template is in HubSpot, review it with the campaign's subject, footer information and personalization. Send a test through HubSpot before scheduling the campaign.

Make the next campaign easier

Duplicate the approved Figma frame for the next edition. Update the content, collect feedback and export the revised version. Keep a note of the matching HubSpot template so the campaign owner can distinguish drafts from the approved email.

Start with a HubSpot email template and build your campaign with Marka.