figma 通过api设置属性变量

这节课呢，我们主要学习属性栏，属性栏呢，我们会分成上下两集进行学习，上集呢，我们主要会去学习对其分布坐标以及图层的相关设置。 首先呢，我们来去学习属性栏的上半部分，我们选中矩形之后呢，可以在这边看到他的对齐系统，这都是我们非常熟悉的对齐命令。而平均分布的话呢，则是你要框选至少两个图形以上， 框住之后呢，在这边就可以看到他的垂直间距均分，水平间距均分。那我们真正去做项目的时候呢，其实更多情况下用的是整理功能， 因为这个整理功能呢非常的方便，你比如说呢，我现在把他们的间距啊，哎，调整一下框，选三个造型，框住之后呢，鼠标只需要放进去就可以看到呢，在右下角出现了一个图标，单击一次间距就已经一样了， 间距一样之后呢，我们再给他来一个居中对齐，这样就解决了这个问题啊，我们可以通过点击中间的数值呢，快速的去调节他们的这个间距就行了。 而顶部对齐的话呢，你就直接点击顶部对齐就行。那么值得一提的是呢，贝克玛呢，为每一个方向的这个对齐呢，都添加了对应的快捷， 比方说左对齐是 out 建加 a， 那么右对齐呢，是 out 建加 d， 上对齐， out 建加答， 下对起是 ous 键加 s 啊，他每一个都是分配了专门的快线，那么两个句中对起水平居中是 ous 键加 h， 垂直剧中是 out 建加微。把这一块建熟练了之后呢，他可以啊，更加快速的去提升我们的一个对齐效率，比如说我现在让他底对齐，我们只需要按住 out 建加 s 就可以快速的进行底部对齐 啊，这边就是对齐和平均分布的相关设置，我们选中一个矩形之后呢，下面这个区域的话，分别显示的是他对应的 x 轴和 y 轴的坐标系统， 那 w 的话呢，指的是宽度， h 这边指的是高度，可以按住 os 键快速的去调节大小。后面的这把锁呢，主要的功能呢是用 来约束比例进行使用的。那在输入框中的话呢，他也可以当做一个计算器，一个小型计算器进行使用，我们可以输入呢，比如说一百加上二十，再减去五十等于七十啊，他可以帮助我们呢去做一些这种运算操作。 下方的这个按钮的话呢，他主要控制我们的一个物体的一个旋转角度，对吧？当你按住二字键拖动时，他会从我们左边哎再滑动过来，你可以这样一直给他进行拖动就可以了。 而右边这里的话呢，控制的是我们选中造型的圆角半径。之前我们是用移动工具点击小白点，这样去对他进行拖动，按住 out 键就可以单独对他进行移动啊，那其实我们调整的就是这个区域啊，你可以点击后面 小图标开启独立圆角属性，在独立圆角属性中，这样也可以对他进行调节。那你说我点的时候，我怎么知道谁是谁呢？当你去选中某个数字时，注意他前面的图标会发生变化， 比如说现在点的是第三个，那这里的话呢，很明显他就告诉我，你现在选中的三十五是右下角的圆角，哎，那这时候呢，我们就可以按住 out 键给他进行拖动，那就结束了啊， 那后面呢还有三个点，这三个点是干什么用的啊？叫平滑圆角，哎，那什么叫平滑圆角呢？平滑圆角的话，你看我先把他的圆角呢再稍微大一点点， 再点开它。点开之后呢，飞哥马呢是专门为这个 ios 啊，因为 ios 的圆角呢比较特殊， 他是专门为这个 rs 呢做了这么一个功能，当你呢去拖动到这个 rs 的时候，哎，就是符合 ios 那个圆角的那个规范的，所以他是专门为 rs 做了这么一个功能啊，在这边藏着呢啊， 那这就是我们的对齐分布以及常规的这个界面显示。在进行操作的时候呢，我们还会遇到一些这个需求啊，比方说呢，我们会把这个物体打进翻转， 因为他这里面他没有这个翻转，他没有把翻转的直接放到这边来啊，我们可以通过快捷键的方式给他打开这个翻转属性。 那翻转的话呢，是 shf 键加微， shif 键加微呢？是垂直反转 shift 键加微啊，然后 shift 键加 h， shift 键加 h 呢是水平翻转， 我们在右键右键的下方水平翻转和垂直翻转中也可以去找到他。 我们来汇总一下这部分所涉及到的一些快捷键。首先呢是各种对齐啊，顶对齐，底对齐，左对齐以及右对齐，他对应的就是我们 w、 a、 a、 s、 d 这四个快捷键。 那水平居中对齐和垂直居中对齐的话呢，分别是 out 键加 h 和 out 键加微，水平翻转 sif 键加 h， 垂直翻转 sif 键加微。 清楚了基本参数之后呢，接下来我们来去学习一下他图层的概念，其实图层的这个概念呢，和 ps 的这个混合模式是非常像的，你点进去之后的话呢，里面有备案，正片叠底，绿色叠加，这都是我们之前非常 熟悉的这个相关秘密。那好了，你比如说呢，我想让这个光来，让这个光呢出现在这个文字身上，我就可以把它先放上去， 放上去之后呢将他的混合模式改成绿色模式，这样呢他就可以过滤掉整张图的一个暗色，去保留亮色范围，这样一个光效文字呢也就做好了。 那如果说你各位在做的时候呢，发现顺序不对，就图层顺序不对的话呢，我们可以给他调整图层顺序， 调整图层顺序的快捷键呢，和我们之前所学习的一些软件的快捷键呢是一样的啊，上移就是 ctrl 键加右中号键，下一是 ctrl 键加左中号键，一到顶层和一到底层分别加上一个 shif 键就可以。而第二张图片的话呢，我们会观察到 它是个白色背景，那白色背景的话呢，我们就可以在混合模式中将它的模式呢修改为正片叠底模式， 改成正面叠叠之后，那他的白色的区域就隐藏掉了，哎，这样的话呢，就感觉好像是个透明的，对吧？但其实呢并不是啊，他只是通过正片叠叠属性把这种暗色呢给他进行过滤就行了。 而其他颜色模式的话呢，各位可以在实际工作项目中呢，根据自己的需要呢进行调节就行。后方这里呢是控制他的一个透明度，让他比如说消失一点，或者说明显一点，小眼睛的功能呢？是隐藏和显示，是干这个事情去进行使用的， 那么这个呢？就是关于我们图层的这个使用了。

