Hacker News Reader

Comment by legitster | Hacker News Reader

As someone who develops email templates, you will never understand my pain. Figma creates a complete fantasy world for designers who do not understand that a pixel and color perfect design is going to be smashed to bits by the client.

Also, I feel the rise of React is partially to blame. CSS frameworks were clunky and constraining - but they forced you into a lot of design constraints developed on years of best practices. I can't tell you the number of React-based enterprise tools I have to use on a daily basis that have picture-perfect designs ... that turn clunky and confusing the minute you resize the window or activate an animation.

View on HN

Oh man, we have a certain email template at work, and the marketing team wanted to redesign that email; for some reason (broken communication, things out of the blue by company who bought ours, blabla), the designer thinks it's appropriate to just give us a Figma link that has no connection with the existing template or even any HTML. As a backend dev, I have no idea what to do with it. For an email, I'd expect something that someone actually made the HTML and sent the email to test it, like with hardcoded values that I could replace with variables, logic, etc, but I can't even understand how they think the Figma design was appropriate. They might as well have sent me a watercolor painting. I got them to export HTML, but it was completely useless since it's placing everything at specific pixel positions. I have no idea how to replicate the design in the email template. Anyway, I don't blame Figma or anything, just ugh, venting...

This is a situation where you can save a lot of pain by bringing in outside help. It's not too hard if you have experience and know the limitations. But there are a LOT of gotchas. Even a simple poor choice of words can get the email caught in a spam filter.

If you have to white-knuckle it, I strongly recommend a service like Litmus or Email on Acid. They will also provide good templates to start from and good instructional content.

Hi, you can try this plugin to get email HTML from the Figma.

https://www.figma.com/community/plugin/1305869752760258922/k...

It is algorithmic and it will try to match your Figma exactly using email specific HTML code as opposed to generative AI. Also it does not have any preconditions like Auto Layout. Just put your email in a Frame. Hopefully, it will at the least get you started. Would love to get your feedback.

Disclaimer: I work here.

> Figma creates a complete fantasy world for designers who do not understand that a pixel and color perfect design is going to be smashed to bits by the client.

Figma employee here. I'm curious if you see this as a mistake of the design tool itself, or if this is endemic to the constraints of html emails? Maybe phrased a better way, what would you like to see to help convey these constraints to designers?

It's kind of endemic to html emails.

Each client chooses how it represents html and css differently. And especially for things like dark mode, they can throw out your design entirely. So you generally stick with 20 year old design practices - lots of nesting tables - safe webfonts - flat designs etc. It's really hard to do any design work without an inbox preview tool like Litmus.

One specific feature that Figma really needs is an easier way to measure distances between elements. In email, you have to build whitespace using a lot of incongruous methods (line-height, breaks, cellpadding, etc). So the Figma padding information often doesn't work, and just having a simple way to draw a line between two elements and getting a measurement would be a real help.

There is a way to do this in Figma. While an element is selected, hold Alt and hover your cursor over any other element, and it will show the gap distance.

In my experience as a 13 years freelancer dev with a design background, the main issue I’ve experienced is that most designers don’t have a lick of dev knowledge and they don’t understand how easy or how complex is gonna be to code what they design. Or if it’s doable at all. Or how hard is gonna be to maintain a site designed the way they designed it. So it’s a matter of not having appropriate knowledge on the subject.

Having a dedicated "Email designer" mode where it takes into account all the limitations of email rendering would be amazing. For example, you can't use a flexbox which designers take for granted, so they end up creating things that result in monstrously complicated <table>s for emails.

How this would look/work in practice I truly have no idea, since you'd have to constrain them by removing some of those features, but then they don't really translate to regular markup/CSS 1:1 either.

That's just bad designing. Good designers use the Figma equivalent of flexboxes and develop responsible designs.

How is this react related? You could always write crappy css. A team creating non responsive react apps would not create responsive non-react apps

They said email templates. That means no flex/grid/typefaces etc etc. emails are painful caveman html

My favorite factoid is that Windows desktop Outlook uses the MS Word engine to render emails. If regular emails are caveman html (which they are), then I don't know what that makes Outlook html.

Neanderthal HTML? Some crossover, but mostly a distinct competing lineage?

Within the confines of Microsoft Office, it kinda makes sense.

You can copy+paste anything from any Office product and it will render in your email. It also makes doing mail merges much simpler.

So as a corporate email tool it's a smart idea. Making it harder for advertisers to design fancy emails is just an added perk.

Fun fact: A factoid is something that seems like it could be a fact but is in fact false. I know it's commonly misused as a synonym of "fact" and I don't really care, it's evolving as a word and that's fine. But I really enjoy the sentence "Fun fact: A factoid is something that seems like it could be a fact but is in fact false." so I can't help but share :D

You mean the definition of factoid (noun) isnt: little facty?!

Reply on news.ycombinator.com