原型工具 - Origami 自定义组件(components)

前段时间研究了下origami 自定义组件（component），做好以后就和官方自带的一样，输入输出都可自定义，可以加入Library，方便团队直接调用。现整理出来给自己存个档。

先上例图，右上角那个超级简单的下拉菜单就是这次的主角

example.gif

Origami的自定义组件分两大类，Patch Components 和 Layer Components，其中 Patch Components 不能包含对象（Layer），但是 Layer Components 可以包含 Patch块。所以对于交互做prototype来说，常用的自定义组件是 Layer Components 。

其实制作过程很简单，官方文档写的比较简单，一些小细节需要自己琢磨。

Step 1
从sketch把相关图层拷到origami里, 在Menu 图层组上右键，点击Create Component，就创建好一个“空”的组件。再右键，Enter component，在component 里搭建menu的动效和交互逻辑。

Tips：1. 不要选中patch 然后create component，这样创建出来的是patch component，不包含图层对象/属性。

2. 先做逻辑再创建Layer component，部分Patch会错位，所以一定要先 Create component 再做逻辑
   Menu Layer

Step 2
用Loop 创建下拉菜单的文字内容和给文字定位，展开收起的动效很简单不展开讲了。
接下来，设置自定义文字菜单，即这个组件菜单的文字内容可以在使用过程随意更改（保证组件的灵活性，否则组件就失去了灵魂）。
然后左上角返回到主界面，退出Component，在刚才创建的Menu component上右键，点Component info，点击左侧 Add Input，按需填写，Type 选Text。Menu 文字每一行都需要单独建一个Input，所以在Port Category上填了一个Menu Text，在右侧属性面板上给刚才创建的Input分一个组，方便后面使用。
再添加一个 Color，Type 选 color（数据类型不能错），方便在深色或浅色页面上切换颜色。

下拉菜单的Input
Tip：如果需要传入的是loop值，Type需要选择Layer，否则数据传不进去。

Step 3
回到Component 里，刚才创建的Input 会以patch的形式出现在component里，如果没看到，把“画布”缩小，上下找一找，有时候默认飘的比较远。
然后把Input的Text 和Loop 连上，color连到相应的patch上。效果如图：

自定义input

Step 4
现在需要把点击Menu 文本得到的动作传到组件外，让组件外的页面配合响应所点的Menu内容，即做Output部分。
和Input一样，回到主页面，右键Menu Component，点击Component Info，Add Output。因为菜单文本只有选中（点击）和未选中两种情况，所以Type是Boolean值。每行文本都需要创建一个Output。
回到主页面，点击Menu Component 图层左侧的 touch，下拉里就出现刚才创建的output了。

Output部分

Step 5
在touch里点刚才创建的output，patch就出现在“画布”里了，把它连上相对应的页面，或者动效就可以了。

Output

Step 6
Add to User Library，以后就可以直接拿来用了，如果Library 在team 服务器上，team也可以直接用。