这节课呢，我们来学习文字工具， 那么其实说起文字工具呢，除了会想到一些基础的设置啊，比如说像字体字，重字号字的颜色，字间距，行距这些常规属性之外呢，飞个马还可以带来我们怎样的惊喜，就让我们呢一起来拭目以待。 我们首先呢去学习一下关于文字工具的输入方式，输入方式呢一共有两种，我们先看到上方工具栏中的文字工具快捷键呢是 t， 哪两种呢？第一种输入方式是呢直接在画面上进行单击，单击之后输入我们想要的数据 就可以了，那么这种方式很适合字数比较少的这种方式啊。第二种输入方式是选中文字工具之后呢，在画面上单击拖拽，拖拽出一个文本框， 那么用这种方式输入的话呢，他就可以让我们大量的文字给他限制在这个范围以内，哎，那他就更适合去输入一些段落文本进行使用，这就是关于文字的两种输入方式， 那输入成功之后，我们来看一下他的一些基础的设置啊，我们先看第一行字，选中文字之后呢，在右下角文本属性中， 这一行它的功能呢是用来呢去查看我们的一些字体，那这里要注意呢，我们电脑上的一些中文字体，在 figma 软件里面，它显示的 实际上呢都会变成英文的，那这边其实都是英文的啊，并不是说你的中文字体没有显示在里面已经是成功的，只是说他现在在里面显示的是这种英文字啊，像我现在选择的这一款呢，就是四元黑体， 那有没有办法更好的去协助我们去换字体呢？答案当然是有的啊，我们需要呢去安装一些插件，比如说我现在啊一个叫字体插件， 在字体插件里面的话呢，他就把我们电脑上的一些这种中文字体呢，已经进行了表示， 这样的话呢，我们再去进行选择时就会变得更加方便一些。你比如说呢，我点击这个啊，优色标题 k， 点一下看这边立马就变了，然后他在我们软件里面的话呢，是叫这个名字叫优色标题 k， 哎，就是 拼音，所以这个地方大家要记住啊，他显示的都是英文的这个描述好，这个位置的话呢，叫自重，并不是说每一个字体他都有自重，这个一定要记住啊，像有的字体的话呢，他是不存在这个自重的，比如我们现在这个字体就没有自重， 但是像这个思源思源字体的话呢，他就是有这个字重的，有细的，正常的，还有加粗属性东西等等都是有的。 后面这里的话呢是用来修改文字的字号，我们可以点进去，点进去之后呢，里面有一些预设好的字号给我们进行使用， 但如果说这边还是不符合你的要求的话呢，我们可以按住 alt 键，按住 alt 键这样给它进行拖动就行。那你要注意呢，在非 码里面属性区只要是有竖直的位置，我们都可以按住 alt 键放到上方给他进行拖动，这都是一样的，包括像这边你看都可以按住 alt 键进行拖动。还有神奇一点在于什么呢？你按住 alt 键，你说你调到这， 那你说我的手不够远，那会不会我们这个数呢就停止了，那还要再重新把手再拿回来，再重新这么去拖， 太麻烦了，对不对？那飞个马的话呢，是一个非常高效的一个软件啊，那他这里的处理方法是这样子，按住 alt 键，点击拖动，你就使劲拖，你会发现呢，这鼠标哎，从左边他就过来了， 是不是非常的方便对不对？好了，那所以这里啊，记清楚，按住 alt 键可以快速的去调节文字字号的大小，然后下方这一里的话呢，控制的是我们行高，同样 样的，按住 alt 键可以快速的进进行调节。这里呢指的是字句，字与字之间的间距， 这个地方的话呢，指的是段落间距啊，段落间距，比如说一段两段的，我们看一下这个地方啊，那我怎么让他变成两段话呢？你就在这，哎，在这个地方按下回车键，那其实此时此刻呢，他就是两个段落了，我可以把这个句号修改一下， 然后改好之后的话呢，再去调整这个段落，哎，这个地方就是调整段落间距的啊， 那么这三个小功能的话呢，是干什么的？第一个呢叫自动宽度，自动宽度的意思呢，其实就是我们用文字工具在画面上直接单击输入的这种文字类型，那么你的文字越多，这个框的宽度也就会 越宽，这个呢就叫自动宽度，而自动高度跟他是相反的，他管的是宽度，那自动高度指的就是他会跟着我们的高度去发生变化。你比如说我现在按回车 输入数据，按回车输入数据对不对？你的字内容越多，然后他的高度自然也就会越高。而第三种类型叫什么呢？叫固定大小， 固定大小的话呢，其实就是区域文本，你点一下，点中之后呢，我们可以对这个框呢，自由的去控制他的这个大小，那有了这个区域之后，我们还可以呢，给他设置居中对齐， 然后右对齐，举中对齐。后面这三个呢，其实也是举中对齐啊，分别是上对齐、垂直举中对齐以及下对齐，他是分 成了这两排啊，给他进行位置的这个操作。所以呢，这这一边这一堆啊东西呢，还是非常简单的啊，大家可以自己多去点一点啊，就可以了。好，那点完之后呢，我们来看一下后面这三个小点点，这三个小点点是干什么用处的呢？ 我们点进去之后呢，会发现里面呢有很多的这种小功能。对齐跟这里呢是一样的啊，没什么太大区别，但是有一个不一样哎，是后面这一款叫两端对齐。 什么叫两端对齐？我们在排一些文字内容的时候，比如像这种这种情况啊，他的右边这里没有对齐，那没有对齐的话呢，你可以给打开这个叫两端对齐，这样子的话呢，他的右侧这个位置呢就会进行对齐，这主要是涉及到排版，排版的时候会用到，他 在文本修饰这边呢有下划线来，鼠标放上去呢，他这里会有个演示效果啊，还有删除线，都非常简单。第一个呢就是无列表样式中可以有这个小列表，还有一二三的这种列表类型。 段落缩进的话呢，同样的按住 alt 键点击拖拽，你看这是什么？是不是首行缩进对吧？这边就是首行缩进来的啊，在下方的话呢，还有这种叫大小写，字母大小写，我们找个字母 点击三个点，在大小写这边的话呢，第一个呢叫纯大写啊，第二呢叫小写，你可以点一下看全大写，第二个的话呢叫小写，全小写，然后第三个的话呢叫自首大写，就第一个字母呢会进行这个大写，然后剩下的这些东 系的我们保持默认就行了啊，一般来讲是不太会去用到他的啊，这就是关于我们文字工具里面的一些这种使用操作啊，基本的这个使用操作，那菲格玛的话呢，还给了我们一些什么惊喜呢？来下面主要来去学习些这些内容。 我们在做设计的时候呢，可能会遇到这种情况，两个文字的属性会不同，这两个属性你比如说一个是粗体的，一个呢是细体的，那我要是给他直接进行复制粘贴的话，来各位你看一下 属性是不是全部都发生了变化，我想要的效果呢？是什么效果？我希望呢让图像处理这几个字换成这个字，但它的颜色还是这个颜色，下划线还是这个下划线，就他不受到任何的影响，我们 可以这样去做，选中文字之后，在文字身上的右键这边找到复制，在复制里面呢选择复制为文本，这样的话呢他就只会把字复制进去，就不会把属性给我们复制进来， 复制为文本，然后再双击 ctrl 为粘贴，你看这样就行了，非常的方便对不对？那好，那他在右键里面呢还有什么设置呢？我们可以呢去选择叫复制属性，复制属性的话呢，其实就是把他什各种属性啊，都给他复制进来 啊， ctrl alt 键加 c 复制属性，然后再选中它右键粘贴属性的快捷键呢，是 ctrl alt 键加 v， 这样就变得一模一样了。哎，是这种方式啊，所以这一点的话呢，在对我们进行排版的时候，其实提升了很大的 的这个效率，直接用复制文本就行。那么第二个啊，里面比较有意思的点就在于呢，飞一个码呢，它是可以去加链接的。什么叫加链接呢？就比如说你点击这个字的时候，它可以跳转到另外的一个新的网页，这都是可以的。 你比如说我现在呢，打开的是飞哥版的社区，我把他社区的链接 ctrl 加 c 复制一下，然后在这里这个位置呢，我把这个字体我给他修修改一下啊，叫进入。 进入社区怎么去给他加链接？你只需要选中文字，选中文字之后 ctrl 加 v 粘贴就完事了，就这么简单，那你鼠标放上去，那上面就会显示链接，然后这边呢，打开文件点一下， 他就会跳转到这个网页中去，那这意味着什么呢？意味着啊，其实你用飞个马，你甚至都可以去做一个自己的简要的一个个人信息展示页面，你做一个简要的一个个人网站，这都是很有可能的啊，因为他可以加链接，他可以进行一些这种跳转的这种操作。 那怎么去编辑他呢？点击编辑就可以看到啊，他是跳转到这个链接，你要是不想要的话，点一下这个图标断掉。哎，那这个链接呢，自然也就没有了， 他除了具备这种功能之外呢，他还可以啊，去跳转到自己的画板，去跳自己的画板，这都是可以的。好，那怎么去跳到自己的画板呢？ 比如我这边呢，有归纳总结好了，我选中这个画板，选中之后呢，队友分 我勾线，勾上这个东西，叫链接到已选中的画框，把这勾上去，勾上去之后呢，选择复制链接，点击，复制成功之后呢，我们再次点击这个文字， ctrl 键加 v， 那好了，你看我点击它， 他会显示什么呢？叫转到画框一点，哎，他就跳转到了这个画框里面去，非常的简单便捷啊， 这就是关于文字啊，文字加链接的这个操作啊，他怎么去加啊，加完之后呢，以及怎么对他进行这个删除工作。 那么第三点，文字工具非常好用的啊，第三点在于呢，我们这里呢，所设置好的一些文字属性，你是可以给他呢进行保存，比如像我这边啊，我已经保存了一些，你看分也 标题，小标题，分页正文，我都是保存，那怎么去保存呢？我想把我的属性存进去，点击他在文本这里点一下四个点，选择加号，给他添加文本样式，点一下那名字的话呢，你可以去起一个名字叫红色， 红色标题，新建样式，建好样式之后呢，这样的话，你会发现，在你再去选中文字的时候，这里就变成这样子了，就这种形式，我要想让图像处理跟我一样的话呢，你可以点他，再点这选择红色标题。 那你可能会说，哎，为什么红色没有过来呢？注意啊，我们刚刚存的是什么？刚刚存的呢叫文本样式，他只会把你用了什么字体，用了什么字号什么字句给你保存起来。 你要想保存颜色的话呢，需要在填充这边，你要把你之前用的这个填充的这个颜色也要给他呢去添加样式，点击加一个这个样式，加好样式之后呢，选中他，再点击，再点击他，哎，这样呢就会变得一模一样。 那么你说我们做这种文本样式有什么？有什么功能呢？功能呢就在于呢，我们可以批量化处理 像这两个字，现在他们所用到的都是红色标题文字样式，我就可以呢，随便选中一个，点击红色标题样式，点一下后面的这个小图标编辑样式， 对吧？又出现了我非常熟悉的这个界面，那当你对他的属性参数进行调解时看，只要是用了他样式的东西，他全部都会一 起同时进行处理，就非常非常的方便，对不对？还有更加方便的，我们这里呢做好的这个样式非格码平台呢，侧重的是协作性，你都可以呢把你这边设置好的样式呢，共享给整个团队进行使用。 那这是什么概念？你这边只要一做好，在你团队的人全部都可以使用你这边所添加的样式，那我来大概去演示一下，我这边已经做了一个红色样式， 然后呢我现在呢我就需要呢把我的央视推送出去，选择发布，选择发布，你看这是我刚刚新添加的那两个央视啊，再去发布 啊，看更新成功，更新成功之后呢，我就可以去一个新的文档看，这是一个新的文档，在新的文档 中点击我们的文本，在文本里面没有文本样式，原因呢是由于你得把这个开关给打开才行啊。浏览组建库，在组建库中呢，这是我的组建库，你要把组建库的开关啊，你给打开 好，打开之后呢，你就会发现，这是不是就是我刚刚建的那个样式，这样的话呢，那我的同事呢，就可以用我定的样式直接去做设计，多方便，你看很方便的，他直接轻轻一点就能去生效了啊。 我们来总结一下这部分学习的知识点。首先文字的快捷键呢，是 t 键，在飞马属性栏中啊，它的数值调整区域呢，都可以通过按住 alt 键，结合鼠标左键进行快速的调整工作。我们在里面复制文字的时候呢，如果说你担心把属性粘贴 过去，你就可以通过右键复制为文本解决这个问题。那复制属性快捷键呢，是 ctrl alt 键加 c 粘贴的话呢，就是 ctrl alt 键加 v， 用它进行粘贴， 我们定好样式之后呢，可以把它保存在我们的文本样式中，而文本样式呢，既可以给你自己去用，也可以呢推送给整个团队进行使用。 给一个文字添加链接，我们只需要把链接复制选中文字直接 ctrl 加 v 粘贴，这样的话呢，就可以快速的去完成一个跳转链接的制作。

