【Figma】出力した画像がズレたり見切れる [Techblog#44]

Figma には、画像をエクスポートする機能がありますが、出力画像がズレている時があります

例えば、こんな感じの当ホームページのアイコン画像をエクスポートすると、アイコンが右下にズレていました

Figma上ではこんな感じで設定されていて、出力時に画像を 4x にして出力しています

なんと、出力画像の詳細情報を見ると 大きさが 70x4=280 ではなく 281 になっていました

根本的な原因は「位置」が小数で指定されていることにあるようです (寸法ではないです)

Position を「整数」に設定し直して出力したところ、ズレが解消されました 🎉

出力時に等倍サイズではなく、拡大したサイズを設定すると拡大した分だけズレが顕著になります

また、サイズを大きくしてもズレた部分は 1px 分しか追加されないようです