figma中手机模板插件怎么用

ok， 今天给大家分享一期 figma 做的这种设计图， ui 设计图如何上传到蓝狐啊？嗯，首先我们要下载蓝狐插件， 看一下蓝狐插件，打开蓝狐官网，我们在右上角下载，里面有一个 飞哥把插件下载，然后往下滑，我们不不用下载这个词，有话直接下载这个 s a a s 这个插件，这个压缩包，然后我们下载，下载到指定位置，随便找个 e 盘或者 d 盘。 呃，我们把把它解压，就是解压以后的解压以后的这个我们在那个，我是用的那种。呃，那个那个 app app 的 flag 吗？ 我们把它插件安装一下，在右键插件 development 里面有一个。呃，这个 import， import 什么什么什么， 然后我们选中，就是选中刚才解压那个文件 s 尾缀 s a a s 这个，然后这样子 选中以后打开，打开以后我们把那个插件加载完成了，然后说一下切图备注的问题啊，比如说我想切这个背景，是吧？ 嗯，切这个背景我们在这个命名上面尽量用英文，比如说我们是这种图片或 img 图片， bg 是 背景，或者是 b t n 是 按钮或者那个 icon icu n， 然后斜杠后面加一些那种， 呃，数字啊或者字母尽量不要重复。我们切图的话，这就相当于 ps 里面那个切图嘛。切图我们直接选中右面，然后预览，对吧？导出，一开始这样的，点一下导出， 然后这就出来了，然后点一下预览，然后什么就不用管了，你可以看一下效果。 然后比如说我们做了一个，我们在那个飞格玛里画了一个，对吧？比如说我们画了一个这个边框， 我们想把这个，比如说这这个跟这个，我们想把它合在一起，这俩合在一起，我们按住 shift 选中它俩， 按住 shift 选中它俩。右键，我们可以呃添加画框或者是那个什么，呃添加画框嘛？添加画框，然后我们给画框命名一个 frame， frame， 然后英文的下斜杠，我随便命名一个，对吧？我们同理在这个导出里面点一下，导出预览，然后它俩就合在一起了， 返回一下吧，我现在不需要， 不需要让他跟他俩切在一起，是让这个框跟这个黑色边框文字切在一起的。然后我们上传的话，就是打开刚才的蓝狐插件嘛 device， 然后蓝狐 我选择一下倍数，比如说看我们这个是，我们这个是三七五，宽是三七五，对吧？ ios， 这应该是 ios 十二，苹果十二的界面 三七五，然后如果你有别的什么幺零八零，可以选择这个三倍图，是吧？我们选 ios 一 倍，然后点上传它，这个上传非常快，上传基本一会就好了， 看一下上传完成了。如果说你要上传多个，比如说你，你想，你想上传全部，你可以选全部，对吧？如果选选单个，你可以按住 shift， 然后选上面的某一个， 然后我们打开蓝图看一下， 对吧？这切好了，看一下，切好了， 然后这个开发就可以在这边下载它，这个蓝狐也有自动备注什么的，可以下载三倍图，还有那个 svj， svj 也可以下载 它，这个好处是比 p 他 们有的那个有，有的 app 开发它要那个 svj， 呃，我们用那个 ps 的 蓝狐插电是下载不了 svg 的， 对吧？然后我们这个时候就可以用飞格玛插电下载那个 svg， 就 导出 svg， ok。

hello， 大家好，今天给大家带来的是 cloud code to figma 的 视频教程，在使用之前我们需要安装好 cloud 教育版或付费版的 figma， 这两项都准备好后，我们就开始今天的视频教程吧。 首先启动 cloud， 我 这里用的是终端，在 ide 中使用 cloud 模型也是可以的， 等待 figma 安装成功。安装成功后继续安装 figma 插件， 因为我这里已经安装过了，所以显示的是已经安装。 安装完成后，重启 cloud， 输入 plujin 并切换到 install， 查看是否有 figma remote m c p 这里因为我还没有重启，所以没有看到， 这样我们的基础配置就完成了。接下来我们让 cloud 帮我们做一个网页，最近刷到了 crock 的 官网，觉得很好看，所以想尝试一下 cloud 能不能复刻出来， 很明显效果不太好，不过没关系，我们换一种风格，重新调整 经过修改后的界面，看起来至少能用了。 接下来我们打开 figma， 创建一个新的设计文件， 这里要注意一定要打开分享链接的编辑权限，不然 cloud 是 无法在 figma 中写入文件的。权限设置完成后，复制这个文件的。链接在 cloud 中输入，将当前网页发送到 figma 中，并粘贴刚刚复制的 figma 链接， 这样我们就在 figma 中得到了设计稿，此时我们可以对设计稿进行修改。 修改完成后，我们右键画板名称选择复制到链接， 在 cloud 中输入，按照链接更新页面样式加复制的 figma 画板链接 刷新页面。恭喜你成功完成了 cloud code to figma 的 最小闭环。

