ProtoPie Genie

ProtoPie Genie 是一款 Figma 插件，可通过在 Figma 原型中直接启用动态交互来提升设计质量和工作流程。借助 ProtoPie Genie，您可以快速创建交互元素、测试各种场景，并交付能够有效展示您设计的高质量原型。

概览

ProtoPie Genie 通过以下方式简化动态交互测试、加速原型交付并提升原型体验：

• 快速交付原型：将静态设计快速转换为交互式原型。

• 动态交互测试：无缝测试各种场景和交互。

• 出色的原型体验：用“有生命力”的原型打动您的团队、客户和利益相关者。

快速开始

请按照以下说明安装 ProtoPie Genie 插件。

1. 访问 Figma Community 页面。

2. 选择“Open in...”以为后续任务选择合适的文件。

3. 点击“Run”启动“ProtoPie Genie”。

或者，在 Figma 中右键，进入插件菜单并选择“ProtoPie Genie”。

主要功能

ProtoPie Genie 允许您在原型中加入多种交互元素，提升用户参与度：

• 文本输入：直接在原型中捕获用户输入并实时显示。

• 相机：集成实时相机画面，打造沉浸式交互。

• 语音：实现语音转文字和语音命令功能，带来直观的用户体验。

• 地图：轻松将可自定义地图集成到设计中。

• 网页嵌入：嵌入视频等网页内容，丰富用户体验。

添加交互元素

以下是添加文本输入、相机画面、语音交互、地图和网页嵌入等功能的步骤。

添加文本输入

将文本对象转换为可交互输入框，以模拟用户交互。

步骤：

1. 选择要转换为输入框的文本对象。

2. 点击 “Text input” 按钮设置值来源。

3. 点击 “Create interaction” 启用输入框。

4. 在输出字段区域点击 “Add” 以分配输出项。

5. 选择一个文本对象用于显示输出内容。

6. 在浏览器中预览交互效果。

添加相机画面

将实时相机画面集成到您的原型中。

步骤：

1. 为相机区域选择一个矩形形状。

2. 选择前置或后置相机视图。

3. 插入一个矩形或椭圆形状作为快门按钮。

4. 点击 ‘Create interaction’ 完成设置。

添加语音交互

将语音识别集成到您的原型中。

步骤：

1. 选择一个矩形或椭圆形状作为监听按钮。

2. 选择语音转文字的语言。

3. 指定一个文本对象用于显示转写文本。

4. 点击 ‘Create interaction’ 以实现语音交互。

添加实时地图

集成交互式地图并进行自定义设置。

步骤：

1. 为地图显示区域选择一个矩形形状。

2. 搜索并选择要在地图上显示的位置。

3. 自定义地图样式和缩放级别。

4. 点击 ‘Create interaction’ 完成地图集成。

添加网页嵌入

无缝嵌入视频和其他网页内容。

步骤：

1. 为网页嵌入选择一个矩形形状。

2. 输入以 https:// 开头的 URL。YouTube 和 Vimeo 链接将显示视频控制设置。

3. 点击 ‘Create interaction’ 添加网页嵌入。

预览交互

在 Figma 中使用 ProtoPie Genie 插件预览交互非常直接。您可以直接在浏览器或设备中预览单个或多个交互。

预览单个交互

1. 进入 “Interactions” 选项卡查看已创建交互列表。

2. 点击 “Preview” 在默认浏览器中打开所选交互。

3. 如需设备预览，点击 “Open in device” 并扫描二维码。

预览多个交互

1. 在 Figma 中于 “Prototype” 选项卡创建工作流，并按需命名。

2. 返回 ProtoPie Genie 插件 并打开 “Interactions” 选项卡。

3. 选择合适的工作流并点击 “Publish the selected flow” 以预览所有交互。

支持的 Figma 对象

ProtoPie Genie 插件支持多种 Figma 对象，包括：

• 文本

• 矩形

• 框架

• 组

• 组件

• 实例

• 布尔

• 矢量

• 椭圆

支持的 Figma 交互

ProtoPie Genie 插件在预览期间可无缝转换 Figma 的 "On Click" 和 "Navigate to" 交互，确保您全面理解设计中的交互元素。

不支持的 Figma 对象与属性

某些 Figma 对象和属性目前暂不支持：

• 不支持的对象：Star、Line、Polygon、Video。

• 不支持的属性：Visibility、Lock、Position、Size、Rotation、Opacity、Constraints、Fill（纯色和图像）、Borders、Shadow。

• 已知限制：渐变、效果（模糊、内阴影、图层效果）、对象旋转、字体问题、图像尺寸和视频支持可能存在限制。

ProtoPie Genie Player

ProtoPie Genie Player 是一款免费应用，旨在配合 Figma 的 ProtoPie Genie 插件使用。您可以在 iOS 或 Android 设备上轻松查看、体验和测试原型。可访问存储在云端的原型、将其保存到本地等——一切都可通过手机或平板完成！

借助 ProtoPie Genie Player，您现在可以在设备上实时无缝预览并交互您的 Figma 原型。

获取适用于 iOS 和 Android 设备的 ProtoPie Genie Player。