Figma中横向滚动切换图片时同步变更左侧对应段落文本的实现方法咨询

你可以通过以下两种常用方法实现需求，新手推荐先试第一种原生方案，零代码门槛：

方法一：原生滚动触发+组件变体切换（无插件） #

• 先将右侧所有横向排列的图片打组，确认每张图片宽度一致，设置组的overflow属性为横向scroll，先测试横向滚动功能是否正常。
• 将对应每张图片的左侧段落内容，依次做成同一个组件集里的不同变体，第1个变体对应第1张图、第2个变体对应第2张图，以此类推。
• 给右侧滚动组添加「滚动到」交互触发规则，依次设置：
  • 滚动到第1张图的锚点位置时，切换左侧段落组件为第1个变体
  • 滚动到第2张图的锚点位置时，切换左侧段落组件为第2个变体
  • 剩余图片按对应关系依次完成设置即可
• 进入预览模式测试，微调滚动触发的阈值，确保滚动停止时刚好触发对应段落的切换。

方法二：变量绑定实现丝滑联动（适合需要精细效果的场景） #

• 新建一个数字类型的本地变量，命名为当前图片索引，默认值设为1。
• 给左侧段落组件的每个变体设置条件显示规则，比如当前图片索引=1时显示第1段内容，当前图片索引=2时显示第2段内容，按对应关系完成全部设置。
• 给右侧滚动组添加滚动触发交互，滚动到对应图片位置时，修改当前图片索引的值为对应序号即可。

小提示：如果图片数量较少，也可以将右侧滚动区域替换为轮播组件，用点击切换代替滚动触发，设置逻辑更简单，联动准确率也更高。

内容的提问来源于stack exchange，提问作者Wonderweis