figma 组件嵌套实力属性你会用了吗？你知道 figma 变体组件的属性可以嵌套吗？首先我们先制作好基础组件框，选所有图层添加组件，然后点击图层添加布尔属性和文本属性， 这样我们就得到了四个不玩属性和三个玩本属性。然后我们拖入这个组件，再次添加遍体， 这个变体我们用来设定不同的尺寸高度， 这里我们制作三个尺寸就可以啦。 然后我们点击属性的加号，将基础组件的属性嵌套进来， 这样我们使用尺寸实力时就能看到基础组建的属性了。 接下来我们继续用尺寸实力制作遍地组件， 智总默认红色、绿色三种变体， 制作好后选择组建属性，再次勾选嵌套属性。 现在这个颜色变体组件已经有三种组件属性了，可以根据需要随意变体组合。 我们用这个组件做个简单的应用吧， 记得去下载安装标记师插件哦，可以免费导出本地标注，还可以实施预览设计稿哦！今天就到这里。

哈喽，大家好，我是草帽，这个九月二十号，飞马更新了关于组建的三个小功能，我看了一下啊，这三个都是非常实用的，我们每个人都可以用到，但是呢，这三个目前处于测试阶段啊，没有正式的上线，所以飞马这次搞了一个不一样的啊， 我们客户端无所谓，哪个都行，但是你在主页啊，右上角，你选这个个人设置里面啊，在账户这边你就能开启啊，如果没有你，你记得蕊唠了一下，或者重开一下，把这个看见没有，这就是这个新功能测试版打勾。所以呢，这里再重申一下啊，飞个马的那个客户端呀， 他就是个浏览器啊，他跟菲格玛有没有新功能啊？没啥关系，客户端就只是个客户端，然后官方文档呢，在这还有这个更新日志啊，都给他放到视频的简介里，那为了 确保让大家能理解啊，这需要一个上下文的代入，所以呢，我就找了一个案例，我从头上呢去创建，然后中间呢穿插这三个新功能的应用，这样大家更好理解啊，那我先把这个头像拽过来，他就左边就咱就整一个例子啊，然后右边呢，我计划啊 是三个状态，一个呢是字，另一个是按钮，还有一个开关，然后呢我把这个变成组件拖进来，这边呢给上奥特莱奥的，然后这边我们给奥特啊，就是比特朗，我把简单的样式啊快速的调一下， 行了，现在呢，我把它呀变成组建啊，那第一个新功能就来了，咱就说这个头像啊，如果正常我们改组建呢，你要双击进去选到头像对不对？选到之后呢，你才能在这边去选，是吧？就这两个状态 在外面呢，你看啥也没有，所以我们来看看新功能怎么弄啊？你在这个复元素选中，然后右边啊有一个这个属性，这加号看见没有？最下面就是新的，如果你没有这个的话，首先你要确定你刚才那个开关打开了，然后这边雨唠叨一下啊，如果还没有，那就有一个问题，是什么问题呢？ 就是他这个组建里头啊，他包裹的这些子组建他得有那个切换的，有那个组建属性啊，有那个变体才行啊，比如这个头像在这呢啊，这就是变体对吧？这两个之间切换得至少有一个。完了，你这边这个加号这边啊，他才会有啊，我们点 点完之后你看见没有就已经出来了， f 就是就这个名，我们点一下子点完之后，这边看见没有，我们在外面就直接就有了啊，这其实就是很 简单的，大家操作一下就有了。那现在呢，我们就能在这个外框啊，不用进到里面了，直接在这改。其实我这个案例还是简单，有的案例呢复杂，你要点好多层才能选到去切换挺麻烦的，对吧？所以这个功能还是实用的。然后呢，官方文档里面有提到啊，说关于这个隐藏， 隐藏这边呢也会让他也隐藏，什么意思？我俩演示一下啊，就是泪儿这边我们能把这个头像啊默认隐藏，我们就说头像隐藏，默认的话我们给个就就隐藏吗？哎，应该是 boss 啊，撞见，你看默认是没有的，那我们在这边外面里面呢， 你看刚刚创建那个会有，你先选中，选中之后，哎，这边就还是能切换的，就是这个意思，我这边呢把它点出来啊，然后呢我们把按钮搞一下啊，呃，我刚想到两 两个就够了，这样我们直接把它创建成组建机啊，这个呢叫什么？ primary， 这个就是三克纳瑞，然后去复原素把名改一下，叫什么？叫类型，然后我们拉出来看一下啊， 对吧？能切换的同时呢，我们还需要让这个图标啊，能切换显示或者不显示，所以就在这啊，当然这是个老功能了，之前也专门介绍过，所以这个就是按钮图标啊，默认的话咱 force 就是隐藏，然后这个也一样啊，当然这个就不用再重复创建了，只需要选择按钮图标就可以了，然后这边对不对？ nice 啊，好了，第二个新功能来了，我上面专门弄了很多的 icon， 正常来说呢，我们， 哎选了这个 ico 之后呢去在这切换，那如果你的图标库呢，还有很多啊，比如一百个，几百个，你在几百个里面去选挺费劲的。这个新功能呢，是可以让你置顶几个，也就是说你可以自己你定几个常用的选项，就不用在那么多的里面找了。那么这个新功能怎么用啊？你要在原始组件里面去操作， 所以呢，我们选到这个 icon 啊，这俩已经被隐藏了，没事，这个时候点他直接就出来了，底下这就是一个新的界面，这个就是首选像的意思，那上面呢，我们这个组间属性，比如就叫按钮图标，哎， 然后这个是默认纸，你挑一个，然后这里面呢，你就能自己去选了，这边是试图啊，你看啊，常用的，比如有收藏啊，咱们就可以拟定了吗？啊，在这里面找，当然你可以这边啊调他的其他层级的这个图标或者是组建啊， 比如常用到这个帮助按钮，对不对？还有一个收藏按钮，或者是喜欢按钮啊，就这个意思啊，包括这个手，哎，这个，那你打钩的就是置顶的，然后这边创建就行了，在这个时候呢，我们拽一个啊，图标按钮点出来，这边你看 就不会在这么多的里面去选了，只是显示你常用的，那么这个时候可能会说，我想用其他的，怎么弄啊？你直接去搜，我打个比方啊，比如这个 shop car， 那直接搜 少部卡，这里面会没有，对吧？因为默认，你看这个这个选项意思就是置顶吗？他默认你整到这个分类里面了，那你就可以在下面这个测试哦， 其实这就出来了，我这个里面出现了有重复的，是因为我这我这个外部还有其他的组间裤啊，我没有关掉，所以会出来，所以这是一个很实用的功能，对不对？然后如果 你想改啊，编辑啊或者删掉啊，你要在外面选了，因为刚才我们不是进到这个图标里面选，现在呢，你得进到这个最外层，如果是组建就是原始组建，如果是组建集呢，就是这个最外层的附件集，这边肯定是能编辑的啊，这不 你可以再重新的去加或者删，然后甚至把这个组建属性呢删掉，包括刚才咱那个头像，这个也是一样的最外层啊，你不想要你就删掉。 那么再往下呢，就是第三个特性了啊，新功能就是你在原始组建里面呢，这边啊，最高层原始组建，你选择这个 symbol 啊，就反正就是简洁图层，这个时候你看你再转一个图层啊，点开你会发现 这有一个 c 奥，就是把没用的图层啊，飞马认为你也不会编辑，反正就给你隐藏掉了，但是你要想看呢，你就点开也有， 然后呢你点空白处啊，你看他又回来了，那就还是默认给你隐藏掉了，只是我们这个里面的这个图腾太少啊，当然抛开隐藏的，你创建过的那些组建属性啊，是会正常显示出来的，因为那些你是需要编辑的，所以他是有用的。 那关于这个简洁图层啊，这个选项他也不是每个都要开，大家好好想想啊，因为如果你是编辑者设计搞的编辑者，我们要时刻去看这个组建的结构的你卡你默认给我整个这个玩意其实是很不方便的，所以这就扯到一个东西，就是 比如看小老虎的这个他的组建机啊，安德迪站，他会疯狂的给你媒体出来，就是从组建的使用者来说，那么他可能用到的不同的数量，你看四个，五个，六个， 那么像这种做组建的核心理念呢，就是组建的制作者或者维护者，你可以麻烦一点，你看你咔咔弄多少功能量挺不小的，但是呢，作为去用的人，他就会很方便了，只需要一律呢，在这你咔咔无无限的切换就行， 对不对？我哪都能调，包括数量。所以说呢，这个新功能啊，大家就可以好好想想啊，在哪能用上，包括那个简洁图层，只有别人用的时候你再给他选上，如果你们团队很大的话，就是用这个组建的人啊，他不是维护这个设计规范的或者组建库的人， 你可以考虑开上这个默认隐藏图层，否则的话我建议也不用开了，因为这玩意会破坏你这个图层结构啊，起码显示上是不对的，你只有点开才能看到他真正的这个嵌套层级。好了，下面呢，我会把这个完善，也算是继续应用 一下刚才那三个新功能。所以呢，我们刚才是什么情况？这边 icon 啊，不是。呃，按钮，他应该是这么一溜啊，我来三个，一个两个，然后解除组件。我只是用一下他的框啊，然后看见没有啊，这个是放按钮的 这个闪电啊，这个是放他的啊，这边已经做完了啊，这个拉出来的话呢，就是开启或者不开启，然后是不是禁用状态，你看都是这样的，所以这边把名改一下。 哎，他们都是 list right 就是右边，然后里面呢，他们仨是同级的，只是三个类型，然后这俩呢给成 福建。那我们去看看啊，点他。哎，现在最外层呢，由于我们没弄那个新功能，还是只能选头像。这个呢，想改的话你得进到里面， 在这，然后看见没有这几个状态之间去做切换，然后这里面有四个啊，是因为我这个命名整的不对 就行了。那所以现在我们想把右边这个选项啊，不进到里面选了，我在外面选还是在这对不对？加号走起啊，选这个哎，但是你会发现这个里头啊只有头像并没有这个，还记得我前面说的吗？你要想搞这个就是把子组建的 组建属性啊，显示了最外的这个框，他的前提是要么是组建集这种，要么你得让他能切换，那么现在这仨不是组建集， 很明显不能切换，所以呢，我们需要点到里面那个手动的创建一下，也就是这块啊，点他这不就有了吗？包括这边啊，你想弄那个什么首选样也行，那这边这里面没必要啊，啊，一共仨，所以把这个 删掉，这边我们去选这个右侧状态啊，默认看你想弄哪个纸，比如默认我们整一个位置啊，创建，创建完之后呢，我们再去这个最外层啊，点这个加号，完了他看见没有，这不就有了吗？ 妥了啊，哎，当然，这个命名我们想改一下啊，改不了啊，改不了。那这个应该是跟着这个图层命名走的，比如改成右侧啊，状态， 哎，这边也变了，所以这样的话我们再拽一个，首先右边是吧，我们就能随便的去 改了，然后呢，这是头像啊，那么我们再进一步啊，再想想啊，如果我们刚才整了那个按钮，比如说按钮的 icon 有还是没有，那么这个的最外层的这个框啊，这里面 也并没有那个东西，怎么让他显示出来呢？首先呢，这边的最高腾框啊，他是没了，对吧？就是他俩我们都点上了，那么这边我们明明已经给他设置了，因为你看这个组建机啊，是不是这个图标，所以问题出在哪？ 就是这忘了没，我们这给他单独框了一个框呢，所以在这个地方调，所以直接在他上面， 哎，这不嘛，巴特就有了，然后呢，我们尝试一下啊，看有没有这边切换成巴特，哎，你瞧瞧，然后按钮类型，按钮图标啊，哎，你看真棒，图标出来以后呢，这边我们刚才那个整了几个首选项也有了 啊，反正跟凹斗聊的很像的，你就一层一层捋，他就有了这个功能，大家多操作操作吧，本 很简单，操作完之后呢，你就能理解了啊，光看是不行的。然后呢，再比方说啊，这也是老功能了，因为之前不是说这个文字也能创建那什么吗？就是组建属性吗？在这呢啊，我们可以点这个，你给他添加一下 文字内容，或者叫按钮是吧？按钮文字默认呢，给一个默认值，我们就叫 tex。 行了啊，那这边其实默认的话，他就会有，在这呢就能改。那再多问一个问题，如果我这个不想要怎么办？他好像没有办法让你 自由的去选择啊，他并没有隐藏键，你要么就直接给他删掉得了。所以把他删掉啊，这些都能删，你删掉之后呢，这边也就 没有了。好了，那就这些啊，以上就是所有的视频内容，然后呢，我会把这个文件给大家分享出来，也是放到视频的简介里啊，最后是草帽，我们下期再见。

