MenuToggle Menu

ProtoPie 精灵

ProtoPie 精灵是一款 Figma 插件，通过直接在 Figma 原型中实现动态交互，提升设计质量和工作流程。使用 ProtoPie 精灵，您可以快速创建交互元素，测试不同场景，并制作出引人入胜的原型，以有效展示您的设计。

简介

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

  • 快速原型交付： 迅速将静态设计转换为交互原型。
  • 动态交互测试： 无缝测试多种场景和交互。
  • 令人印象深刻的原型体验： 让您的团队、客户和利益相关者体验栩栩如生的原型。

Getting Started

按照以下步骤安装 ProtoPie 精灵 插件：

  1. 访问 Figma 社区页面。
  2. 选择“Open in...”以选择适合您未来任务的文件。
  3. 点击“Run”启动“ProtoPie Genie”。

或者，右键点击 Figma 中的任意位置，导航到插件菜单，选择 “ProtoPie Genie”。

[object Object]

主要功能

ProtoPie 精灵 允许您在原型中集成各种交互元素，增强用户体验：

  • 文本输入： 在原型中直接捕捉用户输入并实时显示。
  • 摄像头： 集成实时摄像头视图，带来沉浸式互动体验。
  • 语音： 实现语音转文字和语音命令功能，为用户提供直观的体验。
  • 地图： 轻松将可自定义的地图嵌入到设计中。
  • 网页嵌入： 嵌入网页内容（如视频），以丰富用户体验。

添加交互元素

以下是添加特定功能（如文本输入、摄像头视图、语音互动、地图和网页嵌入）的步骤。

添加文本输入

将文本对象转换为交互式输入字段，模拟用户交互。

步骤：

  1. 选择要转换为输入字段的文本对象。
  2. 点击 “Text input” 按钮来设置值的来源。
  3. 点击 “Create interaction” 激活输入字段。
  4. 在输出字段部分点击 “Add” 以分配输出项。
  5. 选择一个文本对象来显示输出内容。
  6. 在浏览器中预览交互效果。
  1. Text input 1
  2. Text input 2

添加摄像头视图

将实时摄像头视图集成到您的原型中。

步骤：

  1. 选择一个矩形形状作为摄像头显示区域。
  2. 选择前置或后置摄像头视图。
  3. 插入一个矩形或椭圆形状作为快门按钮。
  4. 点击 “Create interaction” 完成设置。
  1. Camera 1
  2. Camera 2

添加语音交互

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

步骤：

  1. 选择一个矩形或椭圆形状作为语音监听按钮。
  2. 选择语音转文字的语言。
  3. 分配一个文本对象用于显示转录的文本。
  4. 点击 “Create interaction” 实现语音交互。
  1. Voice Interaction 1
  2. Voice Interaction 2

添加实时地图

将可自定义设置的互动地图集成到您的原型中。

步骤：

  1. 选择一个矩形形状作为地图显示区域。
  2. 搜索并选择要显示的地图位置。
  3. 自定义地图样式和缩放级别。
  4. 点击 “Create interaction” 完成地图集成。
  1. Map 1
  2. Live Maps 2

添加网页嵌入

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

步骤：

  1. 选择一个矩形形状作为网页嵌入区域。
  2. 输入以 https:// 开头的URL。YouTube和Vimeo链接将显示视频控制设置。
  3. 点击 “Create interaction” 来添加网页嵌入。
  1. Web Embed 1
  2. Web Embed 2

预览交互

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

预览单个交互

  1. 导航到 “Interactions” 标签以查看已创建的交互列表。
  2. 点击 “Preview” 以在默认浏览器中打开所选交互。
  3. 如需在设备中预览，点击 “Open in device” 并扫描二维码。

预览多个交互

  1. 在Figma的 “Prototype” 标签中创建一个工作流，并根据需要命名。
  2. 返回 ProtoPie 精灵 插件 并打开 “Interactions” 标签。
  3. 选择合适的工作流，点击 “Publish the selected flow”” 以预览所有交互。

支持的 Figma 对象

ProtoPie 精灵 插件支持多种 Figma 对象类型，包括：

  • 文本
  • 矩形
  • 框架
  • 组
  • 组件
  • 实例
  • 布尔
  • 矢量
  • 椭圆

支持的 Figma 交互

ProtoPie 精灵 插件在预览时无缝转换 “On Click” 和 “Navigate to” 等 Figma 交互，以确保能够全面理解设计中的交互元素。

不支持的 Figma 对象和属性

当前，ProtoPie 精灵 插件不支持以下 Figma 对象和属性：

  • 不支持的对象：星形、线条、多边形、视频。
  • 不支持的属性：可见性、锁定、位置、大小、旋转、不透明度、约束、填充（纯色和图像）、边框、阴影。
  • 已知限制：渐变、效果（模糊、内阴影、图层效果）、对象旋转、字体问题、图像大小调整和视频支持可能存在局限性。

ProtoPie Genie Player

在移动设备上测试原型，提供全面的交互支持，包括：

  • 手机键盘：使用手机键盘与元素进行交互。
  • 相机支持：在测试过程中使用前置和后置摄像头。
  1. Genie Player 1
  2. Genie Player 2
Back To Top