ProdFill是一款Figma插件,可以一键插入图片和文本,避免电商设计中的重复劳动。更支持excel表格上传解析插入。配合figma的自动布局功能可以1分钟完成上百张主图的制作。插件的功能区主要分四个:插入图片、插入文本、本地图片、高级模式…
0.1插件功能讲解
Figma课件链接
wps表格单元格为中文时不能插入的问题!!!
1、Excel文件必须为UTF-8编码,建议文件格式为xls
2、还是不行用office创建表格,或者使用我的表格修改
0.2插件实战案例
一、插入图片
1.0 准备工作
・插入图片前需要在当前文件页面新建一个名为“素材”的Page,然后把产品图片都放到这里。当货号名称跟素材页面的图层名称匹配上时,就会自动插入
1.1 支持图片类型
・普通图片图层 ・图层组 ・Frame ・自动布局 ・ 组件
1.2 多个产品插入到同一容器
・不同的产品间用空格或者“+"号区分开
・案例展示:人参面霜5ml*3+人参精华5ml×2 人参水5ml
1.3 自定义插入数量
・数量使用“*”或者“×”加数字表示
・案例展示:人参面霜5ml*3+人参精华5ml×2 人参水5ml
・插件会优先匹配含有数量关系的图层,如果找不到则会把基础图层复制多份
・如果有个图层组叫做:人参面霜5ml*3,那么只会插入一次人参面霜5ml*3;否则插入3次人参面霜5ml
1.4 追加插入
・软件默认会删除容器里原来的图片,追加插入模式则不会删除原图
1.5 合并插入
・软件默认会把每行货号插入到对应的容器,合并插入模式则所有货号插入到1个容器内,这个模式下容器名称不限。
1.6 容器名称
・图片容器的名称,货号会插入到对应名称容器内
・建议以Pic开头(P大写),这样可以适配后面的高级模式
1.7 Fixed矩形图层
・每个组里都要建立矩形并命名为Fixed
・目的是为了定位,防⽌命名出错产品替换时产品对应的组消失
1.8 自定义缩放倍数
・插入的图片可以按照倍数缩放,默认为1
1.9 对齐方式
・插入的图片默认为水平垂直居中,如果需要修改,请搭配自动布局使用
二、插入文本
2.1 自定义字段
・自定义字段名称需要跟图层名称一致。作用是告诉插件我这段文字插入到哪儿
2.2 添加字段
・当一个字段不够用时,可以添加字段,理论上不限数量
三、本地图片
3.1 单产品模式
・选择本地图片,按图片名匹配节点名进行填充
例:
图片名:沙发01.jpg
矩形名:沙发01
沙发01图片就会填充到沙发01矩形里
3.2 多产品模式
・ 选择多个文件夹的父目录,按文件夹名匹配frame名,图片名匹配节点名填充
3.3 斜杠
・ 如何切图到对应的产品文件夹,可以在frame产品名后加上/
例1:懒人沙发/
例2:懒人沙发/详情/
四、高级模式
4.0 按行/列填充
・字段名在第一行选择按行填充,一般套主图的数据是按行填充
・字段名在第一列选择按列填充,一般套详情的数据是按列填充
4.1 表格上传
・自定义字段名称需要跟图层名称一致。作用是告诉插件我这段文字插入到哪儿
|
Frame
|
Pic 产品*0.8
|
Pic 赠品*1.6
|
利益点1
|
利益点2
|
价格
|
产品名称
|
Com 价格轴
|
Com 利益点
|
|
XXXX
|
XXXX
|
XXXX
|
XXXX
|
XXXX
|
XXXX
|
XXXX
|
长度=长, 颜色=红
|
行数=1行
|
|
XXXX
|
XXXX
|
XXXX
|
XXXX
|
XXXX
|
XXXX
|
XXXX
|
长度=短, 颜色=蓝
|
行数=2行
|
4.2 插入到指定画框
・如果有Frame列,则该行数据会插入到对应名称画框里。
・如果没有Frame列,所有数据按视觉顺序排序
4.3 图片插入
・字段名以Pic开头,*数字结束(可选)。则代表这个字段以图片的形式插入,*数字代表图片插入缩放的倍数。 高级模式中如果图片数据有换行,这几行图片都会插入目标容器。
4.4 文本插入
・除了系统用的几个英文名外,其他命名的字段都会当做文本图层插入。
4.5 多行数据插入到同一容器
・图片或者文本对应单元格中数据添加换行即可
4.6 组件变体切换
・字段名以Com开头,代表这是组件变体,则先获取对应的变体再插入图片跟文本。我们在批量套图时,价格轴有几个样式,软件就会先获取正确的价格轴,然后再填充数据。
4.7 重命名节点
・字段名以Name开头,代表重命名节点,可以是任何类型节点:图片、矩形、文本、Frame等
