Figma 从来都不仅仅是一个设计工具。在成立之初，Figma 的初衷就是要消解想象和现实之间的差距……让所有人都能驾驭设计。 -  Dylan Field

一、实操前

基本元素

基本界面

二、实操后

「解决问题」从「意识问题」开始

好，进入正题

吐个槽先~

这里有三个槽点

掌握了基础整理规范，了解到一般公司设计和运营协作中的2大痛点

1、组件母版提供的不到位，理解头疼

解决方案：Component、Auto layout

2、批量替换基于组件模板操作

解决方案：Component、插件

Frame 、Group

你自由我自由Frame	你动我动Group
独立于子元素控制组合的边界大小，定义子元素的自动调整行为	使子元素自动适应，多个元素在一起，以便在缩放时保持跟随缩放
可以直接填充颜色 可以看右边Frame是不需要多一个Rec图层	必须借助形状图层填充
对象被组合边界大小剪切，或位于组合的边界大小之外	多个元素组合在一起，但不影响他们的可编辑性

其实真比较起来，这两没啥实质性的操作区别，因为都可以用其他属性帮助达到对方初始化达不到的效果，这个说起来就更高阶了，不会影响日常使用，所以感兴趣的可以留言询问，这里就不多做过多展开，为的其实是引入接下来的Component，所以建议搞不懂也从养成建Frame开始，快捷键F

Component

还是拿这个🌰

那么模板的基础元素就是一个「Frame 95」

这时候就可以直接点击操作界面的「Create Component」把他变成「组件母版」

问题出在哪？

我们尝试把命名换一换、把不重要的文件夹删一删

总共就是这么7个元素，直接摊开在「排行榜项这个共享文件夹」里

母组件可修改排版，子组件就会一起变换样式

通过复制粘贴多份，就可以实现子母组件的复用了

这里通过选中#image，复制外部图片粘贴一下即可

Auto layout

上面已经说了一个最简单的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 要来了，真的也很期待今年他的新功能会给我们带来什么样的惊喜 ~ 届时我也会带着新文章和大家来聊聊 ~

结语