Hello folks!
I’m working on converting my Figma email designs into HTML code for use in Salesforce Marketing Cloud. I’ve been trying out some automated conversion tools to speed up my workflow, but I’m running into some issues with the final output.
The main problem I’m facing is that when I take the generated HTML and put it into SFMC, it looks decent in the preview. However, when I actually send test emails and check them in Outlook, the formatting gets messed up pretty badly. The layout doesn’t match what I designed in Figma at all.
Has anyone dealt with similar issues when building email templates? I’m wondering if there are specific techniques or best practices I should follow to make sure the email renders consistently across different email clients. Any advice on improving the conversion process would be really helpful!
Outlook is notorious for being one of the most difficult email clients to work with since it uses Word’s rendering engine rather than a proper web engine. The automated conversion tools typically generate modern CSS that simply doesn’t work in Outlook’s antiquated system.
What worked for me was abandoning the automated approach and hand-coding the templates using table-based layouts with inline CSS. I know it sounds tedious, but it’s the only reliable way to ensure consistent rendering across email clients. Also, make sure you’re using Outlook-specific conditional comments for any problematic elements.
Before you invest too much time in this, I’d recommend testing your current output in a tool like Litmus or Email on Acid to see exactly which parts are breaking in different Outlook versions. This will give you a clearer picture of what needs fixing rather than guessing.
I faced this exact problem last year when transitioning from automated tools to reliable email templates. The issue stems from Figma converters treating email HTML like web pages, which creates major compatibility problems with email clients. My solution was implementing a hybrid workflow where I use the Figma design as reference but rebuild the structure using email-safe techniques. This means nested tables for complex layouts, spacer images for consistent spacing, and avoiding flexbox or grid entirely. I also learned to design with email limitations in mind from the start - simpler layouts translate much better. One practical tip that saved me countless hours: create a master template with your common layout patterns first, then adapt it for each campaign rather than starting from scratch every time. This approach dramatically reduced my Outlook rendering issues while maintaining design fidelity.
ugh outlook is the worst! i’ve been down this road before and honestly figma to html converters just dont understand email quirks. try using foundation for emails or mjml framework instead - they’re built specifically for email rendering issues. saves tons of headaches compared to regular html/css
I feel your pain here! Outlook is well known for being tricky to optimize for. It’s worth noting that there is no way to fully get your email looking exactly like it does in Figma or a drag and drop builder in Outlook. For example, if you have rounded corners using CSS, like a button with rounded corners, Outlook will ignore that style and make them square. However, there is a Figma plugin called Email Love that uses MJML to convert your layers and frames into responsive and accessible email code. MJML is an email framework that generates email HTML that looks good across email platforms.