好，大家好，今天在看 luncheo 的一个文档的时候，无意中发现它有一个 figure 码的一个 loader， 因为我们知道菲格玛是一个很流行的一个设计软件，那么我们来和大家看一下，利用这个菲格玛 roder 到底能来做一些什么样的一个事情。要使用这个 roder 的话，他需要一个 xs token 和一个 id， 还有一个 k xs token 的话，其实就是到我们这个网站上面去登录了这个菲格玛过后呢，在他的一个个人中心，个人中心里面的话 可以自己去创建一个，然后呢 id 的话呢，其实就是这个地方的这个 node 杠 id 后面这个字，比如说我们这里就是零杠一，然后他不是还有一个 file key 吗？ file key 就是 fire 后面这个字，这个呢其实就是我们这里的一个 file key， 比如我们把这里 拷问一下，我们这里是这一个，我们在这里来和大家测试一下啊，这是我们这个地方的一个 file key， 然后我们这里是 零杠一，然后上面这个是 x 是头肯，当正常来说我们不应该把头肯泄露出去。我这个单子是给大家演示一下，正常我们可以通过黄金变量给它加载进来，然后呢我这里演示过，我会把它直接消费掉就可以了， 对吧？然后的话来这里的话是利用的我们这个 faker 码里面的这个 rector store index greater 里面的话，我们这里声明的一个 faker 码的一个 loader， 主要是要用到这个，对吧？用我们来测试他们，然后到了我们这个地方呢， 然后我们这里咨询一下，我们这个地方把这个文件加载进来过后干嘛呢？你看我们实际上是把这个这个码里面的这一些相关信息给他拿过来，其实我们通过 api 的话得到的是一个精神信息嘛？ 得到精神信息过后的话，我们接下来的话，我们可以做一件事情，就是让他根据我们这个页面里面的一个设计的一个信息来自动帮我们生成一个 前端的代码，来看一下能否实现啊？比如我们希望的是让他根据我们这个地方的一个 login container， 对吧？所以我们把直接让他去生成这个 login container 的这一个前端页面， 看一下我们这个怎么生成？我们这里定义了一个 jaret 的一个扣的，就是让我们输入进来，比如说我们让他输入 进来的是 login container， 就是让他去生成我们这里一个登录的这一个 container， 对吧？然后呢下面我们这里是一个 promote， 我们这个 promote 就是说告诉他你是一个专业的一个前端开发者，然后呢让他去用我们提供的一个设计的上下文去创建一个 xml 或 css 的一个文件， 然后呢你所生成的所有的都把它内敛到一个文件当中，对吧？然后呢要能够直接在浏览器当中去渲染，然后对应的这个 figma 的 一个文件的一个节点，还有他的一个 mate data 信息，就是我们通过 context 传进来。然后下面呢就是我们用户给他和他对话嘛，用户和他进行对话了，现在就是我希望让他去根据我的这个输入的一个信息去给我呃生成代码，对吧？ 那下面这条就是我们这里的一个题词的一个模板哈， system 还有 human 这些，这个的话就是我们去初始化这个切 openai， 其实他是包装了一下 openi 的，正常来说你也需要在这里面去传递你的一个模型，对吧？传递他这个模型模型的话，他这里默认是 gp 三点五，我们这里就不不去改了。 那么还有 open， a， p， i， k 啊这些这些呢？其实我已经通过黄金变量给他加载进来了，所以我这个地方大家没看到，对吧？然后下面这个地方呢，我们利用这里的这个上面定义的这个飞个马 这一个 retriever， 对吧？去，哎，查询就是相当于是去在我们这个文档信息里面，整个文档信息里面去找到和这个 login container 相关的一些信息，找到过后的话就把它作为我们这个上下文 给到我们这个地方，对吧？是不是给到一个上下文了？然后呢把这个这个地方呢，就是我们用户要插的吗？最后呢把这个内容给他生成一个我们的一个 promote， 然后传给我们这个，呃， opni 的这个接口，最后的话是不是就给得得到一个响应， 对吧？就查询他就想用，所以我们这个地方呢，就去调用一下我们这里那个 jarret code 这个函数，我们这样就让他，比如说让他去生成 looking container， 好，然后嘞他这个里面生成的时候， response 里面他是有一个 con content 的，就是我们最终那个那 内容是在这个 content 里面，所以我们这个地方呢，就让他去打印一下啊，打印一下这个结果来执行一次，看一下这里显示不全，我们直接把这里点击这里吧，这就是生成的最终的， 对，然后我们把它拷贝一下，拷贝一下在这张好保存一下就可以了，保存到桌面 login s m l， 那我们这里打开最终生成的一个样子是这个样子，所以他每次的话这个地方可能还是不太一样。我看一下我们这个地方，这里的这个文本信息， looking to 这里的这个文本没有得到，对吧？你看我们之前之前那一次呢？他其实是跟我们，你看之前一次的话，他是把这个 email 和 paso 的给我们呃渲染出来的，所以这 这个地方呢，有可能是这个地方得到的一个信息不够完整，这个地方默认使用的是那个三点五的一个接口，有可能以后我们把它换成一个 gpt 四的一个接口，过后会会有所好转哈。因为现在呢，他是依赖于我们这个地方的一个上下纹， 你这个地方那个内容的话可能没有给他描述清楚，还是这样的。不，这种的话可能是你最开始做圆形设计的时候，然后把它转成我们的一个前端页面，这样去做测试可能比较方便。然后如果你是一个高保真的一个图，你想直接把它转成我们的一个前轮代码，目现阶段来说的话，其实还是有一定难度的。

