Framer & Sketch: An Intentional Workflow这是一篇翻译教程，作者是Charlie Deets。作者通过一个案例用5个步骤向我们说明了如何使用Sketch和Framer制作一个可交互原型。从静态设计到逻辑设计最后导入Framer进行动态设计，作者将每一步都进行详细描述，并告诉我们高效的设计流程应该是怎么样的。值得一看，无论是入门还是进一步提升！
制作Framer原型可以在早期设计阶段就传达一个产品的最终的样子。我发现使用Framer工作是很值得的因为它迫使我用一种可感知的方式思考一个设计的逻辑和流程。
建立一个原型也能帮助我对开发者建立产品所面临的事情产生共鸣。如果在Framer中很难解决一个交互，那么可能在设计中存在某种根本的缺陷或歧义。
我制作了大量的原型，他们往往是很长的流程与许多不同的状态。我已经开发了一个相当快速的系统，通过预料通常发生在后期过程中的问题将设计转为一个强大的原型。我决定把我的过程写下来，作为你如何使用framer处理一个原型工作流。我敢说，经过这次课程，它会让过程非常快。
step 1：静态设计（Static Design）
作为一个例子，我们要制作一个可滑动的堆叠卡，就像你在应用Moments和Tinder中看到的。这些卡片可以收藏或移除。任一卡片都可以打开至列表页查看内容。
静态设计过程应该是真正熟悉的过程。思考体验过程的各种状态并用sketch把它们画出来。一旦你感觉你已经很好地把握了可能性的范围你就可以准备好前进了。
提示：framer现在支持导入1x分辨率。使用1x设计，日后为工程师创建规格说明时它会使你的生活更轻松。
step 2：把它写出来（Write It Out）
这是神奇的一步。一个节省了我最多的时间，阻止我在后面的工作中来来回回地以一个低效的方式解决问题。
在纯文本中，写出原型应该做什么。
试着写出用户使用原型将会执行的所有动作和他们将会看到的结果。大多数的流程往往有一个线性的时间线，所以写出理想的状态会发生什么。稍后你将处理边缘情况。
这个纯文本逻辑将会创建伪代码。它也会通知你下一步将要导入framer的sketch文件该如何建立。建立一个真正条理分明的导入文件可以节省大量时间。
这里就是我们这个例子中的纯文本逻辑的样子：
-点击按钮打开app至主页视图
-卡片载入
-左滑卡片标记完成
-右滑卡片收藏
-在任意卡片上点击打开按钮展开
-活动卡片出现列表视图
-点击退出关闭列表视图
-在最后一张卡片上展示完成动画
-点击刷新按钮重新载入卡片
现在回顾这个流程并写下每次用户交互或由此产生的界面动作
-点击按钮（用户操作）打开主界面（缩放动画）
-卡片载入（载入动画）
-左滑卡片（用户操作）标记完成（标记动画）载入剩余卡片到新的位置（动画）
-右滑卡片（用户操作）标记收藏（星星动画）载入剩余卡片到新的位置（动画）
-点击任一卡片上的打开按钮（用户操作）卡片展开（卡片变为全屏动画）
-活动卡片出现列表视图（列表项目展开，退出按钮出现）
-点击退出按钮（用户操作）关闭列表视图（列表项和退出按钮缩小消失，卡片全屏缩放）
-滑动最后一张卡片（用户操作），显示完成动画（完成动画缩放）
-点击刷新按钮（用户操作）重新载入卡片（载入动画）
识别视图中所有视觉变化以及是什么触发了它都是很重要的。用户操作将会是你的操作事件（action events），界面行为将会是你的生成动画（resulting animations）。试着把他们都弄清楚，这样你就可以在可能的情况下识别和构建可重用的部分。如果你能确定你想要的东西，一切都会变得轻而易举。
step3：导入sketch文件编辑你的framer（Compile Your Framer Import Sketch File）
在这个步骤里，我们把原始的带有界面状态的sketch文件转化为一个新文件，我们将会把他导入到framer中。
我倾向于基于他们在视觉层次结构中的显示方式对界面状态分层放置。这可以帮助我避免在最终的编码里尽可能多的使用placeBefore或placeBehind（framer中的函数用于设置图层位置），我发现这会使调试速度更慢更令人困惑。我将大多数图层放置在他们在视图中被激活时将要驻留的位置，然后当我设置framer项目时再把他们移出视图。
在我的命名方案中我试着做到简洁准确，大多数使用我纯文本逻辑中同样的名字，删除空格并把它们写成camelCase。我选择明显具体的名称，因此我就不必来回的参照sketch文档。名称应该总是描述元素的目的。例如，你可能只有一个按钮，重新载入视图，但是把它命名为“reloadButton”而不是“button”。接下来如果你想要增加其他按钮这样做会使避免混淆从而使事情变得更简单。
确保从sketch文件中移除任何不会在原型中出现的图层。这样做可以更容易的找到特定的编组，并且增加原型真正演示的机会。有时候，在项目结束时，我将所有不需要操作的元素都展开以获得更好的展示，但是我通常避免在整个过程中过早的做这件事以获得最大灵活性。
step 4：导入和再利用（Import and Reuse）
好，现在是有趣的部分。以适当的设备分辨率导入Sketch文件至Framer。设置一些具有特殊交互属性的图层，例如拖拽（draggable）、滚动（scrollable）等等。设定不在视图中的图层的初始位置，设置一些尺寸等等。基本上你想要项目进入到你想要的初始状态。
这是一个片段示例，我如何放置这些（查看原型以获得更多）：
# define initial positions
app.appView.scale = 0
app.appView.originX = 0.361
# define draggables and scrollables
app.card1.draggable = true
app.card2.draggable = false
app.card3.draggable = false
scroll = ScrollComponent.wrap(app.cells)
scroll.scrollHorizontal = false
#define animations
cardExitLeft = (layer) ->
layer.animate
properties:
x:-750
curve:cardPull
#define conditionals
currentCard = 1
现在从伪代码中获取第一个用户动作，写入真实的Framer代码。用你的方式写下列表。在这个步骤中，你会有一些来回的尝试，来体验感觉和查看外观。别害怕在你的sketch文件中调整和重新保存图层。如果你已经做到了这一点，就很容易调整framer中的更改。
我经常重新回到sketch文件中参考元素的位置和尺寸。我经常在sketch文件中制作2倍原型的文件，所以我试着不要忘记将尺寸值乘以2。
step 5：调整到你希望的状态(Adjust Until You Reach Desired State
)
只是调整。如果有一些可复用的弹性效果和动画，那调整起来会十分简单。尝试不同的感觉。编辑sketch文件必要的时候重新导入。你会发现一些激发你做出改变的新东西。
我觉得设计原型中最有意思的就是这一步骤。这个时候我觉得framer和sketch配合的天衣无缝，我很乐意在二者之间来来回回使原型能够达到它应该达到的最佳体验。
我通常用Screenflick来记录我原型的理想流程。我喜欢它因为它能同时控制录制时的屏幕分辨率和导出时的输出f分辨率。它可以让我控制观看者看到的用户交互。我还发现它比我使用QuickTime录制时更能保持性能。
为了便于观看，我把原型放在设备上用相机记录交互过程。我倾向于使用Framers和Framerless。我喜欢Framers能够把原型离线存储在设备上。当一天中随机的展示原型时，它会变得很有用。
一些建议
视频图层
如果我有视频图层，我通常设置一个“holder”图层组，让视频在原型中出现，这是一个虚拟的静态图层看起来就像视频一样。这有2个好处，我可以参考sketch文件中dd的置和尺寸，当我置入真正的视频文件结构，我可以简单地把它放在holder图层来控制它。
建立代码片段（Snippets）
一段时间后，你最终会形成一种适合你的开发风格。为了更快你能做的最好的事情就是把这些技巧作为代码片段记录下来，让它们随时可用。在你知道它之后，你就可以很快制做原型，因为你几乎不用写任何代码，你只要把东西拼在一起然后调整逻辑就可以为你和你的系统工作了。
这是我最喜欢的代码片段，它能减慢动画这样我就可以对他们进行优化：
//slow down animations
Framer.Loop.delta = 1/240
Update:我建立了一个代码片段库。点击下载
总结
我希望这些想法能帮助你思考如何在工作流程的决策中更缜密的思考，以避免在后续的过程中产生混乱。每次使用framer制做一个原型，下次难度就会减半。所以坚持下去，这是值得的。
如果你想要更多的谈论framer或sketch或者相关的东西，可以通过Facebook或Twitter建立联系。也可以在Facebook上查看Framer JS组群，那里总有很棒的framer对话。谢谢您的阅读！
在GitHub上下载原型和sketch文件。
原文链接：https://medium.com/facebook-design/framer-sketch-an-intentional-workflow-f91ee2ee1cc1
译者：哇咔咔
