摘抄自知乎-五道口大鲨鱼
UI 设计师用 sketch 输出的设计稿交付工程师后还原总是会遇到一些问题
尤其以字体与其它元素的间距最容易出问题，主要的原因是 sketch 与 ios 系统中字体的行高不同。最简单的解决方法是通过手动调整 sketch 中字体的行高，业界常用的行高是字体 size 的1.2或者1.4倍，实际这两个值都是够不准确的。
所以要想知道最准确的值，那就要先把程序中字体的行高的值取出来，最简单的方法当然就是用 xcode 跑几十种不同尺寸字体，然后截图量出来行高对了。
下图是新鲜的 xcode 用单个 Label 拖动的方式，把不同字号的中英文字体放到界面中
背景颜色即为程序中字体的行高，也就是 sketch 中的 spacing line 的值。
可以看到 mainStoryboard 中的文本已经跑到左边的模拟器里面了，这个时候只需要 com+s 即可保存原汁原味的屏幕截图。
下面这张图就是程序上面的原截图，左边的橙色区域是我已经测量好的行高值。
上图并不容易看清楚不同字体不同的行高，所以我也制作了一个表格
具体整理出来的表格在下方
绿色区域为我们在 APP 开发中常用的字号22px ~30px
最下方的+4 +6 +8..... 都是总结出来的规律：
如果字体大小在12~20之间，字体行高等于字体大小加4；
if ( 12 <= font size <= 20 ) { line height = font size + 4 };
if ( 22 <= font size <= 30 ) { line height = font size + 6 };
if ( 32 <= font size <= 40 ) { line height = font size + 8 };
.......
实际上上面的 if 语句还是有规律的，所以插件里用到了更好的算法，程序方面的东西就不在这里细写了。
计算机上所有重复的工作都是可以通过程序去解决，所以我们制作了一个sketch插件
youngxkk/AutoFixiOSTextLineHeightgithub.com
插件运行原理是遍历 sketch 中字体的大小，然后通过上方表格的规律，把不同尺寸的字体填充不同的行高，达到与 ios 开发中字体的行高相同。
这样用 sketch measure 导出的设计稿给工程师的时候，只要工程师按照设计稿上面字体与其它元素间距的值去写程序，那么还原度理论上是100%的。
【只测试过 iOS 系统中苹方和 SF 字体，其它的自定义字体就随缘吧。】
【建议多行文本不要使用此插件】会让排版变的很丑陋，多行文本就单独与开发联调吧。
目前支持同时选中多个文本图层或选中单个 Artboard，然后运行插件
使用快捷键效率更高：shift + option + command + i
【GIF】
网友评论