Sketch Framer：将静态设计转化为交互原型的利器

Sketch Framer：将静态设计转化为交互原型的利器

Sketch Framer 是一个为Sketch.app设计的插件，它使得设计师能够无缝地将他们的设计作品导出到FramerJS，进而创建富有互动性的原型。尽管这个项目目前不再维护，但其遗留的代码和文档仍然对那些希望理解如何将Sketch与Framer结合使用的开发者有所启发。

Sketch Framer 的工作原理

Sketch Framer利用Sketch的插件系统，将你的设计文件转换成FramerJS可以识别并处理的代码结构。这包括将每个图层和组转换为Framer的视图（views），并将它们组织起来以模拟真实的界面交互。

使用Sketch 3的支持

请注意，该插件适用于Sketch Beta版，因为App Store版本受到沙盒限制。在Sketch 3中，虽然有一些局限性，如不支持Artboards和Symbols，但你可以通过一些技巧来适应，例如将元素直接放在画布上，并使用顶级组进行组织。

安装和使用

1. 下载源码包。
2. 把 Export to Framer.sketchplugin，sandbox.js 和 sketch-framer-config.js 文件拷贝到Sketch的插件目录。
3. 在Sketch的菜单栏选择 Plugins > Export to Framer。

完成以上步骤后，只需在Sketch中创建好你的设计，运行插件，Framer原型就会在原Sketch文件同目录下自动生成。

特点和技巧

• 特殊操作: 可以通过命名约定来控制图层的行为，如添加 * 来扁平化群组，或者添加 + 让形状或文本层作为独立视图。
• 配置选项: 通过修改 sketch-framer-config.js 文件，你可以自定义导出的HTML和JavaScript代码，导入库文件，实现更灵活的设置。
• 问题解决: 知道一些已知的bug可以帮助避免不必要的困扰，比如复杂的文件可能导致崩溃，非矩形遮罩可能不起作用等。

社区参与与帮助

虽然项目不再更新，但你仍可以从社区获取帮助或分享经验。有问题时，可以通过Twitter联系@bomberstudios 或者 @gem_ray。

总体而言，Sketch Framer是将设计快速转化成可交互原型的强大工具，尤其适合熟悉Sketch和Framer的设计师。尽管已停止维护，但它仍然是学习Sketch和Framer集成的一个宝贵资源。如果你还在寻找一种方式将你的设计变为动态的交互体验，不妨尝试一下Sketch Framer。