在开始一个项目之前，我要确定几件事：
我想完成什么？
无论原型是用于用户测试还是将概念构思化，使我的想法得到传播或从测试中获得见识所需的最少工作量是多少？我不只是懒惰；），这有助于确定所需的必要交互，动画和屏幕。
您花在设计上的时间越多，您所获得的联系就越多。附件越多，您进行必要更改的可能性就越小。
让我们以上面的原型为例。
我当时在一个新项目上工作，我想探索一种基于纸牌的布局，这种布局在各州之间带有“改组”动画。我勾画出我想提出的基本想法，并将其作为起点。
如果您看一下完成的原型，则在每个步骤中只有第一张卡是可单击的。没有回退的方法，没有悬停状态，最后一个屏幕中的内容不完整，并且像素也不完美。这些都不是传达我的想法所必需的，因此我没有花时间包括他们。Framer几乎可以做任何事情，但这并不意味着您应该尝试在原型中做所有事情。
使用Andreas出色的ViewController模块创建UI流程
您可以使用ViewController Sketch插件直接在Sketch中创建UI流程。快速将您的设计变成可点击的原型，而无需编写代码。
这非常适合将您的工作介绍给利益相关者，而且非常容易做到。您可以演示交互式原型或共享托管的Framer项目URL，而不用浏览带有十几个画板或.pdf的Sketch文件。
根据我要完成的工作，我可能最终会为诸如悬停效果，动画和文本输入之类的代码编写一些代码，以增加真实感和交互性。再次，作为一名设计师，决定需要什么才能使您的想法得到传播并正确实施。
查看Andreas的“ 使用Sketch and Framer创建UI流程”一文，以了解有关该插件的更多信息。
我认为在Framer中真正流行移动原型的原因有很多，其中之一就是微交互在移动设备上似乎更为普遍。但这不是必须的！我认为作为Web的设计师可以更好地使我们的工作更具动感，而Framer确实擅长于此。
这只是我使用团队中的设计师已经完成的Sketch文件进行快速交互的一个简单示例。探索这种交互需要几分钟的时间。
当然可以，但为什么不只是编码呢？
作为前端开发人员，我的许多项目最终都将以编码原型结束。然后，我将使用此原型作为基础，将前端代码编写到产品中，并进行侧面工程设计。那么，为什么不从一开始就编写代码呢？
正如我前面提到的，速度。通过将它们从Sketch导入Framer，我可以快速充实我或其他设计师已经提出的想法。这对于设计过程的早期阶段非常有用，您可以在其中探索想法并快速实施反馈。我可以快速移动代码，但是Framer将其带入了一个新的高度。
另一个原因是自由。我用Framer编写的所有代码都将被丢弃的简单事实实际上很不错。它使我可以尝试其他我不会尝试的事情，并使我的代码更加宽松。我可以花15分钟探索一个想法，然后毫无保留地将其丢弃。
一些提示和技巧
您（或您与之合作的设计师）可能必须以不同的方式设置Sketch文件。
对图层进行分组。不在组中的图层将被忽略
避免在组名中使用空格
Sketch中的隐藏图层仍会导入，但其可见性将设置为false。
为您的画板创建简单，唯一的名称
画板末尾的减号（-）会将其排除在导入到Framer中之外
展平Sketch中任何将保持静态的图层。这将缩短项目的加载时间，在创建更高级的原型时尤其如此。您可以通过在Sketch的图层末尾添加一个星号（*）来实现。
值得花一些时间与团队中的设计师一起讨论如何设置草图文件以最适合工作流程以及最适合团队的方法。
将Sketch文件导入Framer时，您会看到类似以下内容：
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")
用$替换草图，现在您可以使用$来引用草图图层，从而使自己免于写草图一遍的次数：
$ = Framer.Importer.load("imported/design@1x")
将“普通光标”代码段用于普通鼠标指针：
document.body.style.cursor = "auto"
我将设计导入@ 2x，然后按比例缩小，因此它们特别清晰。注意，这似乎与上面提到的ViewController模块不兼容。
Sketch和Framer为Web使用不同的默认画板/设备。草图使用1440×1024，而成帧器使用1440×900。我选择1440×900。不过，不要以为您只能将高度限制为900像素，而是可以在Framer中轻松创建可滚动页面。
