内容提要
Figma Design Kit 3.0 发布,新增十个组件及变量、插槽和尺寸选项。`<wa-dropdown-item>` 支持链接属性,`<wa-tooltip>` 修复事件问题。另有开关、选择框、输入框等多项修复,详情见更新日志。
延伸解读
Figma 设计套件 3.0 的更新重点
本次更新新增了十个组件,并补充了变量、插槽和尺寸选项,进一步缩小了 Figma 与代码库之间的差距。对于设计团队而言,这意味着在 Figma 中能更贴近实际开发组件,减少设计与实现之间的偏差。建议设计师关注新增组件的具体列表,以便在项目中及时采用。
下拉项链接功能的实际影响
wa-dropdown-item 现在支持 href、target、rel 和 download 属性,使其可以像真实链接一样工作。但需要注意,带有子菜单的项会忽略 href,且 ⌘/Ctrl 点击会在新标签页打开(Safari 除外)。开发者在使用时应考虑这些限制,避免在子菜单项上设置链接导致失效。
工具提示修复的细节
wa-tooltip 现在会尊重取消的 wa-hide 事件,保持打开状态;同时,trigger="email" 的工具提示不再因 Escape 键关闭。这些修复提升了交互的稳定性和可预测性,尤其对于依赖键盘操作或需要精确控制提示显示的场景,用户将获得更一致的体验。
Q&A
Figma Design Kit 3.0 有哪些新变化?
Figma Design Kit 3.0 新增了十个组件,并添加了额外的变量、插槽和尺寸选项,以缩小 Figma 与库之间的差距。
wa-dropdown-item 现在支持哪些链接属性?
wa-dropdown-item 现在支持 href、target、rel 和 download 属性,使其能够像真正的链接一样工作。
在 wa-dropdown-item 中,如何在新标签页打开链接?
在 wa-dropdown-item 中,按住 ⌘/Ctrl 键点击链接会在新标签页打开(Safari 除外)。
wa-tooltip 修复了哪些问题?
wa-tooltip 现在会尊重取消的 wa-hide 事件并保持打开状态,同时修复了 trigger="email" 时按 Escape 键关闭的问题。
本次更新还修复了哪些组件的问题?
本次更新还修复了 wa-switch 的焦点环、wa-select 清除按钮的点击目标、wa-input 密码切换、wa-dropdown 的 aria-posinset/aria-setsize,以及 wa-data-grid 的过滤和布局等问题。
wa-dropdown-item 的子菜单项是否支持链接?
不,带有子菜单的 wa-dropdown-item 会忽略 href 属性,因此子菜单项不支持链接。