形状工具是七个工具的集合，包括矩形、线、箭头、圆多边形、星形、放置图片。下面介绍一下形状工具下的毛垫。 创建一个矩形后，我们会发现矩形的四个角上分别有一个毛点，拖动毛点就可以改变矩形的圆角，当然改变单个圆角的大小也是可以的，按住 out 拖动毛点，这个圆角的大小就可以改变了。线和箭头本身没有特别的点， 使用时经常会用到描边属性，圆形中的毛点就更高级了，拖动毛点可以建立扇形，这个时候又多了两个毛点，拖动中间的毛点，扇形就变成环形了。另外一个毛点 可以旋转角度，多边形和星形就放在一起介绍吧。拖动边缘毛点，改变边数，拖动内部毛点，改变圆角。 最后一个是放置图片，鼠标左键选择想要放置的图片，打开再想要放置的位置，单机图片就被放进来了。另外他还有一个骚操作， 选中多个图片，打开鼠标左键点击，点击图片就进来了。甚至你还可以把图片放进形状里，选择多个图片，点击，点击他就进来了。是不是很神奇，快试一下吧！

这节课呢，我们来学习 figma 的组建管理， 组建化的存在呢，对于团队项目的效率提升起到了非常大的这个帮助。我们先看一些组建，屏幕上这些组建呢是不同状态的这个按钮， 那么我们可以想一下，如果说 a 设计师做完了这些效果之后，给他做成组件，那么 b 设计师在进行使用时，就可以直接从组件库中进行提取，这样可以很有效的提高自己的工作效率。 好，那么这个呢，他也是组件，这个组件的话呢，他也拥有不同的这种交互状态，比如说开关键，开关键的话呢， 他有禁用状态，然后呢也有这种开启状态，有关闭，有打开，是有各种各样不同的状态。那么我们在这一部分中主要学习的有两点，第一点是常规的组建如何进行搭建，第二点是具有多种状态的组建，又该如何进行搭建， 那好，那下面呢，我们就一起进入到课程中去学习一下。关于组建的管理，我们看到呢，屏幕上一共有四个按钮，分别是默认状态、悬浮状态、单机状态以及静音状态。 接下来呢我们来去演示一下啊，关于如何去把这个造型呢给他转成组件的这个基础操作。首先呢我们先去选中第一个按钮，选中之后呢，点击上方的创建组件图标，快捷键是 ctrl 键加 alt 键加 k 点击， 点完之后呢，我们图层的图标会变成菱形，哎，菱形代表的就是组件的这个意思，那好，那也就是说下面这些东西呢，我们分别进行单击，你看他这里呢都变成了组件， 一个一个去点，效率太慢了，那有没有办法让他同时产生组件呢？当然是有的，好，我们先撤销回来， 车摇回来之后呢，我们只需要框选这四个，扭选中之后点击上方注意这个时候他多了两个东西，一个是创建组建，一个是创建多个组建。我们在当前情况下的话呢，需要点击创建多个组建， 这样的话呢，那么我们四个组件就已经创建完成，创建完成之后那组件要怎么去用呢？你看啊，我现在呢，我把这个组件 我给他复制一份来，各位注意一下，我们新复制出来的这个组件呢，和他的初始组件他就不一样，初始组件在软件里面有一个名字啊，叫模板， 叫模板啊，他是最大的那一个，然后你复制出来的这个组件呢叫实力组件啊，他是你复制了模板的组件叫实力组件啊，他本身还是不太一样的。 哪里不一样的？我们把组件复制出来之后，首先模样肯定是一样的，他除了可以在当前文档进行复制，他还可以这样进行使用。 那我现在呢新建一个页面，我在这个页面中呢，我想再次用到我刚刚搭建好的这个组件，怎么办呢？点开资产，资产就是我们搭建好的组件啊， 都在这个里面，然后你要找到你自己是用哪个画板去进行搭建的啊？他跟画板是有关系的。好，打开资产之后呢，我们就能看到，这就是我们刚刚啊做的一共是四个组件，你想用谁，你就直接拖动他，拖过来立马就能用， 非常简单，你看速度呢，也是非常迅速，直接拖过来就可以了。那拖完之后呢，你要记住啊，他的模板 是不变的，我们这里拖出来之后，其实也不是模板叫什么呢？叫实力，实力组件就是你复制模板出来的组件叫实力组件。哎，就这意思， 那实力组件的话呢，我也可以去修改它颜色，对吧？那么我这边去改颜色的时候注意啊，他的模板不发生变化，是没有任何 变化的啊，因为实力呢是管不着五版的。那你要想让他一起发生变化的话呢，怎么办？比如说这边拖了一下，然后继续复制，继续复制，继续复制，然后这个时候老板说了啊，我们不做蓝色按钮了，我们做一个红色按钮。 好，那如果说你是用组件化的这种思路去做设计的话，那这个操作呢就会变得非常的方便，我们只需要呢去调整模板组件，就可以对他这些组件一起生效。 那如果说我们做了很多页面啊，我们忘记了，比如说我的模板组件，我真的不记得放到哪里去了，怎么办呢？ 我们可以呢，在这个组件上啊，右键右键选择转到模板组件，点击，他就会帮助我们找到你最初时组件的位置。 好，那我现在呢，我把模板组件他的颜色改掉，比如说老板呢，现在又喜欢红色的，改成红色了之后呢，这个时候我们再返回我们刚刚啊新建的那个页面，那你会发现呢，你看对不对？ 所有颜色都进行了更新，也就是说只要你的模板颜色一上一发生变化，那么他这个实力组建都会发生变化。这个就是关于我们在飞克马平台中啊初步搭建组建的这个基础操作啊，就直接选中 创建组建就可以了。创建组建之后呢，要记住啊，因为呢，你只要改了模板，剩下所有的实力是不是都会变颜色？所以你一定要去想清楚，你再去改的时候，他是模板组建 还是实力组件，区分的方法很简单，你只要看到他图层图标就行。实心的代表的就是模板，也就是初始的组件，而你复制出来的这一种呢，都是空心的，空心的代表的就是叫实力组件啊，也就说你去改实力的话， 是不会影响到模板的，但是改模板他呢就一定会去影响到这个实力。那为什么我现在这样去改，然后实力没动静呢？因为你之前的话呢，是不已经把它改掉了，对吧？啊？你比如说我这里改个这个颜色， 你看我改完之后呢，我不去复制他，我去这个资产里面，对吧？我们去这个资产里面看，资产也变了啊，去资产里面给他拖出来，那拖出来之后呢，注意看，我现在呢去修改模板的颜色， 他就会同步去进行更新，对，同步的啊，还有呢，我们这个组件他可是可以推送给团队的呀，你想想，推送给团队之后，只要你这边一更新，那么整个团队的设计系统就全部更新， 所以这是提升了我们非常大的这个工作效率。接下来呢，我们来学习一下关于复杂的组件要如何进行管理。 那屏幕上的这个组件为何比较复杂呢？首先它有两个不同的版本，一个呢是 ios 版本，另外一个呢是安卓版本，每个不同版本呢又具备不同的状态，那分别是默认点击以及经营状态， 在状态再往里面去细分的话呢，每个按钮它还有具备不同的开关，有关闭键， 然后呢由我们打开键，所以呢像这种啊非常复杂的这种按钮呢，我们就要通过变体功能给他进行管理。那好我们先通过一个比较简单的这个小例子呢，认识一下什么叫变体。 那么我现在所选中的呢就是四个小组件，完全是单独独立的小组件，我可以框选这四个组件，但是记清楚啊，必须是我们的原始组件，也就是模板。选中之后呢，我们会看到这里呢会变成叫合并为变体，哎，点一下子 好，那么点好之后呢，我们双击从里面呢拿一个组件出来，那么拿出来之后就会发现呢，他这里其实呢就会把四个组件合并为一个组件，那么我们就可以通过在这里的啊状态，在状态中 的话呢给他去切换不同的类型，这样就会变得非常的方便，比如说这是禁用，这是默认，非常方便啊，比如我们用四个单独独立的小组件对他进行管理，提升了非常大的这个效率， 所以呢我们来去观察一下啊，像我们现在屏幕上的这一款很复杂啊，要如何给他进行处理？ bat 组件的话呢，对名字是非常讲究的，所以呢我们要先去学会如何对这一堆小组件进行批量的这个命名，因为你要一个一个去改的话，效率太慢了。 命名的规则是这样子的啊，首先呢我们要将版本把它放到上面，就是版本等于 ios 或者安卓，然后状态的话呢，等于默认状态啊，等于点击等于禁用状态， 分别进行命名。在开关的话呢，我们再加上等于啊这个处和 force 这个，但是在后方开关中一定要特别注意，在这里的话呢，需要用到这种英文描述 才行啊，不能去写这个开啊，或者写这个关，这样的话呢，遍体里面的这种开关键属性就会失效。然后我接下来给大家去演示一下啊，关于如何给他进行重命名， 我们首先呢选中所有的 os， 这边选中之后呢重命名的快捷键啊，是 ctrl 键加二键，那么打开之后呢，我们直接在这里呢去输入输入版本， 那你这边输入版本之后呢，你看它所有的图层呢，会批量的啊，全部进行这个修改啊，等于 ios 这边写完之后不要忘记加上逗号，这个逗号啊很关键啊，要是英文的逗号写完之后，点击重命名好了，你看我们的名字就命好了，同理，安卓这边框选 ctrl 减加二，依然还是这个版本， 然后等于安卓 点完之后呢，不要忘记加上英文的逗号，点击除命名。行，那么我们前面的部分呢，也就命好了，再加上这个状态啊，状态的话呢，我们可以这样去写， 我们先选择上面这一列啊，因为上面这一列的话呢，它都是默认状态，所以你可以这样去快速选中，那还是 ctrl 减加二哎，那这个时候 的话呢，你会发现呢，我们的前缀是不一样的，这个时候就需要点开当前名称，把当前名称呢打开，打开之后呢，我们再去输入叫状态， 状态呢就等于默认好，不要忘记呢加上英文的逗号， 我们可以把这个呢给大家复制一份啊，把这些都复制一份，然后充玉米，好，这边就可以了，然后继续选中这些， ctrl 加二，点击当前名称粘贴，把它呢改成把默认啊给他删掉， 选中这个位置， 状态呢等于单机 点击状态，加上英文的逗号。最后一个是禁用状态， 前面呢我们加上这个当前名声，他有的时候这里一点，你看他会自己往后面去跳过去啊，然后你就用这个左右方向键给他微调过来就行了，这里的状态呢等于禁用， 加上英文的逗号重命名。那命完之后呢，就只剩下这个开关了啊，开关的话呢，我们可以先把关闭的状态呢一起给他选中，然后 ctrl 加二当前名称， 这是开关，开关等于我们现在选中的是关啊，所以是 force 这个 重命名，再去选择打开的这些， 然后输入开关，然后等于触 点击重复一名啊，那么这样子的话呢，我们就把每一个组件的这个名称就全部都命好了， 所以以后我们在接触这种比较复杂的这个组建管理的时候，一定要先分清楚他不同的状态，分清楚这个状态才行，如果说是涉及到这种开关键的话呢，一定要通过这种英文描述，就后面这个啊，必须是英文 最后一步的话呢，我们框选这些组件，框住之后点击合并为变体啊，我们双击啊，从里 面挑一个组件出来啊，挑出来之后的话呢，你看我们就会发现呢，在这里他就会显示你的版本可以进行切换，安卓或者 ios 状态的话呢，当前你也可以给他进行切换，比如说这是默认， 这个呢是禁用，这个呢是点击状态都有开关键，可以这样去进行切换，所以说你想去实现这个开关键的话呢，有一点是非常重要的， 就是我们最后这个英文单词一定要给他写上去，你不能写开，或者说写关，那如果说你这个地方写开，这个地方写关的话，那么他最终出现的效果也能做出来， 只是说的话呢，他没有这个小按钮，就他跟上面这里是一样的，比如这个是开，这个是关啊，他也是能做出来的啊，只是说交流方式会存在一些这个区别。 好了，那这就是关于我们变体的一个使用方法，我们来总结一下这部分学习的一些知识点。首先呢添加组件快捷键呢是 ctrl 键加 out 键加 k。 组件呢分成初次组件和实力组件，实力组件就是你把初次组件复制出来的组件呢叫实力组件啊。 第三点的话呢，我们修改初试组件时啊，初试组件呢也被称之为叫模板，都是一个意思， 当你去修改初始组件的时候，会直接影响实力组件，你要是不需要让他去影响了，我们可以对实力组件进行叫分离实力这个操作快捷键呢是 ctrl 键加 out 键加 b。 第四点呢，在项目中呢，具有多种属性状态的组件呢，我们要使用叫变体变体的这种方式 给他进行搭建，搭建变体的话呢，要满足两个条件，第一个条件是他必须是组建。第二条件是呢，他呢命名要命好就行。而在第一条中呢，再补充一点， 他必须是什么组件啊？初始组件啊，如果说是实力组件的话呢，不行啊，必须是初始组件才可以啊。第五点，在操作遍体组件时，对命名规则要求比较高啊，特别要要去注意一下，否则你做成遍体之后就会容易啊，乱七八糟的。 第六点，重命名快捷键呢，是 ctrl 键加二键。那么这个重命名的这个工具呢，对于我们大量图层结构啊，去命名提升的效率啊，就不用我多说了，大家应该都能懂，对提升的效率呢，是起到了非常非常大的这个帮助。 好，那么以上呢，就是关于我们本节课对组建管理的这个学习。