菲特曼怎么用插件？首先菲特曼原声插件调用比较麻烦，所以今天推荐一款插件管理插件 facma ex， 这里我们可以看到飞哥们 s 的网页，下载方法很简单，这里就不坠树了。安装完成以后，我们打开飞哥吗？这里会出现一条插件栏，需要哪个点击哪个就可以，这里会显示你当前所有已安装插件，相比较原声插件库会方便很多。关注我更多飞哥吗知识持续更新！

之前分享了一期在飞格玛中预览三 d 文件的视频，有朋友反馈插件不太稳定，并且不能做什么交互效果，那本期给大家介绍一个能做出这种三 d 可交互界面的思路。首先我们先准备一组手办的图片，在 nero 四 d 里选择涂声三 d 功能，直接把这个图片拖进去，不需要任何提示词， 不到九十秒它就能生成非常精细的手办模型。我还特意测试了它的精细度，试了这个凤凰还有雄鹰这种高难度的模型，它们的精细度也是直接拉满，那是因为 nero 四 d 最新的二点五模型采用了全新的贴图算法，同时进一步优化了几何生成效率，使得三 d 模型生成首次突破一百万透坑，而且它也能生成最高二零四八分辨率的模型。 no 四 d 的 二 o 功能还支持文字图片多模态输入，用自然语言就可以让它来创建和修改模型。 ok！ 模型的不同动作都生成好之后，下载 g r b 格式，我们来飞马中排好的界面里摆放出大概位置，然后用飞马 to d r 这个插件复制设计稿到 d r 中， 选择三 d 工具创建个矩形，上传我们的 g r b 模型，然后拖动下面的时间轴，会看到不同屏幕滚动时的显示区域，我们就可以在时间轴上创建关键帧来改变模型以及其他元素的视角、位置、大小等参数。最终我们就能得到类似这样的三 d 交互页面了。

平安六年了，谁还不知道这八个节省生命？飞度码插件还在 ps 抠图，导入 figma remove bg 加 bg rap， 一 键抠图，大屏换色还一个个改 quick use 全局换色一秒搞定 figma 动效还要 ae 重做， mini 直接导出动图为图转屎量还在描 twix 一 键自动转矢量调色还要切去 ps 一 键滤镜插件原地搞定。做样机还带 ps 贴 perspective transform， 一 键贴图模型不能动，安尼玛直接导入三 d 模型做交互！这八个插件每个都能让你效率翻倍！使用步骤加安装教程全都整理成文档了！需要的宝子三零后评论区自取，关注我，解锁更多 ai 加 ui 技巧，主页还有更多 ui 提效教程！

今天跟大家分享一个很实用的 sigma 插件，它可以直接把 sigma 设计导出成可编辑的 ppt。 打开插件，选中你要导出的画板，然后点击 export pptx 按钮， 它就会自动开始处理，我们稍等几秒钟就可以 好了，它自动下载到本地，我们打开看一下效果。 排盐度很在线，所有元素都能直接修改，不用再手动重新排版，能省不少功夫， 大家可以去试试。

今天给大家推荐的是一款我们的老朋友 megan， 他 最近更新了 nano banana 二大模型，并且新增了超多实用预设， 接下来让我们来试试这些新预设吧！ 是不是非常有趣，快来试试吧！

