DAY6 Figma Prototype

承昨天的Figma介绍，你试着靠自己的力量完成了一个设计稿，满心期待的拿给客户看......

客户：「你这个设计得满赞的欸，但是我想要的是App欸，这样要怎麽操作阿？」

：「欸.....上面有手机的模板啦，你就想像在手机上操作就好啦」

客户：「想像在手机上操作喔.....」

(客户用手指戳电脑萤幕)

客户：「阿怎麽没有反应阿？」

：「.....」

客户：「不管啦我就是要看到他可以使用的样子，可以滑可以点啦，这样才有使用的感觉嘛」

：「......」

：「没问题，有Prototype可以处理！！」

Prototype

Figma的prototype为你的专案提供了互动性，让你在设计的过程中可以更方便的思考各元素间的互动性，点下这个按钮会发生甚麽事呢？回到上一页要点哪边呢？这样方便的功能可以让专案的使用者体验更好。

我们先进到专案里面，右边点选Prototype，就可以看到中间的设计会有一些不同

每个元件都可以被选取，被选取的元件旁边会出现一个小圈圈，这个是可以拖拉的，也就是建立物件与物件之间的连结。

以左上角选单的按钮为例，我们将他拉去右边的画面，目的是让使用者点选按钮之後，会切换成第二个画面。

可以选择要用甚麽动作触发这个画面，有拖拉跟点选之类的，这边我用点击按钮，且会有慢慢滑出的动画。

第二个画面我们让箭头符号有动作，如果整个专案的画面太多了(画面很乱主办单位管一下)，打开Option这个页面的上一个画面不一定会是Homepage，这时候就可以将prototype连到back，这样点选之後就会回到上一个画面啦~~

全部完成prototype的连结之後，点选右上角的：

就可以试着操作看看整体的效果如何罗，画面有处理prototype的元件会反蓝一下子，让使用者知道哪边是可以点击的

都处理完了就可以开放权限，让其他使用者透过网址连进来操作画面啦！

结论

到目前为止都只是稍微介绍一下工具，下一篇就是我完整的wireframe跟UI设计啦，文章当中还会有第一个礼拜的总结，跟未来可能的走向，毕竟我也是第一次实际开发Android APP，会发生甚麽事情我也不知道！直接换主题也是有可能的。

下一篇件写写打家打家摆掰。