啊。

本节课呢，我们将会学习在飞哥马平台中呢 frame 一组的这个介绍。 关于组呢，我们在之前很多设计软件中呢，其实都是有接触过，他主要的功能呢是在于协助我们去批量的去选中一些元素，然后给这些元素呢去做出一些效果。 那么在飞克马平台中的话呢，他是引路了一种比这个组呢更加高级的这个概念，你也可以把他当成组去进行使用，但是呢，他会比这个组呢去拥有更多的这个功能。那好，那下面呢，我们来进入软件来看一下他的具体操作。首先呢，我们来去学习一下关于组的 基本功能介绍，我们对画面上的这些矩形呢进行批量的这个编组处理，首先框选所有矩形，框住之后创建编组的快捷键呢，是 ctrl 键加 g， 在右键中他也是有所显示的， 这是编组。那编组成功之后呢，他其实就相当于啊，你点击任意一个矩形，他都是可以进行批量的这个移动的。哎，这是怎么去编组，那编组成功之后呢，又怎么去取消这个编组呢？ 我们选中整个组之后，右键找到啊，取消编组快一键是 ctrl 键加 shift 键加 j， 这样就可以给他进行取消。 那么如何让两个相同颜色的产生一个组呢？这个呢就要涉及到我们一个叫家选，家选的 操作，加选的话呢，先点击第一个，再按住 shif 键，点击第二个，这样就完成了加选操作。而减选的话呢，则是再按一次 shif 键，这样就完成了减选的这个操作。 好，那么我们把这些东西呢再去进行编组，编组成功之后，我双击就可以去编辑里面的这个组单独的一个东西啊，这看可以单独编辑， 然后编辑好之后，点击画面空白地方，再次点击时就会发现我们这个组外轮廓呢，他就会变拉长， 这是因为呢组的特点是你的子级发生位置变化时，他呢会直接去影响我们的副级，而副级就是现在的这个组，而子级就是 里面的这些矩形，那他会去影响啊这个外轮廓的一个大小啊。那么我们在去进行工作项目的时候，可能会遇到这么个需求， 我能不能把里面所有的颜色统一为一个颜色啊？有没有更快的办法去处理这件事情？答案呢？当然是有的，我们编好左之后，在右下角看到填充属性，在填充属性中点击加号， 他就会把里面所有的颜色进行替换，那我们可以呢去任意的去修改这个配色， 但是值得注意的是呢，当你去点击减号时，他的颜色呢都会消失不见，这个呢要特别的去注意一下啊。 好，那这个呢就是关于组的这个使用，那么弗瑞明的话呢，他其实要比这个组呢会更加的 高级，他也可以当着组去进行使用，但是呢他会具备一些更加高级的这个功能，所以呢我们下面来去看一下啊，关于这种画框啊，弗瑞姆的中文翻译呢，就是叫画框的意思，他在我们工具栏中的这个地方啊，这边快一键呢是 f 键， 我们用画框的方式再次去控制一下啊，这些矩形的一个编组处理，首先呢我们还是去框选所有的矩形，选中所有矩形之后添加我们福瑞蒙的快捷键呢，是 ctrl alt 键加 g， 那这边啊， ctrl alt 键加 g 添加成功之后，他的图标呢就是一个井字形，井字形代表的就是画框的这个意思，取消画框的快捷键呢是 ctrl 键加 shift 键 加 g 啊，这个呢是一样的啊，那么在飞马里面呢，他是给设计师呢提供了两个切换模式，就是这个东西呢，他既可以是组啊，也可以呢是 free。 那怎么去切换呢？选中了之后呢，看一下在我们右侧啊这边 点击之后就可以给他切换画框，或者说分组，分组就是普普通通的组，画框就是画框啊，两者之间是可以进行一个互相的切换的。 那么在画框里面有哪些常用设置呢？当我呢去把画框的大小缩小时，你会发现整体也在缩小来，这是什么原因呢？是因为我们在工具栏中现在用的还是缩放工具，我们给它调成移动工具，然后再给它进行缩放，这 时候你会发现啊，画框他自己就单独进行移动了，他就不管里面的这个内容了，对不对？好了，那我给他移动到这里的时候， 注意看他的属性中有个命令叫裁剪内容，我们勾选裁剪内容，这样的话呢，他就会将超出他范围以外的东西进行隐藏。 那么我们在做 ui 界面时啊，其实会用到很多很多这种结构的啊，就外面的这个地方给他隐藏，有点像蒙版的这种感觉。就是啊 啊，这是第一个啊，常用的一个设置叫裁剪内容，那么第二个的话呢，我先把裁剪内容呢先给他关闭掉， 我还是双击进入到这个画框里面，进去之后呢，我给他移动一下位置。好，那移动位置之后呢，我们再点出去再 点一下，那你会发现呢子及位置的变化并不会去影响负极周边长度宽度的这个变化，他呢是不会影响的啊，就是福音吗？就是福音那里面东西，就是里面东西啊，那我现在的话呢，我只是照着你， 但是呢你想怎么动，那这是你的自由啊，你想你自己再怎么动也不会去影响到我自己的一个这种感觉，对吧？这是他跟组之间的一个这个区别， 我们再给这个 frem 呢去添加填充，添加这个填充啊，刚刚如果说是组的状态的话，我们一加填充是不是整个颜色全都变了？ 好，我们来看一下呢，你要给 frem 添加这个底色，首先这是白色，那你发现呢画面上这些矩形并没有变成白色，我们 点击啊给他变一个别的颜色。好，那你会发现什么呢？他就相当于啊把这个画面的底色你给他做了一下。哎，这就很有意思了啊，他不像这个组去改变举行内部的颜色，而是呢他把他自己当成了一个造型， 你可以给他设置填充，也可以给他设置描边，都是可以的，这就是跟组很大的这个点不同，在这边啊，我们也能看到他的一些这个区别， 然后我们再去缩小一下啊，在这里的话呢，画框呢，他还有一个非常新颖的一个功能啊，就是我们画框他是可以的去嵌套画框啊，这句话怎么去理解呢？ 你比如说我现在整个的画板，他就是一个 frame， 就是一个 frame， 那 frame 里面呢还可以继续去嵌套很 很多很多的水，就他可以一直无限的去进行这个潜逃。那我上面的话呢是提前准备好了一些山歌，山歌的话呢，我们在做后台页面的时候啊，会用到这个，你看我这边也设置了一下弹性布局，自动的去进行这个试配。 那我就可以呢把这个水，把这个东西呢直接给他拖拽到这里来，拖拽进去之后呢，他就会自动的进行融合， 那我们怎么去判断他如何成功？看到左上角他没有文字，如果说是单独的飞母的话呢，他的左上角这边啊会有这个文字内容，要是欠套进去的话呢，他就会消失，消失不见， 那这个地方我也可以继续让他进行签套来签到他这种形式。那签套成功之后呢， 我们就可以去对他的大小进行控制，那我现在先把他的大小呢先调节一下， 调好之后呢，我用最外面的这个 frem 呢，对里面两个小的 frem 进行这个移动看他也会去影响到他，这就是这就是我们 frem 一跟组另外一个不同点啊，像组的话呢，他是根本不具备这种功能性的啊。 在欠套的过程中的话呢，分享大家一个技巧啊，我先给他拿出去，拿出去之后呢听清楚啊， 我们这里呢在去进行移动的时候，可能啊他不会进去，那如何让他强制潜逃？强制潜逃啊，就百分百他会潜逃进去。移动过程中呢，我们按住 ctrl 键，按住 ctrl 键，这样的话呢就一定会进 入这个潜逃过程，好松手就完事了。那如果说呢，我这里再去移动的时候，我只是经过了 这个画板，并不想让他欠套进去，但我只是路过，但是我不想这个成为你的这个自己，那怎么办呢？那你只需要呢，在移动的过程中按住空格键，就我先让他动起来，这时候呢按住空格键， 哎，这时候你会发现呢，他就不会说嵌套到我们里面的这个 frem 里面去。所以一共有两个方式啊，强制件套按住 ctrl 键，然后不需要强制嵌套的话呢，就是按住空格键就可以了。 接下来呢我们来总结一下这部分学习的知识点。首先呢是关于组编组的开件呢是 ctrl 键加 j 取消编组， ctrl shift 加 j 可以配合移动工具，按住 shift 键是加选，再按一次呢是减选。当我们组的子级元素调整边界或者移动位置的时候，那么外面组的边界他的大小也会随之调节， 其实这个组呢，他就相当于啊，这个批量移动工具，他是不具备这种高级属性的。如果说你想让一堆物体啊可以支持批量移动，那就编个组，其实就这样子就可以了啊，他没有些其他的这个属性了啊。什么情况下呢？要使用组， 你想对整个组调整大小的同时，也能够去影响子集的这个大小缩放，哎，那就可以使用这个组，并且呢你想对多个元素 批量进行移动，那你就直接 ctrl 加 j 建一个小组就可以了。而第二个 frem 的话呢，也叫画框， 那他添加画框的快捷键是 ctrl alt 键加 g， 取消画框呢是 ctrl 键加 shift 键加 g。 在右侧的属性栏中是可以切换两个状态的，画框和组之间是可以互相进行切换，勾选裁剪内容之后，超出画框的部分将不再显示。 花框呢，是我们在去做弹性布局时必备的一个事情，尤其是我们在去完成一些后台界面操作的时候啊，都会用到花框去做，那么紫元素呢，在负极里面变化的时候，他是不会去有什么改变的。 强制欠套的快捷键，在移动过程中按住 ctrl 键，不需要强制欠套的话呢，我们要在移动过程中按住空格键就可以了。那么什么情况下呢，会使用规模这个东 东西呢？第一点，你的项目需要弹性布局，也就是说你要做后台，做后台的话呢，会用到这个东西，然后我们做一些 ui 页面呢，其实也会用到的啊，就是以后呢，我们再去进行编组的时候，其实我们默认是可以呢，先给他做成这个 frame 啊，其次才是做成这个组。 第二点就是你想对超出范围的内容进行裁剪，也超出了那个范围框，你想给他剪掉，那就可以去使用这个 frem。 第三点呢就是你想让多个这个福瑞姆之间进行这种嵌套，比如说啊，一个福瑞姆里面嵌套的两到三个或者四到五个， 那这种需求的话呢，也是首选用 fame 这种方案去做就可以了。

