Figma可复用悬停变色矩形组件创建需求

以下是实现需求的具体步骤，避开原型跳转的坑，直接用组件+属性修改来搞定：

• 创建基础组件

  1. 画一个矩形，设置默认灰色背景；在矩形上方添加文本图层，调好字体、颜色等样式
  2. 框选矩形和文本，右键选择「创建组件」（快捷键Ctrl+Alt+K / Cmd+Opt+K），将这组元素转成可复用组件

• 设置悬停变色效果

  1. 进入组件编辑模式（双击组件），选中内部的矩形图层
  2. 打开右侧「交互」面板（未显示则按Shift+I调出），点击「+」添加交互
  3. 触发条件选「悬停」，动作类型选「更改属性」，然后把矩形的填充色改成黄色
  4. 注意只给矩形设置交互，不要碰文本图层，确保悬停时仅修改背景，文本不受影响

• 复用组件并修改实例文本

  1. 从左侧组件库拖出组件实例到画布
  2. 双击实例里的文本直接修改内容，组件的悬停效果会完整保留
  3. 重复拖出实例，每个实例可单独修改不同文本

关键提醒 #

之前用原型设计没成功，大概率是用了页面跳转或图层替换的方式——这种方法无法支持实例修改文本。必须在组件内部给矩形设置「更改属性」的交互，所有实例都会继承该效果，同时允许单独修改文本内容。

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