【插件系列】02. Similayer

给大家带来一款Figma插件，Similayer (👉🏻点击直达)

Q：什么时候使用？

A：当需要多选类似属性的内容时

Q：为什么用这个插件？

A：不使用插件，我们只能通过配合ctrl/cmd，Shift等快捷键，一个一个选择/框选，费时费力❌；

借助插件，可以快速选择基于某种特性的内容，省时省力✅。

一. 插件安装

打开 👉🏻插件主页👈🏻 ，点击安装即可快速安装

二. 插件使用

1. 插件长这样

未选中任何元素，直接打开插件，是看不到任何内容的

当选择有效元素后，插件左侧会展示各种类型的属性

不同类型的元素，会对应不同的属性支持，具体不详细罗列（例如，只有选择文本，才有文本相关的属性，这个好理解） 

2. 具体使用

2.1 先选中目标元素（需要选中单个，不要多选，否则会提示错误）

2.2 选中后，会看到面板中刷新参数，例如：

2.3 选择目标元素具有的共同属性，这些属性又需要是目标组件所独有的，例如：

我的目标是选择这一组组件中，连线元素。

我会在插件中选择：

Main Component - 相同的主组件

选择后，右侧区域，会将选择的参数显示出来；同时左侧消失（即相同的参数只能选择一次）

之后点击选择图层按钮

即可看到，我需要的元素都被选中了

2.4 常用参数解释：

        2.4.1 Main Coponent：主组件

            · 当所选元素是子组件时，才会显示该参数；

            · 会选择使用同一画布中（下同）相同主组件的所有子组件。

            · 主组件如果是Variants复合组件中的一个，则只会选择母件完全相同的那些子组件，而不会选择到使用同一个Variants下母件的其它子组件

        2.4.2 Size：尺寸

            · 该参数会限定相同尺寸的元素

            · 参数可以只选择同宽，或者同高

        2.4.3 Layer Name：图层名称

            · 故名思义，会选择相同图层名字的元素；所以大家在设计过程中，养成良好的命名习惯，会减少很多烦恼

        2.4.4 Position：相对位置

            · 参数同样可以拆分成限制相对X轴，相对Y轴使用

            · 这个相对指的是在 Frame框架 中同一层级的相对位置

               

            例如：

                图中矩形1，矩形2分别在Frame1和Frame2 中，相对坐标为（0，0）；

                矩形3相对Frame3，在（10，0）坐标；

                Frame4在Frame5的相对（0，0）坐标；矩形4在Frame4中（0，0）坐标；

                Frame6在Frame7的相对（10，0）坐标；矩形5在Frame6中（0，0）坐标

            所以，当选择矩形1，选择 Position 或 x Position后，会选择如图所示【矩形4未被单独选中，是因为Frame4选中了】

        2.4.5 Absolute Position：绝对位置

            · 参数同样可以拆分使用

            · 此参数是指绝对位置，即元素在 画布 中的绝对位置

            · Absolute Position合并参数很少使用，因为一旦选中，几乎只会选择已经被选择的元素本身（除非把好多内容堆叠在相同位置）

        2.4.6 Layer Type：图层类型

            · 区分文本，普通图层，Frame框架等图层

2.5 参数往往需要组合使用，具体需要大家在使用过程中根据实际场景自行组合

            · 例如：Main Component + Absolute X/Y Position / X/Y Position

                         Layer Name + Layer Type等等

2.6 限制根Frame

            这个选项，可以将选定范围限定到一个最外层的Frame中

            注意：Variants生成的那个框，不算一个Frame

好啦，以上内容就是这么多啦，有问题可以留言交流哦～