菲格玛已经战胜 sky， 坐稳全球 ui 设计第一工具的宝座。先看两张图，全球范围下，菲格马已经远超 sky， 而中国在二零二零年初，菲格马稳步战胜 sky。 数据告诉我们，如果你不会菲格马，你未来可能找不到工作。嗨，今天想跟大家聊一下，菲格马为什么比 sky 更加出色？ 这个马可以在任何系统中使用，因为他是继续浏览器的，并且可以支持打开 styat 文件，完美帮 sky 用户过渡到这个马。而相比之下， style 只能在麦克中工作， 只能说菲克玛野心不小。在一个工具属性的软件中加入了社交属性，大家可以在上面分享各种资源。前两天我竟然看到有人在上面分享作品集，当然还包括必不可少的插件，资源数量庞大，我也会一一帮大家筛选出来比较好用的插件。相比之下， sky 显得星光暗淡。当我还是一个资深 家庭用户时，各种交接是很让人头疼的一个问题。对于飞哥马，说实话，这个功能其实很微妙，毕竟通常作为一个设计师，自己在做设计时不希望被别人所监视。但 但是对于需要配合协同时，不管是对接其他设计师还是 pm 还是开发效率上， stex 是远远不能与菲克玛抗衡的。相信以上三点已经足够能证明菲菲马比斯盖茨优秀。如果你已深入了解这两款软件，并且是不同观点，欢迎评论区留言。 有关两者对比，还可以从流畅度、稳定性、网络环境、功能操作等等展开去说，在这就不过多叙述了，更多的细节关注我慢慢跟你说。

