zlacker

[parent] [thread] 2 comments
1. zarzav+(OP)[view] [source] 2023-06-22 04:06:27
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.
replies(1): >>bunga-+B4
2. bunga-+B4[view] [source] 2023-06-22 05:05:46
>>zarzav+(OP)
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.”
replies(1): >>zarzav+No
◧◩
3. zarzav+No[view] [source] [discussion] 2023-06-22 08:33:11
>>bunga-+B4
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.

[go to top]