emengweb
警告：与任何测试版程序一样，此功能仍在开发中。
你可以期待：
- 较大文件的原型加载时间较慢
- 在正式发布之前更改、添加或删除的功能
- 展示原型时的自动布局限制
- 展示原型时的观察视图限制
为了最大限度地降低风险，我们建议在测试版之前不要为关键项目使用交互式组件。
阅读更多关于交互组件测试版↓
关于交互式组件
交互式组件允许您在组件集中的变体之间创建原型交互。任何时候您向设计添加实例时，这些交互都已设置并准备就绪。这可以节省您创建原型的时间并防止不必要的面条汤。
- 创建可在变体之间自动切换的交互元素，例如从悬停状态变为按下状态的按钮。
- 在组件级别设置默认交互，并在构建原型时消除猜测。
- 减少原型输入字段所需的框架和连接数量，例如一组复选框或切换。
注意：交互式组件是变体的扩展。如果您没有设置要使用的组件，则需要先创建一个。了解如何创建和使用变体 →
前
在下面的示例中，我们为具有三个复选框的原型添加了所有可能的连接。我们已经将同一帧复制了八次，它们之间总共有 24 个连接，以创建所有可能的组合。
后
对于交互式组件，我们只需要在我们的设计中添加一个复选框实例，它的变体交互就可以开始了。当我们查看原型时，Figma 会自动在选中和未选中的变体之间切换。
创建交互式组件
您只能使用来自同一组件集的变体来创建交互式组件。如果您没有设置要使用的组件，则需要先创建一个。了解如何创建变体 →
创建变体交互
交互式组件引入了一个新的原型操作：更改为.
- 从组件集中选择交互的起始变体。
- 导航到右侧边栏的原型选项卡。
- 点击 在框架的边界框右侧，将其拖动到目标变体。您也可以点击在原型面板的交互部分，将操作设置为更改为，然后使用下拉菜单选择目标变体。
- 建立连接后，使用交互详细信息面板调整触发器和操作。
注意： “更改为”操作只能用于组件集中的变体。无法在两个单独的组件或顶级框架之间使用此操作。
使用交互式组件
像任何其他组件一样，将交互式组件的实例添加到您的设计中。唯一的区别是实例已经将交互应用于原型设计。
要使用交互式组件：
- 将交互式组件的实例添加到设计中的框架中。
- 当您准备好对设计进行原型设计时，导航到右侧边栏的原型选项卡。
- 构建您的原型。
- 在 Presentation View 中预览设计和交互。
添加更多交互
当您使用交互式组件构建原型时，您可以在变体交互之上添加常规交互。
在下面的示例中，我们在具有延迟的变体交互之上添加了一个带有点击触发器的交互。
交互顺序将取决于您使用的触发器是否与变体交互相同。了解有关原型触发器的更多信息 →
相同的触发器
当两个交互使用相同的触发器时，Figma 将使用原型交互并忽略变体交互。
例如：
- 切换开关在其组件集中的On和Off变体之间具有
On click→Change to变体交互。 - 您将一个
On click→Navigate to交互从切换开关添加到另一个框架。
当用户点击切换开关时，Figma 将导航到下一帧。
不同的触发器
当您添加具有不同触发器的交互时，Figma 将同时播放交互和变体交互。
例如：
- 按钮在默认变体和悬停变体之间具有
On hover→Change to变体交互。 - 在构建原型时添加
On click→Navigate to交互。
FIGMA将Change to在悬停的变种hover，然后Navigate to下一帧On click。
查看互动
使用交互组件时，您将在右侧边栏的原型选项卡中看到交互和变体交互的单独部分。
- 使用交互部分创建原型交互和动画
- 使用变体交互部分查看变体交互的详细信息
注意： 交互式组件不支持呈现原型时的观察模式，但我们正在努力！
编辑变体交互
从主要组件添加和编辑变体交互。无法从实例编辑变体交互。
要从实例访问组件集并进行编辑：
- 选择实例。
- 点击 在右侧边栏的“实例”部分。
- 选择转到主要组件。
- 导航到右侧边栏的原型选项卡。
- 对变体交互进行编辑。
关于交互式组件测试版
注册交互式组件测试版
- 测试版对所有 Figma 用户开放，无论团队或计划如何。
- 使用与您的 Figma 帐户关联的电子邮件地址请求访问交互式组件测试版。
- Figma 的目标是在三个工作日内添加那些请求访问测试版的人。为您的帐户启用交互式组件后，将向与您的帐户关联的电子邮件地址发送一封确认电子邮件。
- 在此 Beta 版期间，您始终可以关闭文件中的交互式组件以缩短原型加载时间。如果您想完全退出测试版，请发送电子邮件至[email protected]。
提供反馈并获得帮助
您在测试版期间提供给我们的反馈对于确保我们在向所有人发布交互式组件之前修复任何问题并改善体验至关重要。
访问专门的支持论坛频道，提出问题、报告错误、提供反馈并与其他测试版用户讨论交互式组件。
与交互式组件共享文件
- 任何
can edit有权访问文件的人都可以查看和编辑交互式组件的变体交互，即使他们不是测试版的一部分。您必须处于测试阶段才能创建新的变体交互。 - 任何
can edit可以访问文件的测试版成员都可以在展示原型时关闭和打开交互组件↓。这有助于防止交互式组件出现任何性能问题。
为文件关闭或打开交互式组件
在 Beta 版期间，您可以关闭特定文件的交互组件以缩短原型加载时间。这样做：
- 从画布或图层面板中选择一个交互式组件。
- 导航到右侧边栏中的原型选项卡。
- 在交互式组件测试版部分，选中启用交互式组件选项。
Figma 社区中的交互式组件
- Beta 版的任何成员都可以将带有交互式组件的文件发布到 Figma 社区。
- 如果您不是测试版的一部分，您仍然可以使用交互式组件复制 Figma 社区文件，但该功能将被关闭。您仍然可以查看和编辑文件中的变体交互，但您无法创建新的交互组件或在展示原型时查看它们。