[nateroling]

The problem with these kind of pixel-perfect, inspectable design tools, is that there's no distinction between important details and unimportant details.

For example, if our app uses a letter-spacing of 1.2 for all the body text, and your Figma design uses a letter-spacing of 1.25, is that important? Or is that a mistake?

In something like Figma, being consistent is difficult for designers. But in code, being consistent is the default — exceptions are hard for developers!

There's a fundamental mismatch that just ends up being painful all around.

"The map is not the territory." Trying to get a design doc to 100% accuracy is often a waste of time. Design tools need a way to specify which details are important, and which are not.

[maroonblazer]

In my experience the designer and the developer need to be co-located, either physically or virtually. There's just too many questions that come up during implementation of a design that can't be expressed in the design doc (or it's inefficient to do so) and so the feedback/communication loop between these two needs to be fast and high-fidelity. I.e., the dev can't be offshore while the designer is onshore. I've tried it a number of times and it never worked.

[seer]

To be honest Figma gives plenty of tools to solve this problem. With various reusable components, font/color/sizing templates etc. Its reasonably easy to be extremely consistent with your measurements in figma, as long as designers spend the time to learn the tool, and not just use it like photoshop / illustrator.

Even resizability can be done quite well, allowing the designers to create reusable bits that stretch and squeeze to fit the needed space, and the way they deformed can be easily read (and verified!)

[novok]

This is what a design system is about, you set up the standards of essentially an enum, give them names and say that if the designers want to change it or add something new, they need to add it to the design system. 14 point fonts becomes 'caption' size and so on.

[sethgoodluck]

That's a problem with your communication between dev and design - not the tool

[nateroling]

Absolutely is is. But the tool itself is a medium for that communication. What is Figma for, if not communicating design decisions?

[zarzavat]

When writing CSS for a Figma design, I first try to match the Figma as exactly as is reasonable, then I do a visual diff to make sure I haven’t missed any important details, then I clean up the CSS and relax some of the constraints until the (S)CSS is maintainable e.g. if I have padding of 19 and 21, lifting that out into a $padding: 20px constant.

[bunga-bunga]

Mockups are mockups, they’re suggestions. More often than not, sizes and spacing don’t match across views and it’s a waste of time to be “pixel perfect.”

[zarzavat]

As I said, I don’t try to make the end result pixel perfect. I try to cut a balance between being faithful to the design and having maintainable code.

Spacing and sizes do matter though. There’s a reason why we have thousands of different fonts, even though 5 would be sufficient. When lengths are proportionate it creates positive feelings in the user. People are unconsciously very perceptive to small changes in proportions - it’s sexual attraction.

[mrxd]

Design linting tools solve this problem.