Project Brief: Convert XD/Figma Designs to Mailchimp Templates

Objective:
Convert provided Adobe XD / Figma email designs into responsive, Mailchimp-compatible HTML templates that:

Are editable within the Mailchimp editor (drag-and-drop blocks, text, images, buttons).

Render consistently across all major email clients (Gmail, Outlook, Apple Mail, Yahoo, etc.) and devices.

Scope of Work

Export & Preparation

Extract assets from XD / Figma (images, icons, background graphics) in appropriate formats (JPG/PNG/SVG).

Optimize images for fast email loading.

HTML/CSS Development

Hand-code HTML email using table-based layout (inline CSS for maximum compatibility).

Ensure code is Mailchimp template language (MC Templating) compliant for editable areas.

Implement responsive design using mobile-first approach (hybrid or fluid layout).

Mailchimp Integration

Define editable content areas (mc:edit) for text, images, and buttons.

Ensure drag-and-drop sections where possible.

Configure repeatable sections if needed (mc:repeatable).

Compatibility Testing

Test rendering on:

Desktop clients: Outlook 2016–2024, Apple Mail, Thunderbird.

Webmail: Gmail, Outlook.com, Yahoo Mail.

Mobile: iOS Mail, Gmail app, Outlook app.

Test in both light and dark mode.

Delivery

Final HTML files + Mailchimp template import package (.zip or direct MC upload).

Documentation on editable areas and best practices for editing in Mailchimp.

Technical Requirements

Do’s:

Table-based layout for structure.

Inline CSS for styling.

Mobile responsiveness via media queries.

Fallbacks for background images.

Alt text for all images.

Web-safe fonts or Mailchimp-supported Google Fonts.

Don’ts:

Avoid external CSS or JavaScript.

Avoid absolute positioning unless absolutely necessary.

Avoid CSS properties unsupported by major email clients.

Deliverables

Editable Mailchimp-compatible HTML template.

Fully responsive, cross-client tested design.

Documentation for Mailchimp editor use.

Source XD/Figma assets (optimized and final).