Sketch Framer 插件使用教程

Sketch Framer 插件使用教程

sketch-framer A Sketch plugin to easily export your mockups to FramerJS 项目地址: https://gitcode.com/gh_mirrors/sk/sketch-framer

1. 项目介绍

Sketch Framer 是一个开源的 Sketch 插件，用于将 Sketch.app 设计文档导出为 FramerJS 交互原型。FramerJS 是一个强大的移动应用原型设计工具，它允许设计师创建高度交互式的原型。Sketch Framer 插件简化了从 Sketch 到 Framer 的转换过程，使得设计师可以更快地构建和迭代他们的设计原型。

2. 项目快速启动

安装

1. 下载 Sketch Framer 插件代码库。
2. 从 ZIP 压缩包中提取 Export to Framer.sketchplugin、sandbox.js 和 sketch-framer-config.js 文件。
3. 在 Sketch 3 中，从菜单栏选择 Plugins > Reveal Plugins Folder...。
4. 将提取的文件放入插件文件夹中。

安装完成后，在 Sketch 的插件菜单中应该能够看到 Sketch Framer 插件。

使用

1. 创建一个分层的 Sketch 文件并保存。
2. 从插件菜单中运行 Sketch Framer 插件。
3. Framer 原型将会在 Sketch 文件保存的同一目录下生成。

3. 应用案例和最佳实践

• 不使用画板：目前插件不支持画板，请确保将所有元素直接放置在画布上。
• 避免使用符号：插件不支持符号，建议复制设计文件并删除符号，以断开符号层与符号的链接。
• 为每个组使用唯一名称：每个组在 Framer 中都会变成一个视图，使用唯一名称可以避免冲突。
• 简化复杂组：如果组中包含不需要单独导出的子组，可以在组名后添加 * 来进行合并，以提高性能。

4. 典型生态项目

目前，Sketch Framer 插件作为一个桥梁，连接了 Sketch 和 FramerJS 这两个强大的设计工具。在生态系统中，它有助于设计师快速构建原型，但以下是一些可能与之协同工作的项目类型：

• 设计到开发工具：如 Zeplin 或 Avocode，可以帮助设计师与开发者更有效地协作。
• 版本控制系统：如 Git，可以集成到设计工作流程中，跟踪设计文件的变更。
• 其他设计工具插件：如 Abstract，提供设计文件的版本控制和协作功能。

通过结合这些工具，设计师可以创建一个完整的从设计到开发的生态系统，从而提高工作效率和产品质量。

sketch-framer A Sketch plugin to easily export your mockups to FramerJS 项目地址: https://gitcode.com/gh_mirrors/sk/sketch-framer