在 Figma 中实现UI文本一键切换

原理是很简单的,基本上只有两个步骤要做。

准备工作

Google Sheets Sync

Figma plugin:Google Sheets Syncfigma

插件的图片|600

插件的作用

可以将 Google sheet 中的数据按照命名规则自动同步填充到对应的文本图层中。在一些需要填充数据的场景中(例如表格、卡片),能大幅提升工作效率。

数据同步

填入 Google sheet sync 插件填入同步链接,选择同步范围即可。

Googlesheet插件同步到figma的选项截图示例|600

获取 google sheet 同步链接

Googlesheet分享链接的截图示例|600


这里需要注意的是,同步链接需要是任何人都可以访问的权限设置。

figmaUI组件示例图片|600
figma 文件,按照数据表的结构对应设置需要同步的文本图层


示例表格的图片|600
一张 Google sheet 的数据表
Googlesheet同步前的figma设计图|600
未同步前👆
Googlesheet同步后的figma设计图|600
同步完成后👆

其他功能

其实这个插件不只是同步文本信息,还可以填入一个图片链接,会自动填充到设定的图层中。更详细的使用文档,可以查看他们的 官方示例文档