哈喽，大家好，这两天做了一款飞哥买的插件，为什么叫他万能插件？因为他借助了这个 gps 的能力，能把你的任何想法变成现实。然后接下来我为大家演示一下，比如说我现在想做一个这个登录的窗口，然后大概随便先换一下，给他一个这个输入用户名的地方，然后再给他一个密码，然后再来一个按钮，给他一个绿色的，然后我来标记一下这边是 用户名，然后这稍微调大点，好，下面是密码，然后再下面是登录的按钮，然后给他一个大一点颜色。 好，接下来的话我们就可以把这个插件打开，这个插件里面应该在社区搜不到，因为还没有上架。我们选中我们想生成的，直接点按钮，然后要稍微等待一下， 好，他这边的话就已经生成好了。那答案，这个啊，可能我们的画的有点差别，这个后期会持续去改进，但是的话这边其实是已经可以交互了，包括我们去输入，哎，你看密码他自动会举报你， 包括这个按钮。点击好，这边是一个简单的演示，然后接下来的话我再做一个稍微难一点，复杂一点的，比如说我这边想让他做一个这个生成图片的一个这个插件，那么我去先打开去改一改啊，比如说这边我想让他去输入输入文字，然后就能去找到对应的图片，然后生成在对应的地方，比如说这边生成在这个地方图片， 然后我们去给他标记一下。嗯，我想图片生成在这，然后我给他大概的去标记一下这个图片的位置，然后好图片生成在这个地方，全是给他改起来有点突兀了。现在好，这边的话就是搜索图片， 搜索图片这边就是钥匙按钮。 好，这边是一个手刷油，给他加个倒角区分一下。好的，然后的话接下来我们就是把这个描述一下，就是我大概想让他做成个什么样子，然后这段话我提前已经打好了，我就直接粘贴。 就是说当我去输入这个文本的时候，那你需要在这个地方去显示生成相应的一个和文本对应的一个图片，然后把这个描述大概写一写好，完了之后的话我们就可以再去生成了，选中之后点这个按钮， 好的，这边的话就已经生成了，然后我们来测试一下，比如说我想搜索一只小狗的图片，然后的话这边就出现了一只小狗的图片。啊，这个图片，然后我再试一下，搜索一个小猫，试一下，哎，这边就生成小猫咪的图片。

hello， 最近有个非常火的工具 pencil 与 cloud 合作，号称用嘴出设计稿替代 figma。 今天我们来实际体验一下到底怎么样。首先在 vscode 中选择插件，这里我使用的 curser， 在 插件中输入 pencil， 点击安装。 安装完成后一般会自动选择到 pencil， 并自动创建一个新的拼文件。没有自动打开也没关系，我们手动选择一下就好了。这时会出现一个弹窗，输入邮箱并填写验证码。 这时候我们就进入到 pencil m c p 是 否生效，理论上是会自动安装，我们可以右键 pencil， 点击设置，查看 pencil m c p 支持的模型。 还有一种方式是直接让 ai 来帮你确认，如果没安装的话，就让 ai 来帮你安装。这里测试过后发现 cloud 相对比较可靠。 好， cloud 已经帮我们确认好， pencil m c p 已经安装完成了。下面我们让 cloud 帮我们在 pencil 中画一个网页。 ok， 现在 pencil 画布中已经出现了一个网页，但是明显有一些小问题，我们手动修改一下。 在设计稿上没有什么问题后，我们让 ai 把设计稿变成代码吧。 好了，网页已经生成好了，我们一起来看一下 总结，还原度非常高，基本可以达到百分之一百，对非设计人员来说超级友好。但对设计工作者来说，首先是 pencil 界面功能相对较少，其次生态不如 fake 码。不过可以肯定，这一定是未来用嘴做项目的正确方向。

那如果说你也在使用斐格马，并且在工作中遇到一些特别低效的瞬间，不妨也设计一个插件来解决自己的问题。接下来给大家演示一下使用的效果。 当我选择一个设计稿，点击插件，然后他就可以很轻松的生成新尺寸的设计稿，那对于工作中需要适配不同尺寸的设计师来说，简直是超级提升工作效率了。那今天我就给大家分享一下，我 作为一个完全不会编程的设计师，是如何一个人用 ai 干出来一个可以运行的项目。首先第一件事情，找一张纸，把这个产品需要哪些功能罗列出来，大概思考一下每个功能之间的关系是什么样子。 在后续的开发过程当中，如果说它的功能是相对独立的，你也可以和我一样，让 ai 一个一个的来开发，那这样子对于 ai 的 理解难度会更低。然后打开 cloud， 在 让 ai 写代码之前，我们可以先跟 ai 讨论一下它预期会如何实现这个功能。 那把刚刚罗列的功能发送给他，让他去思考实现的方式和方法。呃，到了这一步，整个项目就会大概有一个雏形， 那这一步我们最好是让 ai 去输出一个 svg 的 流程图，来检查一下它的实现逻辑是否合理，功能是否完整。然后再让 ai 开始写代码，否则 ai 会在实现的过程当中 y y 很多不存在的功能，后面我们想要再修改就很难了。 如果在开发过程当中遇到报错也很简单，直接把这个错误代码截图发送给可让他检查问题。如果是不知道报错在哪里查看，我会直接问他，比如说我不知道如何查看飞格马的控制台，那我就会让他告诉我我应该如何来找到错误， 就这样循环往复，基本上就可以把错误解决得七七八八了。以及在开发的过程当中，我发现一个非常好用的 mcp， 让 cloud 去安装 talk to figa 的 这个 mcp 安装方式也很简单，直接在 github 上搜索这个插件名称，找到评分最高的，然后直接把这个页面的 link 发送给 ai， 让它自己进行安装。 安装好 m c p 以后， ai 就 可以直接控制你的飞个马来作画那手搓。这个项目大概花了我两个月的时间，基本上就是下班的时候进行一些代码的开发工作，总共是叠加了三个版本，因为我也是第一次开发插件，没有经验，所以 踩了很多的坑。接下来我也可以分享一下我在开发过程当中遇到的问题，以及总结出来的经验。那如果大家对这期内容感兴趣的话，也可以在评论区多多留言互动， 那接下来几个月我会分享更多 ai 在 我工作当中的实践方法，如果大家对这些话题感兴趣的话，记得点赞关注，我们下期再见！拜拜！

