【Day27】Figma篇 : 设计到切版

对於设计师来说使用UI设计软件，除了可以善用之前提到的那些设计工具来增加效率和提升设计方法以外，还有一个很必要的原因，就是可以更方便的分享设计给前端工程师切版。

在Sketch的时候，我们会直接Export到Zeplin给工程师，当然Figma也有Zeplin的外挂可以用，但是这边我们要提到Figma内建的Inspect和Export功能，不需要安装外挂就可以直接使用喔~

合作的前端工程师也要注册Figma帐号，会让操作更顺畅。

分享连结:

1. 点选右上角的Share按钮
   

2. 我们可以选择要用邀请的方式或是直接复制连结，也可以针对不同的对象设定使用权限
   

我这边是设定除了我以外都只有观看权限，点击copy link，然後我们就可以把连结直接贴给工程师，我这边先示意之前Layout Grid设计的Web: 点我进去Figma观看

物件间距 & Grid

点选连结进入Figma後，开始随便乱点乱滑後，可以发现我们的物件在滑到时会出现它和周边物件的距离 :

接着我们就会发现无论怎麽点都是最内层的物件!?这点Figma跟Zeplin刚好相反呢!在Figma的初始状态是最内层，如果我们要点选外层、像是Components或是Group时，我们就要先按住Ctrl键再点物件就可以点到了喔 :

紧接着，我们发现在【Day24】Figma篇 : Layout Grid那篇提到的Layout Grid怎麽在这边不见了呢? Grid在切版可是重要的角色呀!!原来是因为预设为隐藏 :

Inspect panel

在乱点物件之时，我们可以看到右边的Inspact的工具面板会随着点选的物件有不一样的显示:

这个Inspact面板我们可以想成是我们在Chrome上的检查模式一样，可以让我们逐个点击观看

• Code模式:可以看到选择物件的CSS(也可选择APP)

  

• Table模式:可以看到物件的资讯，还可以在这边观看原始图档:

  

• Inspect panel 官方教学

过去我们在使用Sketch时，都要先跟前端工程师沟通要怎麽切图给他们，然後再用Slice进行切版或是先把图片输出设定好，才会进行Export到Zeplin，不然就会出现前端工程师说他们选不到正确的物件或是出现图片无法下载的形况。但是尽管每次给工程师前都要花时间做这件事，也难免会有遗漏的时候...

Export

Figma的Export很方便的地方在於它可以单物件选取输出也可以按住Shift键多选 一次输出多张，让前端工程师可以自己选择他要输出的尺寸和格式，以降低前端和设计的互相来回确认时间