接下来我们介绍一下 figma 的基础操作，也是分为三个部分，界面布局，工具栏的介绍以及凹 to layout 的介绍。我们打开 figm 新建一个文件， 可以看到飞马的界面跟大部分的设计软件的布局都是类似的，主要分为四个部分，分别是顶部的工具栏，左侧的图层和资产，右侧的一些参数和属性，以及中间区域的视图操作区域。 工具栏的部分我们重点需要掌握的几个就好了，分别是移动工具，第二个是 freem 画框，然后是矩形工具，最后一个是文字工具。 我们看一下 frame 画框，其实它就相当于 sketch 里的 artboard。 我们可以用键盘上的 a 键来创建一个 frame， 当我们点击键盘上的 a 键的时候，右边已经提供了很多 多预设。同学们在做设计的时候，有时候不知道用什么尺寸，其实飞个马已经给我们提供了非常多的预设，那比如我们创建一个移动端的界面，直接选择一个，比如说 iphone 十四，单击一下就可以创建好了。同样你也可以按键盘上的 a 键，然后拖动鼠标去创建一个画布。 创建好之后，我们看一下右边的一些属性，比如横向纵向的布局，下面 x， y 是 freem 的坐标位置， wh 是表示宽度和高度，下面是 freem 的旋转以及圆角， 点击右侧的小方块，可以分别对四个圆角进行参数的设置。下面这个 clip content 是啥意思呢？它默认是勾选的。我们在 frame 里创建一个矩形， 你会发现这个矩形的实际大小是这个蓝框这么大，但是多出来的部分没有显示出来，如果我们把这个 freem 的这个 clip content 这个对号去掉 啊，这个时候这个矩形就可以完整的显示出来了。那同时这个矩形其实还是在这个 freem 的画板里面的，只不过这个勾是控制了这个画板内容的区域的显示。 再往下是 auto laot， 这部分我们放在后面讲，再继续往下看是图层，这里边有一些叠加模式，这部分和 ps 是一个概念，这部分其实我们很少使用，就不用管。 下面这个 few 是颜色的填充，比如说我们可以改成一个黑灰色，然后这个 stroke 是一个描边，比如说我们可以增加一个白色的红色吧，增加一个红色 做的十个像素的一个描边。在下面是 effects 效果，点击一下这边的加号， 这里边可以有一些效果可以添加，比如说内阴影啊，阴影图层模糊以及背景模糊，然后我们选择一个之后，然后点击这边的小太阳，可以对这里边的参数进行一些设置，这个大家试一下就知道了。 那最后一个是导出啊，也是点击右面的加号，那导出的话，我们可以选择导出图层的这个大小，比如说一倍的，一点，五倍的以及二倍的大小，那右边可以选择不同的格式，然后点击这个导出按钮，就可以导出一个这个对应的一个文件。 ok， 那右边就是整个 freem 的一些参数和属性的设置，我们再看一下矩形工具，按键盘上的 r 键，或者点击这个图标就可以创建一个矩形，我们可以把鼠标 放在这个矩形的右边箭头下，点击一下，可以看到这里有不同的形状可以创建，比如说现行箭头，圆圈啊，三角形，还有这个星星以及导入图片等等。 选中这个矩形我们看一下右边的一些参数，其实这一部分跟我们刚才看到的 freem 的一些参数和属性几乎都是一致的，这里面也没有什么太多可讲的。最后我们看一下文字工具，选择文字工具或者按键盘上的 t 键，然后在屏幕里单击一下，我们输入一段文字， 选择字体，我们重点看一下这里，比如这里边我们可以切换一下字体，比如我们切换一下平方，可以直接在这里边输入平方 s c， 然后下面可以切换不同的字重，右边是字号，比如说我们改个 一百二，在下面是行高字间距以及段落的间距，这部分大家自己试一下就知道了。 在下面这三组属性是针对于这个文字的外框的设置，比如说第一个外框会随着我们实际内容的宽度而进行变化。 第二个缩进外框宽度之后，文字也会进行缩进，但是文字折叠了，增高了一行，同时外框的高度也进行了变化，外框会随着内容的高度而变化。 第三个就是我可以随意的更改这个外框的轮廓，里边的内容也会跟着外框进行调整。那下面几个就是文字的一些对齐关系，比如说居中对 鞋居右，然后以及针对于这个文字框的顶对齐，居中对齐以及底对齐，这个大家试一下就知道了。那这个是改变文字的颜色，比如我们换个蓝色， 下面也可以给字体增加一个描边，比如说这个加一个黑描边，我们给一个三个像素的一个描边。 ok， 那这部分就是文字工具的介绍。

飞马免费插件 hcx sox 一键生成组件规范文档，你还在手动整理组件设计规范文档吗？试试 a to shift 这个免费的飞马插件吧！选中你制作的组件实力， 然后点击运行，就可以自动生成列举元素、概述属性和变体以及标注的文档。这个插件会便利和提取组件的结构和属性，并将其自动整理为文档。主要包含了结构分拣、属性、变体、布局和间距的内容。 只要提前并列好组建的属性和命名，剩下的交给他就可以啦。不要再让手动整理文档成为你的负担，使用 age set 四 bix 插件， 体验快速高效的设计工作吧！