Figma 从来都不仅仅是一个设计工具。在成立之初,Figma 的初衷就是要消解想象和现实之间的差距……让所有人都能驾驭设计。 - Dylan Field
好,进入正题
吐个槽先~
这里有三个槽点
掌握了基础整理规范,了解到一般公司设计和运营协作中的2大痛点
1、组件母版提供的不到位,理解头疼
解决方案:Component、Auto layout
2、批量替换基于组件模板操作
解决方案:Component、插件
你自由我自由Frame | 你动我动Group |
独立于子元素控制组合的边界大小,定义子元素的自动调整行为 | 使子元素自动适应,多个元素在一起,以便在缩放时保持跟随缩放 |
可以直接填充颜色 可以看右边Frame是不需要多一个Rec图层 | 必须借助形状图层填充 |
对象被组合边界大小剪切,或位于组合的边界大小之外 | 多个元素组合在一起,但不影响他们的可编辑性 |
还是拿这个🌰
那么模板的基础元素就是一个「Frame 95」
这时候就可以直接点击操作界面的「Create Component」把他变成「组件母版」
问题出在哪?
我们尝试把命名换一换、把不重要的文件夹删一删
总共就是这么7个元素,直接摊开在「排行榜项这个共享文件夹」里
母组件可修改排版,子组件就会一起变换样式
通过复制粘贴多份,就可以实现子母组件的复用了
这里通过选中#image,复制外部图片粘贴一下即可
上面已经说了一个最简单的Component(“共享文件夹”)是如何「创建」和「复用」的
我们终于要说到Figma最灵魂的功能!!!——Auto layout
那么这时候是否可以推理出
👉 疯狂点!整个Component母组件其实全是Auto layout 👈
整个组件的填充背景色是#ffffff(白色),这样就不用单独拖一个rectangle(矩形)
留个问题:红框内的22、24分别代表什么?手动实操一下,自己就能得到答案
下一步,如何把排行榜的对应数字都按顺序变更?
插件
替换图片、文案的两种方法
方法一:快捷键+组件
一个Rectangle(矩形)的6大填充类型👇
我们的需求场景中,只需要关心单色、填充图片两个类型
手动从批量表格复制,回到Figma选中#Image,Ctrl+V粘贴图片即可
重复以上步骤,50个内的批量换图需求,我认为这个方法最为快捷,甚至1000个也问题不大,因为毕竟方法二你复制到谷歌表格也需要花时间粘贴图片地址(这个具体运营同学自己评估)
另外,还需要拓展一个知识点
填充图片若是觉得SPU「视觉重心」不居中,想手动让它上下左右均分对齐一下
这时候就要引入4个「图片基于容器」显示模式的概念
此案例里,容器是rectangle(矩形),还可能是Oval(圆形),Traingle(三角形)...
1、填充,以图片的最小边,自动填充容器的最大边
2、适应,以图片的最大边,自动适应容器的最小边
3、裁切,手动调节整个图片在容器里的大小、位置
掌握了裁切,图片适应于容器,想手动让它上下左右均分对齐一下 就很简单了,动手试试吧
这个知识点,适用于有充足时间,细调节图片最终达到一个整体perfect的效果的优化项
方法二:基于插件
Batch Image Import使用插件可以批量的将图片素材导入到 Figma 文件中。
https://www.figma.com/community/plugin/1341968016541841610
从sketch传承到Figma的一个关于快捷键的好技能
Collapse All Groups
折叠所有图层和组,在设计过程中,由于操作繁复,所以经常图层和组都会各种展开,之后又由于列表过长而不得不一个一个折叠组和图层,后来发现这个按钮隐藏的比较深,那可以利用系统快捷键来一键折叠。
具体方法:F4 - 系统偏爱设置 - 键盘 - 快捷键 - 应用快捷键 - Sketch - 输入Collapse All Groups - 按下你想用的键组合
搞定!再回到Sketch里,找到比较凌乱的一个Pages,按一下刚刚设置的快捷键,有么有体验到爽感?哈哈
Figma Config 2022 给我们带来了什么?https://mp.weixin.qq.com/s/7asZa5M9zTeLD6BApEZv7Q
这篇很好的拓展了Auto layout 4.0 一些新功能给我们带来的便捷,感兴趣的朋友可以继续拓展阅读
甚至
Figma Config 2024 要来了,真的也很期待今年他的新功能会给我们带来什么样的惊喜 ~ 届时我也会带着新文章和大家来聊聊 ~