哈喽，大家好，我是草帽 slot 终于来了，这是一个我们几乎所有人只要你用主键就一定会用到的功能。 不说别的，就我陆陆续续 slot 教学就做了四期，只不过这四个都是小老虎的 slot 插件，那现在官方终于也上了，他的文档还有官方的视频我都看过了，所以这期就是 slot 的 专项教学。 这个功能刚上啊，如果你还没有，不用着急，官方说是一周内分批发放，然后使用资格是所有用户，所以免费版都能用 啊，注意，这功能现在是测试版，因为刚上嘛，那个，那我这个教学里面版本也是，后续难免会有些改动，但是我觉得大改不会有他只能说是对之前的功能一些完善啊，或者新增一些功能。我们先简单看一下这个功能啊，官方这个演示， 这个功能大概是在组件里面，我们都知道原始组件拉出去，他是不能再改什么数量啊位置啊，但是这个东西，你看那个粉红色的框，就是在你的组件里面划一个区域，就是一个 frame 定位， slot 就 能在这个里面进行随便的改动，就跟外面的普通层一样，你想打文字加东西画图都行， 这个就是 slot。 那 么，哎，这是一反例啊，反例是你看他这里是以前的做法， 如果单纯是因为数量上的不同，你看见没有，就是一个穷举的笨方法，非常的不优雅， 仅仅为了数量的不同，你看要建多少个？这么大的一个组建机完全没有必要。现在有了 slot， 其实就是干这个事，就是精简我们的组建库，但本质上还提升我们的使用效率，所以他第一个解决的刚需点就是 我们的那个重复项，这不典型的吗？是不是我们如果想把这个左侧栏整个做成固定组件的话，这是那个萨克斯人做的，你看我不说别的啊，我把它这个东西点开，你看见没有？这是啥？ 这是啥？是不是？哎，这以前我们不得不这样做，没办法，现在有了 slot， 一 会啊，我们最后是把这个东西给它 优化一下，用最新的 slot 看看能有什么改善，以前只能搞这种隐藏的对不对？再有就是多形态的一些切换，你像以前我们做，大家不知道有没有见过这种啊，就这种还是算是先进了，搁搁以前来说， 虽然没功能，但是我们能手动规划一个区域是 slot， 然后呢？它这个东西怎么用？我给大家演示一下以前的啊， 他说他是一个 slop 的 功能。好，这这个块是你需要手动的，在这边自己换知道吧？哎，你去找。哎，你看这么多左肩裤，他就很大了。哦，那，那我要换哪个呢？ 对不对？你得对这个很了解，你还知道你换哪个？我都不知道，那等于说你得返回来，或者要么自己搜，要么自己点点，你看你要加啥，就以前很麻烦。好了，那我们这就开始啊，大家在社区搜他这个名字，或者呢，我把链接放到视频的简介里， 这边我也打开，我们从头开始，这次可以看到他这个练习文件啊，非常少的内容 啊，而且它这个功能确实简单，我们理解就行。来，第一个这块是说的啥啊？ 这是这个 slot 功能的一个正统用法。这什正统是什么意思？就像前面说的，我们去解决这个重复项啊，简化组件库那些都是它顺带的好处，就类似于解决了一些以前的痛点， 但是这个他不一样，这个实际是你看他是由这一个卡片能变出这么多东西，搁以前 我们条件反射的就得把这些全部变成组建集，对不对？变成变体吗？给他们框一块。但是现在不需要创建组建集了， 我们只需要把这个内容的不同的部分看见没有内容去给他，你都做出来就行了。看见吗？你看我画的，我，可我也没乱画，因为这个里面能随便改数量，所以说我画一个就行了。那你加一个组件，你想弄好多，你就用 copy 地无限复制，能加好多好多号， 所以说一定意义上还是精简了很多的。这些组建足够小，拆的足够细的话，其实它们的附用度又会增加一些，在其他地方也能用，但不重要啊，这个反正 slot 只要能帮助我们，它就是好的。第二行上来就是创建 slot。 呃，我来拿这个例子，大家一块，我把所有细节都给大家讲了。创建的话呢， style 的 第一个知识点是必须在组建里面才能创建，所以这是一个普通层是不行的，我们先把它变成组建， 变成组建之后我们都知道组建是不能让你啊，我改位置啊，改数量啊，都不行，拖动都都别想啊，没有那么包括我们去 给它放进来啊，你放不进来的，看见没有就没进来，不可能的。所以说现在得弄 slot 创建的第一个方法，注意， slot 其实本质上是一种特殊的 frame， 那 也就说它需要创建一个 frame， 然后右键 这有一个转换为 slide， 点一下看见没有，他就一个粉色的框，你在外面就能去添加。组建也好，还是你从外面拽啊，你去打点字，你放个图片 都可以，就是我说的就是他是一个自由的区域，那么回来啊，我们把这个框拉大点，继续 啊，还是得 frame， 对 吧？ frame， 那 第二个创建方法是在这里点加号，注意，这个加号它是有一个快捷键的，是 shift command s， 但是不建议大家记啊，这玩意使用频率不高， 创建这里面可填写描述啊，创建就行了，两个了，对吧？但其实他那个方法你也可以提前去在这个复元素上，这里看见没有创建个 slug， 而且你注意这是啥呀？ 这几个都是组建属性啊，也就是 slug 是 组建属性的一种，再加一个， 哎，但是你注意这里有感叹号啊，你这里我们是从复原上去加的，他相当于是加了一个空的，他没有指定， 大家能不能明白呢？那我们想用这个，他不是空的吗？对，去找一个空的 frame， 你 再去这里点加号啊，只要是有空的，他都会在这个里面列出来你，你选择就行了。这是这算是两种方法啊，两种方法，还有第三种是什么呢？ 呃，我说了它只能通过 frame 去创建，对吧？但是你看我这个画的是形状，它右键就没有那个 slug， 它这里这个叫包裹，所以这是第三种方法。这是什么场景用的啊？比如说我在组件里面，我不是想加吗， 然后有图片啊，有圆啊什么的，哎，我可以批量选择一堆不是 frame 的 东西。其实是也行了，只要你批量选择右键这个，这个功能叫包裹一个新的 slot 层，就跟那个创建凹槽的很像，跟你外面包一层 哎，所以它也是。这算是第三种方法。然后我们创建完的 slot 呢？在外面啊，作为磁组键的话，呃，就可以用了，它这里点加号是这样的。 呃，我们是可以加一些这个小零寸的，不过你点加号，它这里是加的组建，然后这个，这这个 sl 本身啊，注意 看到没有，它不是 freem 吗？一样的， freem 是 能普通的 freem。 这叫奥拓莱奥的竖排啊，往下这叫奥拓莱奥的横排，你注意这里的变化，我们看这个吧，是吧。竖排，横排，当然横排的那个换行它也能用， 但点不点无所谓，你知道就行。只有第四个，这个叫网格奥托莱奥特，不能在 slot 上使用，它官方文档写的是目前不能，不知道以后行不行。但是大家注意啊，我们加好的这个 slot 呀，你在子组键上 改不了的，看见吗？只有原始组建才能去改，这个也挺好，所以其实这个 slot 我 们正常用的话还是很依赖这个加号的。我们能想到的方法，一个是从这里是吧，那个 alt 加一加二加二到直接搜咔往里一拽也行， 要么是扭，不是组键啊，是吧，你字什么往里，你是拽也行，但其实我们真正会落地的方法是要弄预设像的。哎，我把这些全删了，我们这几个，呃，没用的都删了，我们留一个啊， 然后你像这个刚才说了，我们可以让它凹槽，然后顶满，对吧？然后这个框本身其实高度也可以让它哈 简洁，对吧？那比如这个是你同事拉出来的，哎，他不知道这个打开之后要加哪些内容，可能他大概知道，但是也要找半天。所以说最好的方案是我们要在这个里面看见没有 slot 能再次编辑。或者你第一次创建的时候，这里 是能给他一些预设选项的，比如这里由于他例子不多，我给这个 就行了，那这样的话至少他点，再点这个加号，他就是，哎，这是你预设的一些，可能是一个，可能是好多个，他起码知道 啊，加完之后你再双击，嘎嘎嘎嘎，你看具体是什么插件啊？有的需要复制多项，有的就一个就够，对不对？所以然后全选他这个。你看我们这个本身给成凹槽聊的，但是加上加进来的东西呢？是不是他不是 feel 的？ 我不知道为啥。 所以你可以手动改一下啊。对，包括你看没有，这里我们刚才没改，这是间距，看你想给几，然后我给零，然后按着，对不对？就这个意思，所以这都可以再改，这个挺方便的。在圆的组间里面啊， 那刚才这个算是预设，像是第一层，还有一层呢，是你这个内容是空的，你要不要预设一些东西呢？对吧？比如他这个文件里面，哎，我们可以直接把这个东西丢进来，还是这个拉满， 这算是预设内容，比如别人拉出来用了，哦，这里大概他是一个列表，所以这是两个东西，一个是预设内容，一个是预设像。不过官方也说了啊，这个预设内容呢，你是默认有还是默认无？无所谓，没有对错 啊，看你自己觉得哪个合适，甚至呢，我们可以在这个里面。呃，我举个例子，比如说这叫抬头二 白色，我们可以把这个东西你丢进来，对吧？你丢进来之后，比如说我想让他们几个，你再咔奥特莱奥特一层，你看我层级 是吧？我取消直接 shift a 再包个层也没问题，然后再去原主键或者哪重新调一下间距就总之这个 slot 里面很自由，你想让它规整也可以啊。说到这个，就是小老虎的插件啊，功能其实更完善，官方只能说目前还很简单， 小老虎这一块他多一个什么呢？他能做黑白名单，比如说我们现在不是什么玩意都能往里丢吗？那跟垃圾场一样，那小老虎可以限制，比如说我把这个文字做成一个黑名单，那这个时候你文字再往里丢，你是丢不进来的，你丢进来就会把你踢出去。 官方这块还没有相当于是一个筛选这个功能的场景，可能在于你们团队太大了，那你也不知道你的同事拉出来会往里面塞什么东西。我们一定程度上还是希望有一些约束的，因为官方现在的版本确实是什么都能往里丢，如果对方愿意的话， 他画一个 frame 啊，我可以丢进去啊，他在这里，在这里面去画个插画也行。好了，然后我们再继续说啊，这个功能贼简单，下面就要说关于这个 重置了，先说重置吧，比如这个里面我也弄几个这个重置，我们选到具体的框，然后呢？右上角看见没有？这有个 resetsloud， 这个功能是把你当前这个 sloud。 呃，重置为原人组件默认的状态， 比如原原人组件默认就有一个这个列表，它也有一个，然后后退一下，还有一个功能， 你会发现这有一个删除内容，这俩都是 slug 相关的。这个删除内容呢，是把里面的内容删干净，看见没有，连连默认那个也没了，这是很简单的两个小功能， 当然你会发现还有第三个 reset instance， 这是重置子组键，这个老早就有的功能，老功能啊，再来就说删除，删除比较关键，你要你知道就行，他有这个规则什么呢？ 我缩小一点，注意这仨啊。如果我们把 slide 也删除了，怎么删啊？右键一个，你看这叫转换为 frame， 那 就是不要 slide 了，点一下 你会发现之前应用过的子组键全部恢复为默认状态了，这是它现在的一个规则，一定要注意。所以当你想重置为是吧，取消 slide 的 时候，要看看会不会影响你之前的设计稿。 后退一下，那么再一个抽那个什么的方法是？呃呃，不是，这里在这啊，你可以你看，比如这几个空的，我先删了，那剩一个，这个 也能删，一样的结果，然后两个删除的地方，然后呢，再给大家扩展一个组建集里面的一些操作啊，比如我复制一个，我要弄很多三个八一块变成变体吗？这里 就这个，里面什么操作，就我想批量给他们都加上 slot。 呃，主监级有个老功能叫 q， 就是 进入批量编辑状态，因为主监级我们通常是这个同类内容操作多，所以你按下 q， 它会同时操作，就是命名要一样， 图层结构啊，它的层级要一样，它这样就会自动地批量选中，所以这个时候，比如说我们想一块在哪加个 slot， 所以 就啊，在这个 q 的 模式里面批量选择右键， 这也可以算是这样操作。然后呢，这按 q 的 时候，这下面有一个批量编辑的模式，再按 q 就 退出了，这是关于变体的批量编辑。好了，这个功能介绍我们到这就讲完了，如果你觉得你学会了，那就完事了啊，下面我来给大家整这个 啊，案例的实操，这是我从萨特 c n 那 儿拽的，呃，就说这个能变成左边这几个都可以，那比如这个， 哎啊嘿，这加号，哎啊，比如这内容区，内容区本身，然后呢，改成 fill 定满，下面再加一个按钮， 按钮也要这样弄一下，不知道这个后面它会不会修复。关于这个卡片啊，我这里有一个知识点，给大家讲一下细节啊，这是，呃，上次官方按以前的方法做的，但是它规划这个 slot 的 层级是没错的。我现在有一个什么问题呢？ 大家看看这个标题，这有一个带按钮的，这一个不带按钮的，哎，但它标题为为什么没有做成 slot， 标题也有变化呀，这个时候就需要大家想清楚，就算有变化，我们也追求一个最优解吧。什么意思？ 这个按钮本身它只是一个显示或者不显示，它就能做成一个组建属性，没必要再框一个什么 slot 弄了，大家懂这意思吗？哪个简单弄哪个？所以我们现在来实操一下。这是我把那个提前拿出来了，先把这个，这是标题啊，顶上那个做成组建， 然后我画那个卡片，对吧？这个丢进来，然后这是 slot 的 框，呃，算是那种框吧，我们先变成组件啊，这大框的变成组件好了，然后它就能变成 slot 了， nice 啊。再来一个是放这个底下的这块，这个东西呢，也能直接 slot 啊， slot 之后大家知道 slot 是 能在它，因为它是特殊的 frame， 对 吧？所以你能随便的再加什么描边啊？这个那个的，对不对？我我吸一下它的颜色， 稍微再深点，对吧？然后作为层级我得规划，比如这个，你看他嘛能不能看到，所以说加一描边，然后只要上， 然后这个 slot 他 他跟这个他们都是这个带这个大面具的，看见没有？所以他俩归为一层，所以奥特莱德框一个，框一个，之后我们开始走奥特莱德了，一块儿奥特莱德 撬回车，让里面所有内容全部横向 fill， 然后一定要注意这些细节啊。斐克曼，现在你多选给奥特莱奥特之后啊，他会智能判断一些东西是不是要绝对定位， 所以这个都给加上了，那明显我这不需要，所以把这取消就可以了，然后他呢，也是顶满，而且这个层注意我们也要，就是最好是你建 sl 的 时候就想清楚了，他要不要给奥导聊的，还是说给一个固定的？ 固定不是完全没用，固定是可以用布局约束去在这里去控制它的一些变化，但一般我们不用，因为 ui 嘛， ui 都是 有一些逻辑在的，当然这没用，我删掉。呃，看一下，但这个奥导料的间距稍微大点，然后看看复元素，这太大了，给个零， 然后呢？这个二十四对不对？这几四个边就出来了，差不多了，这个呢，你一定要注意，也是 out 了的，间距是什么？看你了，想给啥 四个边零对不对？那这样一个空的你是做好了，但是里面没内容是吧？你一点就全进到一个所有的组建里面了，所以我们还要预设一些来这时候给他预设。 嗯，我弄好了，在 car 的 里面这个内容区，对，就这个。那这样的话，你看你在外面再去点一点，对吧？就到这了。哎，他这个每次都要这样老忘，而且 这个不对啊，我没给奥多拉多吗？没给啊，没给，忘给了，这个时候 对吧？ fill， 然后这儿忘调了。什么零啊，对不对？完美对齐。那底下这个就更简单了， 预设一下那个，看你福特有有没有想规划固定的内容，提前把组建做好对不对？你这样这边再点就一定是福特，但是我跟你说啊，它现在这里面我觉得算是 bug， 或者它这个体验没做好， 我们这个都做完了，但我们如果想切换呢？就是你要看我内容区啊，这是书框，这是纯文本，这是图片，对不对？正常我们拉着他是一个变体吗？你能这样这样切对不对？ 可是我们在首先最外面你切不了，你需要进进看见吗？就进到那个层本身才能跟这去切，我觉得这算是一种不太方便的地方，也就说这个切换啊，他没法往外暴露， 我看一下，没有那个选项，这个暴露怎么讲呢？我就跟大家说一下，就这个咱就拿它说事，这个东西本身是能做一个组建属性，让它显示或者不显示的，所以说我们这里比如默认我不显示啊，所以这这这个起个名 action button 好 了， 然后这个时候你在这个外面还是切不了，它需要暴露一下，所以在这原主键你点加号，看见没有？这个这是暴露一下，你把这一选是吧？抬头的这个组键一勾，这会你在外面 懂了吗？就这个功能，你正常的组键这么做没问题。哎，可是你像这种 slot 里面的 没法弄，你非要弄，怎么弄啊？你只能说提前啊，把这个东西这个好像也不行，你把它这个预设内容也也放进去，我看有没有啊？ 啊？这个有，那你那你得提前放一下，提前把内容放进来才能设，你这样的话，哎， 哎，这样的话也没有吗？啊，有有有，在这呢看见吗？这也算能切能算是一种暴露吧， 这就看你组建是不是太丰富了，简单点，这样还好，如果很丰富呢？不同的呢？然后默认我们把按钮也丢进来，哎，这就不用让用户再重新弄了，所以至少这样我们弄一下，能通过这切切好多 某些东西，也能再这样去改。还行，这就是比较正常的一个用法， 整体很简单，对不对？这然后我们看第二个案例吧，这个案例就是解决重复项的，而且这个重复项很多，按我的理解，我还挺想把一个菜单栏，是吧，横向的还是竖项的，做成整个的附件， 这样我们大大方方的拿出去服用，而且现在有了 slot 更需要这样做了。首先我给大家规划一下啊， 你看到没有，这是一个大块，这个大块是有这个小标题的，也就这是一个一组菜单， 这是第二组菜单，那么有二肯定有三，可能有四，对不对？你看不同的页面什么需求，所以这个地方是需要用 slot 去做变化的，对不对？那外面都有了，这具体的小菜单更不用说了吧。然后二级菜单肯定也需要做数量变化吧，对不对？ 这就很爽，但但是你看以前就只能没办法啊，以前的功能限制，哎呦我天呐，你看你只能通过显隐藏去做，现在不需要了，不过这个案例就需要 slot 套 slot 了，我来教大家怎么套啊，先往大了梳理，比如现在我们能确定 是不是这个大块是需要多个的，我们先把大块弄了，这个就叫大块吧。 大块啊，或者直接先我先改成组建啊，先创建 slot 的 时候，可它就叫大块，嗯，没错，然后再做大块的组建是吧？就这个东西就把字拉出来，然后大块里面是有具体的 这个菜单的，我先把这个菜单丢进来，再丢一个好了，直接奥拓了的，零 奥拓了的好了，变成组件啊，就这个块是要丢到那个 slot 里面的哎， 而且这个 slot 本身要给成 auto 来 auto， 为啥？因为它一定是发生数量上的变化的，我们肯定得需要嘛， 这样的话，我们在用的时候，比如这个里面的块啊，一二三，对吧？顺便把这个间距对不对？那这个间距小点 是这意思吧。好了，下一步是不要让这个内容，这个菜单也要能发生变化。 那那个菜单发生变化，那很明显是，那正好是三十六这个对吧？右键也行，跟这点也行。这个叫一级菜单，其实你也没必要再加个 slot 的 名字，因为本身用颜色已经区分了嘛。哎， 怎么俩字呢？好了，我们再试一下啊，来看这个里面的，走呀， come on the d 啊，不行呢，我都收起来啊，再来， 这个就是它的 bug 啊，其实这个 bug 我 之前试过了，我装一下这个怎么解决啊？你在这个图层列表里面，你手动的按着 alt 键去拖一个复制，看见没有？它是不是加了？ 这里面确实加了，就这个时候你再按 ctrl 键是能无限往下加的，然后这个位置上没发生变化，我看看啊，可能是啊，这个是凹透料的，这也是凹透料的，一层一层检查 这块是没问题的。哎，有问题，这个高度啊，这高度没哈格，哎，这不是一下就行了吗？然后二级菜单，大家是不是以为我还是要再再再再弄个框套一下？仔细想想好像不用了， 我们只需要把这个给它做成一个组建就行了，这是它的线哎，直接给它。呃，凹槽料的，只是左侧单独需要，懂我意思吧？就这样。然后呢，给它变成组建 二级菜单好了，我们只需要把这个东西给它加到这个 slot 里面就可以了啊，加上一个预设像， 嗯，二级菜单就行了，不用让它显示出来，所以你看我们这个做的真的很好，你正常拉出来，我拉这个 是吧，我大块走三个大块，三个大块之后想弄里面对不对点，这儿预设像出来了，这个时候你可能会说，他他他他他，对吧？我想加第一个咋办？你别忘了这整个就是 sloshed， 所以 说我们可以奈不奈斯好不好？ 这思路不就打开了吗？所以这个小案例也说明，有了 slide 之后得再灵活一点，也就是以前固定的一些做法，可以因为 slide 更简化一些，没必要再追求那么死板。好了，到这呢，我，我的案例也讲完了，我们整个就讲完了啊，这还有官方的一些 我忘说了。没事，反正就是你看他他他这块弄了一个 slot， 那 作为一个底部往上的一个弹出框，你就能做各种各样的变化。 总的来说， slot 让我们的组件库更加的灵活和简洁。那就是以上，我会把所有的相关的链接都放到视频的简介里，我是草帽，我们下期再见。