Open wallleap opened 2 years ago
title: 一款好用的 Figma 数据填充插件 Google Sheets Sync date: 2022-01-06 17:16 updated: 2022-01-06 17:16 cover: //cdn.wallleap.cn/img/post/cover2.jpg category: 设计相关 tags:
本文是关于一个 Figma 数据填充插件使用教程
最近使用 Figma，发现它是真的好用啊
UI 组件化，修改主组件可以统一修改衍生的组件，变体组件（组件集）的使用能很方便切换样式……
Figma 社区提供了很多插件、使用教程、案例等
这次分享的是插件 Google Sheets Sync，插件的官方文档在这，条理挺清晰的
What can this plugin do? Change the content in your Text layers Download and set image backgrounds from URLs Swap out Components for specific instances (including Variants) Change colours of your layers Plus lots more...
What can this plugin do?
这个插件可以：填充文本、图片(通过图片链接下载填充)、属性值、颜色等，可以让某图层显示或者隐藏，甚至直接填充组件/组件集
唯一的缺点是需要科学上网
这个缺点已经解决了，现在支持本地导入表格
科学上网之后注册/登录谷歌账号，进入表格创建页，点击添加空白表格
接下来可以直接复制别人的数据，我是复制的UP主草帽sMao这个视频简介里的：
https://docs.google.com/spreadsheets/d/1t23BAon8spOILyH49A_htAPDAJ03Hfw5ZUgiqHdOkU0/edit?usp=sharing
或者使用后羿采集器进行数据的采集
表格主要格式是：
第一行为标题，下面的是数据，每列不要有空格
点击右上角的共享
链接默认是受限的，我们需要点击更改权限
之后点击复制链接即可
点击链接https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync，点击安装
如下显示安装成功，再次点击可以卸载
我们先使用最简单的文本填充功能和图片填充
新建设计文件，按照下方格式绘制，并且创建组件
这里需要填充的图层重命名为#标题栏中一项名字（这样的是按顺序的）、#标题.x（这样是随机的）
#标题栏中一项名字
#标题.x
按 Alt + 鼠标拖动复制出一个，接着按快捷键 Ctrl + d 复制其他的
可以选中需要填充的，右击 → plugins → Google Sheets Sync
将刚刚获取到的链接粘贴到第一个文本框，下面可以选择
当前选中的
当前页面
整个设计文件
我们选择选中的就行
之后点击 Fetch & Sync 即可
稍等一会之后就能填充好数据了
以后更新可以直接点击右边的 Re-sync……了
基本使用就是这样：
获取表格分享链接，注意权限问题
命名图层，以 # 号开头（还有进阶操作）
#
运行插件，输入分享链接获取并同步
修改数据或者图层名字之后可以直接再次同步
首先准备一些组件
Alt + 鼠标左键长按拖动任一组件进行复制
修改表格数据，组件填入组件名，组件集则填入响应的文本
选中这些组件/组件集，Ctrl + R 重命名为 #Component
#Component
重新同步一下表格数据
同步完成（仅作展示）
使用方式是#属性值，如果前面有了填充的名字的话，使用空格分割#文本 空格 #属性值 ，eg：#mail.x #color
#属性值
#文本 空格 #属性值
#mail.x #color
注意： 如果您的图层是 Text Layer（文字）或 Component Instance layer（里面包含文字），那么您需要在 Google Sheets 中的 Value 前面加上/以便插件知道您指定的是特殊数据类型（而不是内容或组件名称）—— 对于所有其他图层类型，您无需执行此操作。
注意：
如果您的图层是 Text Layer（文字）或 Component Instance layer（里面包含文字），那么您需要在 Google Sheets 中的 Value 前面加上/以便插件知道您指定的是特殊数据类型（而不是内容或组件名称）—— 对于所有其他图层类型，您无需执行此操作。
Text Layer
Component Instance layer
/
表格中数据值为 show 或者 hide，如果是文本的话，值为 /show 或 /hide
show
hide
/show
/hide
示例：
表格中添加一列 display 或 show，值随机填充为 /show 或 /hide
display
在之前的界面中添加一个圆与文字，表示在线状态，并且修改这个 Frame 名字为 #show.x
#show.x
同步一下表格，可以看到有些有显示，部分没有显示
可以改变图层的颜色，表格中值只能是以 # 开头的16进制的 Hex 颜色值，如果图层为文字，需要加上 /
像上图这种文字颜色和头像框颜色修改的，都是可以实现的（头像边框最方便的实现方式是加描边，但是这个插件只能是填充颜色）
在表格中添加 gender_color 列，数据使用公式 If(gender_cn列中的相同行格="男", "/#2aa1f7", "/#f4bfcf")，当 gender_cn 列中的值为男时，填充蓝色，否则填充粉色（值使用 / 是因为需要填充的有文字）
gender_color
If(gender_cn列中的相同行格="男", "/#2aa1f7", "/#f4bfcf")
gender_cn
在头像下面新建一个圆形，命名为 #gender_color，性别后的文字图层重命名为 #gender_cn #gender_color（但是由于头像、名字用了随机值的方式，性别和头像、名字会匹配不上）
#gender_color
#gender_cn #gender_color
这样就 OK 了
如果值以 % 结尾，则获取到时会修改图层不透明度
%
现在我们修改头像后面那个圆图层的不透明度，在 1% - 99% 之间取随机值
1%
99%
在表格中添加一列 opacity，使用公式 =RANDBETWEEN(1,99)% 填充
opacity
=RANDBETWEEN(1,99)%
注意需要修改格式 → 数字 → 百分比
接着在更多样式里把小数点后两位去除
在图层名后加上 opacity.x
opacity.x
更新一下即可
值的格式为数字+以下三个字母之一
数字+以下三个字母之一
s
32s
w
43w
h
54h
在表格中填入数据
数字的公式：RANDBETWEEN(111,999)，随机生成三位数字
RANDBETWEEN(111,999)
后面的三列分别填充 s、w、h
三列需要使用的分别命名为 size_s、size_w、size_h，公式是 =数字列&字母列
size_s
size_w
size_h
=数字列&字母列
Figma 中绘制如下形状，红蓝矩形大小大于 1000px，蓝色中的小画框名字为 #size_s.x，红色中的小画框命名为 #size_w.x #size_h.x
#size_s.x
#size_w.x #size_h.x
同步一下
数字x
数字y
数字xx
数字yy
和上面方式相同，拼接出位置的数据
画框中，将红蓝色中的小矩形固定一下长宽，并且放置到红蓝画框的左上角，命名如下
我们先在插件中 Fetch 一下数据，可以看到都是 312
接着同步一下，使用矩形量一下
可以发现，蓝色下的是相对于页面原点的偏移，不是相对于父元素蓝色画框；而红色下的矩形是相对于父元素红色画框原点的偏移
表格中的值以 ° 结尾的话，会以该数值进行图层旋转
°
font-size:数值
font-size:12
text-align:left
text-align:right
text-align:center
text-align:justified
text-align-vertical:top
text-align-vertical:center
text-align-vertical:bottom
line-height:auto
line-height:30
line-height:150%
letter-spacing:12
letter-spacing:200%
所有能包裹的（page、Frame、Group）的图层名加上空格//空格工作表名，eg：Page1 // Data2
空格//空格工作表名
Page1 // Data2
title: 一款好用的 Figma 数据填充插件 Google Sheets Sync date: 2022-01-06 17:16 updated: 2022-01-06 17:16 cover: //cdn.wallleap.cn/img/post/cover2.jpg category: 设计相关 tags:
UI description: 一款好用的 Figma 数据填充插件 Google Sheets Sync
本文是关于一个 Figma 数据填充插件使用教程
一、前言
最近使用 Figma，发现它是真的好用啊
UI 组件化，修改主组件可以统一修改衍生的组件，变体组件（组件集）的使用能很方便切换样式……
Figma 社区提供了很多插件、使用教程、案例等
这次分享的是插件 Google Sheets Sync，插件的官方文档在这，条理挺清晰的
这个插件可以：填充文本、图片(通过图片链接下载填充)、属性值、颜色等，可以让某图层显示或者隐藏，甚至直接填充组件/组件集
唯一的缺点是需要科学上网这个缺点已经解决了，现在支持本地导入表格
二、基本使用
1、谷歌表格写入数据
科学上网之后注册/登录谷歌账号，进入表格创建页，点击添加空白表格
接下来可以直接复制别人的数据，我是复制的UP主草帽sMao这个视频简介里的：
或者使用后羿采集器进行数据的采集
表格主要格式是：
第一行为标题，下面的是数据，每列不要有空格
2、获取谷歌表格分享链接
点击右上角的共享
链接默认是受限的，我们需要点击更改权限
之后点击复制链接即可
3、安装Google Sheets Sync插件
点击链接https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync，点击安装
如下显示安装成功，再次点击可以卸载
4、使用 Google Sheets Sync 插件
我们先使用最简单的文本填充功能和图片填充
新建设计文件，按照下方格式绘制，并且创建组件
这里需要填充的图层重命名为
#标题栏中一项名字（这样的是按顺序的）、#标题.x（这样是随机的）按 Alt + 鼠标拖动复制出一个，接着按快捷键 Ctrl + d 复制其他的
可以选中需要填充的，右击 → plugins → Google Sheets Sync
将刚刚获取到的链接粘贴到第一个文本框，下面可以选择
当前选中的
当前页面
整个设计文件
我们选择选中的就行
之后点击 Fetch & Sync 即可
稍等一会之后就能填充好数据了
以后更新可以直接点击右边的 Re-sync……了
基本使用就是这样：
获取表格分享链接，注意权限问题
命名图层，以
#号开头（还有进阶操作）运行插件，输入分享链接获取并同步
修改数据或者图层名字之后可以直接再次同步
三、进阶操作
1、组件、组件集填充
首先准备一些组件
Alt + 鼠标左键长按拖动任一组件进行复制
修改表格数据，组件填入组件名，组件集则填入响应的文本
选中这些组件/组件集，Ctrl + R 重命名为
#Component重新同步一下表格数据
同步完成（仅作展示）
2、属性样式填充
使用方式是
#属性值，如果前面有了填充的名字的话，使用空格分割#文本 空格 #属性值，eg：#mail.x #color图层显示
表格中数据值为
show或者hide，如果是文本的话，值为/show或/hide示例：
表格中添加一列
display或show，值随机填充为/show或/hide在之前的界面中添加一个圆与文字，表示在线状态，并且修改这个 Frame 名字为
#show.x同步一下表格，可以看到有些有显示，部分没有显示
填充颜色
可以改变图层的颜色，表格中值只能是以
#开头的16进制的 Hex 颜色值，如果图层为文字，需要加上/像上图这种文字颜色和头像框颜色修改的，都是可以实现的（头像边框最方便的实现方式是加描边，但是这个插件只能是填充颜色）
在表格中添加
gender_color列，数据使用公式If(gender_cn列中的相同行格="男", "/#2aa1f7", "/#f4bfcf")，当gender_cn列中的值为男时，填充蓝色，否则填充粉色（值使用/是因为需要填充的有文字）在头像下面新建一个圆形，命名为
#gender_color，性别后的文字图层重命名为#gender_cn #gender_color（但是由于头像、名字用了随机值的方式，性别和头像、名字会匹配不上）这样就 OK 了
图层不透明度
如果值以
%结尾，则获取到时会修改图层不透明度现在我们修改头像后面那个圆图层的不透明度，在
1%-99%之间取随机值在表格中添加一列
opacity，使用公式=RANDBETWEEN(1,99)%填充注意需要修改格式 → 数字 → 百分比
接着在更多样式里把小数点后两位去除
在图层名后加上
opacity.x更新一下即可
尺寸大小
值的格式为
数字+以下三个字母之一s：设定图层的宽高为前面的数字32s是同时设置宽高为 32pxw：设定图层的宽度为数字43w代表将图层的宽设置为 43pxh：设定图层的高度为数字54h表示将图层的搞设置为 54px在表格中填入数据
数字的公式：
RANDBETWEEN(111,999)，随机生成三位数字后面的三列分别填充
s、w、h三列需要使用的分别命名为
size_s、size_w、size_h，公式是=数字列&字母列Figma 中绘制如下形状，红蓝矩形大小大于 1000px，蓝色中的小画框名字为
#size_s.x，红色中的小画框命名为#size_w.x #size_h.x同步一下
位置
数字x：该图层相对于父元素向右偏移数字 px数字y：该图层相对于父元素向下偏移数字 px数字xx：该图层在页面中 x 轴的位置为数字 px数字yy：该图层在页面中 y 轴的位置为数字 px和上面方式相同，拼接出位置的数据
画框中，将红蓝色中的小矩形固定一下长宽，并且放置到红蓝画框的左上角，命名如下
我们先在插件中 Fetch 一下数据，可以看到都是 312
接着同步一下，使用矩形量一下
可以发现，蓝色下的是相对于页面原点的偏移，不是相对于父元素蓝色画框；而红色下的矩形是相对于父元素红色画框原点的偏移
角度
表格中的值以
°结尾的话，会以该数值进行图层旋转文本相关
font-size:数值，例如font-size:12text-align:lefttext-align:righttext-align:centertext-align:justifiedtext-align-vertical:toptext-align-vertical:centertext-align-vertical:bottomline-height:autoline-height:30line-height:150%letter-spacing:12letter-spacing:200%3、调用表格中其他工作表
所有能包裹的（page、Frame、Group）的图层名加上
空格//空格工作表名，eg：Page1 // Data2