作者：Charlie Deets 、原地址
早期的设计过程中，制作Framer原型图可以表达出最终产品的模样，我发现工作中使用Framer是有好处的，因为它会促使我通过一个很实际的方法去彻底想清楚设计中的的逻辑盒流程。
构建一个原型也会让我体会到一些工程师在构建一个产品时的感受，如果很难理解Framer中的交互，这也许在设计中会有一些根本性的缺陷和含糊不清。
我构建过许多原型图，而且它们在不同的状态下往往会有很长的流程，通过预期一些后期程序中一般会出现的事件，我已经建立了一个非常迅速的方法来将设计转化为一个稳健的的原型，我打算把我的方法步骤写下来作为一种让你如何用Framer去处理原型工作流程。我确定，随着时间的推移，步骤过程会越来越快。
第一步：静态设计
我们以在Monments和Tinder中见过的可滑动堆积卡片作为案例。这些卡片可能是会喜欢或者不予考虑。任何一张卡片都能够一张列表的形式展示内容。
静态页面的设计应该非常相似的的部分，彻底的思考一些可以在Sketch中导出的状态。一旦你感觉你完全把握可能，那下一步你将要准备进行下一步。
补充：Framer现在支持导出1倍图。1倍图的设计，有利于你后期给工程师交与规格的时候会给让你变的更顺畅。
第二步： 写出动效文案
这是神器的一步。这一步节省了我许多时间，而预防了自己在后期用一种没有效率的方法去来回的寻找原因。
在纯文本中，写出该出现的原型
尝试写出人们在原型可能会使用所有的动作和动作发生后的结果。许多流程趋向于一些线性时间线，所以写出后期会出现的理想状态。你将会解决其他一些比较极端的问题。
这些纯文本逻辑会结束创建虚拟代码。这也提醒下一步，你如何创建你将要导出到Framer中的Sketch文件。创建一个非常清晰的导出文件将会节省你许多时间。
下面是我们的案例中纯文本逻辑的大概的样子：
-点击图标打开应用到主要页面
-卡片的加载
-向左滑动标记完成
-向右滑动标记喜欢
-轻触任何卡片的的打开按钮去展开
-被选中的卡片列表出现
-轻触关闭按钮离开列表视图
-在最后一张卡片中，显示完成动画
-轻触重新加载按钮去重新加载卡片
现在回到这个工作的流程中来，并写下每一次用户交互界面和反应后的页面动作：
-点击图标（用户动作）打开应用到主要页面（放大动效）
-卡片的加载（加载动效）
-向左滑动（用户动作）标记完成（取消标记）并载入剩余的卡片到新的位置（动效）
-向右滑动（用户动作）标记喜欢（喜欢动效）并载入剩余的卡片到新的位置（动效）
-轻触任何卡片（用户动作）的的打开按钮去展开（卡片全屏动效）
-被选中的卡片列表出现（表单主题放大而且退出按钮出现）
-轻触关闭（用户动作）按钮离开列表视图（表单和退出按钮放大，全屏显示卡片）
-在最后一张卡片滑动（用户动作），显示完成动画（完成动效放大）
-轻触重新加载按钮（用户动作）去重新加载卡片（加载动效）
意识到所有的视觉改变和是什么触发了这个动作是同等的重要，用户的动作将会是你的动作事件，交互界面的动作将是以最终的动效，现在尝试着去将他们全部想出来，在可以的情况下，你能够识别和建立可以重复运用其中的一个。如果你可以确定你在这里需要什么，那么所有的事情将会变得容易了。
第三步： 完整你的Sketch导出文件到Framer
在这一步中，我们将Sketch的源文件标明不同的体验验状态，并将将它转化为用来导入到Framer中一个新文件。
我习惯于根据不同体验状态在高保真的状态下是如何显示的，来将它们分层。在最后代码中，有助于我尽可能避免过多的调整图层状态，不会造成测试缓慢和产生过多的疑惑。我把大部分的图层放在它们将会出现和离开的页面。
我尝试着简洁准确地表达出我所命明的场景，通常都是和我在的纯文本逻辑相同的命名，移除空格和用camelCase代替。我所选择的名称是平淡无奇但是很明显，我就不会来回的打开我的Sketch文件，这些名称应该总能够描述元件的目的。比如，你也许只有一个按钮，是用来重新加载视觉的，但是会命名它为“重新加载按钮”而不是“按钮”。这将会很容易避免以后如果你想添加其他的按钮所造成的困惑。
确保移除Sketch文件中不会出现在原型中的图层，这将会使得查寻特定的分组变的容易起来，而且会使你的原型变的越来越真实。为了更好的性能，有时候我会在项目的最后将不需要操作的元件拼合起来，但是由于最大限度的操作自由，我不会过早的在项目中拼合它们。
第四步：导出和再使用
现在进行最有趣的一步，将Sketch文件导入到Framer中合适的分辨率。为图层添加交互内容，也就是可以拖动和滑动这些。设置不在视图中图层的初始位置，添加放大属性等等。基本上，让你的项目进入到当它被触动时候的开始的状态。
这儿有个我所排版案例的部分内容：
现在从伪代码中拿出用户的第一个动作，然后用Framer的代码语言写出来。按照列表中的顺序，用你的方式把代码写出来。根据你的经验，为了最终效果怎么样，你可能会在这一步中有点反反复复调试。在你的Sketch文件中不要害怕调整和另保存图层，如果你在这一步能够做的很好，那么这将会为你以后在Framer中的修改方便不少。
我常常会因为这些图层的位置和大小转回到Sketch文件中。我总是以2倍图将Sketc文件导入到Framer。所以我要尽量不要忘记Framer中的值要双倍的值。
第五步：调整到你想要的状态
这些仅仅是调整的事情。如果你有可以重复利用的运动曲线值和动画值，后期你在调整的时候会变的简单起来。尝试着不同的感觉，尽可能的编辑和重新导出你的Sketch文件，你也许会发现一些让你做出改变的事情。
我从制作原型中获得最大的乐趣时候就是这一步了，我发现Sketch和Framer在这一点做到了很好的结合，我喜欢在这2个软件之间来回调整，让原型更加逼真。
我通常会用Screenflick去记录我的原型想法，我喜欢这个应用是因为它能控制视频记录的分辨率和文件导出的分辨率一样。它让我可以控制我的应用用户的交互视觉。相比用Quicktime去记录，而且我发现用Screenflick去记录原型会保留更多的性能。
对许多演示，我把我的原型放在设备上，并用相机去记录交互。我一般会用Frames或者Frameless.我很喜欢Frames无需网络就可以将原型保存到本地的这个功能。在你一整天需要随意的展示你的原型的时候，这将会变的很有用。
一些建议
视频图层
如果我有视频图层，我一般会为视频将会在原型中出现的组建立个名叫“holder”的图层组，这样伪静态图层看起来会像个视频。这个好处有两个理由，我可以参考Sketch文件中的位置和大小。当我将真正的视频导入到层级当中时，我只需要简单将视频层添加在“holder”图层组的上方去处理它。
建立片段代码
随着时间的推移，你最终会养成使用Framer的方式来帮助于你的工作，能使你处理起来更快的最好的办法就是将它们做成片段代码，这样你就可以使用现成的了。很快你就会出个原型因为几乎不写任何代码，而仅仅是将东西拼起来和根据你工作和系统的逻辑去调整它们。
下面是我最喜欢的片段代码，它能够让动画慢下来，这样我就可以对动画进行微调：
// Slow down animations
Framer.Loop.delta = 1 / 240
网友评论