This one's for you frontend devs boggled by 0.5px weird icon cropped off.
| Figma Design | Your App |
|---|---|
 |
 |
Well, crap... (Icon on flaticon.com by freePik)
Why icon gets cropped?
Figma designs have high precision, to pixels' decimal places. Below discussions are quite detailed, so I summarize:
- Figma Export PNG will crop / extend icon if pixel is on non-integer value coordinate. See below example on icon width.
When actual icon has non-integer pixel, it may expand to possibility1 or shrink to possibility2
Reference Links:
Figma Discussion: Unwanted cropping when exporting to PNG
Figma Discussion: SVG exports at a different size to W & H values in editor
Figma: Export SVG vs PNG
- SVG precise in size to decimal places, PNG is less precise.
How to obtain uncropped icon?
- Export as SVG, then use a SVG to PNG converter.
- ezgif.com/svg-to-png preserves the quality
- can either (1) fix neither width nor height to get original size PNG, (2) fix longer side to match defined maximum side length in code (eg set 32 for
<Image style{{height:32, width: 32}} ... />) - Option 2 is good in times when the icon is really off-integer-pixels, where a ezgif default export becomes 32x33 px. Idea is to make the longer side of icon fit the view box (in this case maybe 31x32 px). Then only the shorter side will remain uncropped.
Alternatives
1. Export PNG in Figma with size 1.06x instead of 1x
Supposedly, if you find the right multiplier, you could hit an integer pixel (instead of decimal), and that could work. But it requires plenty of trial and error, and a flooded Downloads folder.
2. Use resizeMode: contain
A colleague recommended this, it was quite an interesting alternative.
https://mehrankhandev.medium.com/understanding-resizemode-in-react-native-dd0e455ce63
Top comments (0)