今天重点来讲讲demo制作软件Flinto的操作，官网地址www.flinto.com，需要翻墙。
简介：
flinto，适合做移动端App demo的付费软件，Mac适用，暂时没有Windows版本。
flinto的界面非常像sketch，所以对sketch用户来说，flinto上手非常快。
预备工作：下载sketch的flinto插件
下载地址https://www.flinto.com/mac_sketch_plugin/
然后将其装在sketch的Plugins > Reveal Plugins Folder中。
导出flinto文件时点击sketch的Plugins > Export as Flinto Document 就行了。需要注意的是默认状态下是将sketch文件中所有artboard都导出，建议分artboard单个导出，边做边改。
使用flinto不久，但是它对于移动端demo制作的方便性是非常显而易见的：
1.flinto制作出sketch的插件，可以将sketch文件导出flinto格式，并保留图层，这也意味着sketch文件中每一个元素都可以在flinto中产生动效；
2.灵活的动效，顺畅的手势（包括常见的上下左右滑动，滚动）；
3.用手机下载app可以实现mac与ios同步显示，并且可以将原型分享给他人，其他人只要下载了iOS版本的app就可以直接观看，但是暂时没有Android版本；
4.轻便性操作，以每个画面为单位，进行画面间的跳转（这也是它不足之处，在同一个画面之间的跳转比较难处理）。同一个跳转效果可以重复使用，也可以用reverse功能，进行反转使用，类似于back键。
在使用flinto之前，先要对相对应的sketch文件进行整理，整理的重点在于：
1.保持各个artboard组件名字清晰明了，至少让自己和同事看得懂当前图层是什么作用，当然建议使用英文;
2.保持各个画面之间相同的部件position一致，不然在两个画面之间跳转会出现button跳动的情况；
3.构建好每个画面在自身跳转、画面之间跳转的逻辑关系。
4.同一个画面之间不同的子页面之见，相同的部件要用相同的名字，防止在复用动效的时候出现空的tag，也就是动效出现意外的bug。
用flinto制作demo的过程中需要注意的问题：
1.sketch文件中没有背景的artboard需要添加填充好了的实色背景；
2.背景毛玻璃图片效果需要在图片上进行处理模糊处理，flinto不支持sketch中的background blur；
此文是针对有sketch基础的同学进行说明的，学习软件最好的方式就是自己动手制作，此文不断更新中，希望给大家能带来些帮助。
网友评论