mac sketch 导出 html,Mac sketch与前端的无缝对接

知乎问：

设计师用 Mac做设计，Sketch方便快捷效率高，想用 Sketch做设计，并进行设计产出(效果+源文件)；但是前端工程师还在使用 PC 进行代码开发，Sketch源文件在 PC 上打不开，从而不能进行切图；之前我们的普遍流程都是前端开发来拿源文件(PSD)进行切图；现在设计师使用 Sketch 进行设计了，如何与还在使用 PC 的前端开发进行无缝对接？希望和大家讨论下这个痛点~

答：

今天与前端(所用为window机)沟通，标注好的效果图为什么还要psd文件？

原因有以下几点：

1.     UI有时候会漏掉一些标注跟信息以及切图，为了减少沟通成本，前端有时候需要自己打开源文件看；

2.     前端需要UI界面中文字的复制；

根据这个原因我觉得不一定非的要psd文件，你给前端想要的信息，不拘泥什么形式都是可以的，现在讲讲我的解决方法：

1．准备工具：1).sketch    2).谷歌浏览器    3).sketch measure

2．假设图一这是做的的文件 (示范稿，大家将就一下)

3．标注好前端需要的数据

4．Plugins—sketch measure—规范导出

5．导出以后会得到一个文件夹，打开index(切记用谷歌浏览器，)得到一个html形式的页面，点击页面中的文字或者图片板块，右侧会出现该板块的信息，样式，字体大小，等等，总之有前端想要的一切信息，

关键是还可以复制文字内容

重点是

前端大大跟我反映这个比psd文件更直观好用。

前端大大跟我反映这个比psd文件更直观好用。

前端大大跟我反映这个比psd文件更直观好用。