figma教程ui设计教程怎么删除
粉丝3629获赞4.6万
相关视频
05:03查看AI文稿AI文稿很多小伙伴都不知道具体切图的一个流程，那今天拿这个飞马举例来给大家实际操作一下切图。 比如说在这个页面当中呢，我们首先要知道需要切图的地方大概有哪些，比如说像这种图标类型的，还有这个功能区的他这个图标，然后包括下巴的这种右转的这种按钮，特殊的这种字体， 还有下边这个小喇叭的位置，都是需要切图的。那具体应该怎么来操作呢？首先比如说我们已经做好了这么一个图图标，然后我把他的背景都设置在六十乘六十，那么意思就说这个层级所有的 他的这个图标呢，他都是六十乘六十的，包括这边我们看一下他都是一个六十乘六十的，然后具体怎么做呢？时间 这个图标拆开是这样的，我们把它啊取消编组，取消编组之后呢，大家看到其实它是有一点点这样的去画出来的，然后我在最底端给他加了一个六十乘六十透明的一个底，然后我把它整个在康川这群组 巡组后。之后呢，在这个部位置点击他在这个位置有一个导出选项，这样看得清楚一点。导出之后呢，我们点击一下导出，然后呢他就会出来一个一倍图 pnj， 如果我们点击下边这个按钮的话，他会直接下载到你的电脑上， 然后桶里，比如说这两个图标我是想要切出来的，那我们去选中他，然后再进行导出，然后包括说功能器这些图标都是需要切图的，那我们也是 是同样的导出，选中之后，导出之后呢，实际上他这个图就已经是切好了，然后后期呢我们在蓝湖的这个官网上下载蓝湖的这个插件，我们双击他，然后找到蓝湖这个页面之后呢，我们点击这个画板， 他这块就会自动显示，显示之后呢我们再选择我们要上传的这个项目组， 然后还有是项目组中的其中的这个分类，这块也可以选择一个二百图还是一百图，我这个做的文件呢，我是用二百图来做的，所以我这个时候要选择二叉， 然后进行上传，他就直接就上传到我们蓝湖的这个页面，然后我们的技术小哥哥就可以直接的去下载使用了。是关于切图这块，真的是很简单，就是需要选中他之后呢点击导出，然后 就可以一键导出了。但是像这个图标这个部分一定要注意一些，就是他必须要是等比大小，比如我们最开始做的这个图标，可能有的比较长，有的比较宽，一定要去给他统一尺寸，这样的话技术小哥哥在写的时候，他会 比较容易对其他像的这么一个行距，你的这个 icon 的统一性也会相对说比较好。 这个码中除了这个导出，还有另外一个切图的方式，就是在这个位置，大家看一下，看一下这个切片 s， 他的这个切图呢就类似于 ps 中的这个切图原理， 他就是多用于那种详情类型的，我的这个详情可能很长，我不需要切到十张或者是八张的这种图，那么我们点击一下这个七图，我们就可以给他进行区 范围的这种切图，然后这种切图他在导出的时候，我们是需要这样导出的。你看假如说我选择到别的情况下，然后我们点击下切图的这个框框，他在我们的图层里边他其实是有显示的，然后呢在这个地方依然还是摁导出， 然后我们可以预览一下，他把我们整个上半部分的这个图全部都已经切成一张图片，然后在这个地方其实大家看可以切成 pnz， 可以填成勾 pgsvjpdf， 我们一般情况下都会切成 pnz， 这就是基本上关于切图上的一点小知识。 外的话，就是我之前有给你们讲过，就是我们可能会把图标重要的常规高频与的这些图标都放到一个按钮图标的一个组件库，那这个组件库大概长什么样子呢？就比如说我在飞马中建一个比较大一点 这种画板，那我把基本上图标全部都放在这里面，然后放在这里面之后呢，大家都看一下，这所有的这个图标全部都是已经切出来切好的。然后 其实这个我这个牌子是稍微有点乱，其实我们这个地方应该有标题，比如说啊首页功能去图标，或者说啊首页底部菜单图标等等，还有就是个人中心图标都会给他写的相对说比较清楚。这样的话就是技术小哥哥在 一个页面里面就可以把我们所有用到的高频的这些图标都下载下来，是比较方便的。其实方法跟我之前讲的是一样的， 他也是一张画板，只是我把它总结到这一张画板里面，这样的话就是方便于我们的技术小哥哥下载之后呢？他在根据每个页面的这个行距啊、间距啊这项，然后再通过代码给他写出来，你学会了吗？
911躺平小诗姐
24:46查看AI文稿AI文稿figma config 二零二六已经告一段落了，那这次 figma 又更新了很多的新功能，其中大家最感兴趣的就是 shader 和 figma motion， 那 这个 motion 它到底该怎么使用？它和别的 ae 或者 rev 的 动效工具又有什么样的区别？这些制作好的动效又如何去对接开发对接 ai？ 那 这期视频我就带大家一次性搞明白。那我们现在开始， 现在我们已经打开了一个 figma 的 文件，那可以看到下方之前是三个的模式，现在已经变成了四个，加入了 motion， 那 我们选中它就可以进入 motion 的 模式。 在 motion 模式中可以看到下方出现了一个巨大的时间轴区域，而右侧呢，就变成了 motion 的 这样的检查器。 当我们选中某一个元素之后，可以看到这里和我们默认的设计模式中的检查器是有些许不一样的，比如说你会发现所有的图标都变成了这种表示动态的图标，但是位置还是大差不差的。在这里新增了一个锚点工具， 之前我们设计模式中也是可以去选择锚点工具，但是它并没有给我们一个真正的图标来让我们选择，我们只能按 option 加 r 这样去选择它的锚点的位置。而现在呢，在动效模式中，它就直接给我们摆出来了， 就像这样点击就可以调出来。好，那首先大家要知道的是，每一个画板都可以在内部去制作，他自己的动效导出也是基于画板来导出的，那在右侧我们还可以看到所有的有这种棱形小标记的， 他就是添加关键帧，那点击他就可以在我们时间轴上加一个关键帧，大家也可以通过这个标记来方便的去观察哪些属性可以去制作动效，哪些属性不能制作动效。 好，那现在我们再看下方，默认这里是没有任何的元素的，当我们对某一个元素添加了动画之后，下方就会出现对应的元素，比如说这里我们直接添加一个预设的动画，可以看到他帮我们已经预设了一个从左到右移动的动效， 现在就出现了这个头像这一条图层，那下方就是他修改的数值，这一点和 jitter 或者别的动效工具是一样的，那有了动效之后，我们就可以按空格或者点击左上方的这个播放按钮去播放预览，那在右侧第二个，这里是一个 切换自动关键帧，快捷键是 shift 加 k。 现在我们先理解一下 figma 的 打关键帧的逻辑是什么，它其实和其他的多效工具是一样的，比如说我们要制作这个图形从左到右移动，就像刚才一样，那我们需要在 末尾的位置，比如说五百毫秒的时候打上一个位置的关键帧，然后我们再回到零毫秒的时候去把关键帧的位置改成零，这样我们就可以 制作一个从零到二十八的位移。但是这样打关键针岂不是比较麻烦？那如果我们开启了自动关键针的话，我们就会让这个行动变得简单一些，比如说这里我还调成五百， 现在我是将它的角度从零度变成三百六十度，那我如果在这里直接输入三百六十度，就可以看到他前边会自动帮我们创建一个初十，状态 是零度，现在他就可以这样旋转的过来了。也就是说自动关键针指的是我们想好我们 接下来要动的动画，而他会自动在之前的位置打上一个初始关键针，然后在结束的位置打上一个 我们设定好的值。也就说自动关键帧的话，他就不需要让你去管之前的状态，之前的那个值的状态就是他之前的默认数值，而之后设置的状态就是你当前位置的状态。 我们再举一个例子，比如说他的宽度，那现在默认是五十六的宽度，那如果在五百毫秒的时候，我想让他变成一百的宽度，这个时候我不需要先去回头把它设成五十，然后再回来设成 一百，我只需要在这里直接把它设成一百，可以看到他左侧就已经默认帮我们打上了之前的五十，就像这样，如果我想继续往后去制作，我也可以直接在这里去改成两百， 像这样，这样我们打起关键针来就很方便了。好，那我们先把它给关掉，我们把这里边所有的动效也都删掉， 看到之后你会看到我们一开始是不是点了一个添加预设关键针，而这个的动效他跟我们刚才制作是不一样的。我来给大家再打一个不透明度的动效，在这里打一个零，我们打一个关键针，到五百毫秒的时候我们打上一个一百， 现在我这是我们自己手动打的关键帧，而这是刚刚系统为我们自动创建的预设的动画，他们的区别就是这里他有个名称，他就是预设的动画，而这里是我们自动打的关键帧， 那预设这里边可以看到这里还没有这个调节器，那是因为这个东西其实是飞哥马木目前已经给我们设置好的一些现成的模板， 我们可以在右侧看到这下面这一行就有一个动画，那么点开这个熟悉的图标，就可以看到这里面是已经预设好的很多的动画，比如说这里有些基础的动画，以及啊进入的动画，还有循环动画或者退出的动画， 让我们为下一个文字来随便选一个，比如说我们选一个进入的动画，我们来一个比较慢的上升动画， 好可以看到他一下帮我们加入了很多很多的动画，而这些动画依然是预设的动画，你看他里面出现了五个，而这五个我们再仔细观察一下，其实是上面的这个基础，也就是说下方的这些高级的预设是从上面的基础预设叠加而来的， 我们把它挪到前边去。我们先来播放一下这个动画是什么，可以看到从这飘上来了， 让我们再来看一下每一个单独的动画他是怎么设置的，我们点开这个位置，可以看到他这里有一个类型是 slide， 就是 滑入，滑出，还有自定义， 自定义你就可以去设置他的 x y 是 从哪里起始到哪里结束，相差多久的时间，用什么样的差值曲线。我们先改回 size， 第二个他同样是 size， 距离是三十，那这个缩放可以看到这里面的类型刚刚又不一样了，那我们再看旋转 也不一样，那这里的透明度的名称也不一样，也就是说这里是 figma 给我们做的很方便的预设，而下方是预设去叠加出来的特效预设。如果我们想做一个 从左侧滑到右侧，或者从下方滑到上方，那我们就不需要在这直接去打关键针，我们只需要在这里给它添加一个预设的位置变化，在这里选择 select e。 从，比如说我们要从下往上走，那我们就可以选择从下方 距离大概一百的位置，一百一的多了五十的位置经过多久的延迟，比如说这里我们可以写经过两百毫秒的延迟，这样他就会自动帮我们把前面的 时间给空出来，这个是持续时间还是五百毫秒，下边我们选择一个插值动画，现在我们再来预览一下，先播放了前边的动画， 然后播放了这个动画。所以如果你要做一些简单动画，其实用这个是比较方便的，在这里用反而不太方便，那现在我们把这些都删掉，我们一起来把它给做好。好，现在比如说我现在我想让他做一个依次出现的动效， 伴随着不透明度以及延迟的这样的一个动画，那我们就可以分别给他们添加动画。比如第一个我们就可以给它添加一个 glide， 这个 glide 它的位置应该是朝下， 这样就对了，那这个我想把它的数值复制过去，我们就可以选中它，然后右键复制， 再选中我们的这一个右键，在这里选择粘贴动画，这样我们就把同样的动画给粘贴进来了，那我们要给它一个延时，我们就可以往后拖在这里，我们可以一起给它调到一百，现在我们再来播放。 好，那我们同样的我们可以给下边几个都加上去，像这一行，这一行，这一行以及这一行，我们一起来右键来粘贴动画，同样的我们选中这里，这里可以给一个两百毫米，那这里就是 三百毫米，一起选中这里是四百毫米，那最后一个这里按 command 可以 多选，按 shift 也是一样，这里就是五百毫米。好， 现在就可以看到我们的动画就这样依次出现了，现在你会发现我的动画他一直在不停的播放，其实是因为这里有一个播放模式，现在是循环播放，所以他就会不停的播放，当我们点击之后就变成了只播放一次，再次点击就变成了 来回播放，就是先过去再回来，我们可以看一下，看现在是进来出去，这个效果又叫做乒乓动画，就像乒乓球一样。 那么我们再往左侧看，这里显示的是当前的时间点，而这里是我们的整体动画的时间，那现在我们看一下，我们一共用了一千一百秒的一 千一百毫秒的时间，那我们就可以把中点也改成一千一百毫秒，这样我们播放完之后，正好到这里结束。好再看右边这里，如果你觉得这里太大了，那我们可以通过右侧去调整它的缩放， 那如果你觉得整体画板下面也太大了，你就可以在这里去调节它的高度，当然你也可以快速的在这里去切换，把它缩小， 然后放大好右侧这些预设的部分其实我们也是可以自己去组合的，比如现在你可能觉得位置和不透明度还不够，想再加一个 旋转，你就可以在这里选中它右侧点击加号就可以又添加一个新的，而这个新的里面呢，你就可以从这里去挑了， 是吧？好，那我们删掉它，当你这里的动画变多了之后，你就可以通过点这个按钮把它一键收起，这样就很清晰了，你可以直接在这里拖拽，也可以调节它的节奏。那你刚才应该还会发现这里其实还有一个智慧的路径， 那为什么现在没法用呢？因为我们现在选的是一个头像，它不是一个路径，那这个东西它其实只能路径来用。比如说现在我们可以用这个画笔工具来到这里画一条线， 那画完了之后呢，我们现在就可以在这里看到了点击加号，这个路径现在是可以选择了。选中之后呢，我们可以看到它同样的有几种模式，这个是绘画模式，也是出现，那第二个就是擦除，第三个是这个叫旅行，其实也可以理解成循环， 我们然后还有自定义，自定义的话就是什么方向，是否裁剪头部或者尾部，其实就是我们在别的动效工具中经常用的那个剪切路径，只是被飞马封装了一下，比如我们用第一个抓我们来播放一下，就可以看到他这样一笔笔画出来了， 那同样的，其实我们下边我们不用它，我们把它删掉，在下边这里也是可以看到这里有修剪路径的。如果我们把一开始的位置去打一个零的关键针，然后到五百左右改成一百， 我们来播放一下，也是这样画出来的，所以它其实原理是一样的。那我们这个动画做好之后怎么导出呢？我们可以在这里来到右侧往下滑之前呢导出的位置 现在多了一个 tab 叫动画，那动画里面你就可以去选择你要的格式，然后尺寸也可以放大一下，因为适量的吗？怎么放大都可以，包括质量。然后帧率都选完之后，你就可以点击这个导出， 点击导出之后很多伙伴反应找不到下载的位置，其实可能是因为你的网络问题，他会在这里新建出一个 tab， 然后在这里去渲染。渲染完之后呢，你可以在这里看到一个下载按钮，并且它会自动帮你弹出，然后你点保存就可以了。那现在我们把整体的操作流程都给过了一遍，接下来我们要讲一下 figma motion 和 figma 自己本身相关的一些 内容。首先大家可以观察一下，我这个卡片全部都是使用自动布局来制作的，但是我们在制作动画的时候完全没有意识到这点对不对，推广这点我觉得做的还是挺好的，你可以使用自动布局去快速布局，但是在做动画的时候有非常高的灵活度， 这个跟 rev 是 不太一样， rev 的 话需要每一个地方再给它包一个布局，然后在布局内部去做动画，我觉得是没有 figma 这个处理的好的好，那么 figma 里边还有几个好用的，比如说组建对吧？组建变量 agent， 开发模式，全民 cp， 原型交互，还有一个 shader。 好， 那我们把这些东西一个一个来讲，那么你在网上的时候可能已经看到了很多大神他们做出来的那个动效非常的酷炫，其实就是因为这个 shader， 其实飞马自己本身就测的这些属性并不多， 但是呢，因为他加了一个特效，哎，特效里边有一个 c 的， 比如说我们选中这个头像吧，然后在这里有一个 c 的 c 的， 我们里边加一个这个，在这里你就可以看到有很多很多飞马励志的，有很多的特效，然后这些特效的数值啊， 比如我们选这个半调，哎，你可以看这里面的数值，你把它做成动效，那看起来就很酷炫了，对吧？ 但其实这个他并不是专门为了这个动效而生的，在你啊默认的设计模式中也是可以去使用这个功能的，你可以在这里去调节这些参数。好，那我们第二个就是组建， 那我们做 u i 的 时候，其实经常会遇到这个组建功能嘛，那这个动效能不能在组建中去使用呢？完全可以，我们在这里给他打一个组建，然后在这边去调用这个组建。 我们再回来动画模式中，你会发现它这里变成了一条完整的时间线，然后播放一样的，可以去查看，这太多了，我们把它改成单词播放吧。 因为有了这个组建的功能啊，所以我们可以甚至做一个大的，然后把它全部丢进去，然后复制，复制，复制，在这里加一个自动布局，然后复制、复制、复制、复制这几个，比如说这样好，然后现在我们再进入动画模式，你可以把它们一起按全部播放 啊，这就就很好玩了啊。那通过这个大家可以想到什么应用场景，哎，你比如说 open ai， 它的那个图标，就是那个，搜一下像这个 open ai 的 这个图标，是吧？那比如说现在还有别的各种 ai 也都基本上长这个样子，你比如说这个样子的， 或者像这个玩意，那这些图标他，你看他都是有规律的。那如果说我们把一个东西做出来，然后把它复制一份放旁边旋转一下，到这来，我们回到这里边做，然后你把它多复制几个，多旋转几下， 然后再一起播放，是吧？那他就能这么，哎，一起运动。那你如果再给他做一些那种特别的花环，比如这是一根线，就这东西把这个一坐，这一坐，那整体他就能转起来了，他就能甚至制作一个这样的动效。比如说现在我直接给大家试一下， 我们先回到设计模式，然后画一个这个，我们来做一个简单版，把它拉高九九九，然后我们给他拉高一点。好， 我们先给他做成一个组建，然后来到我们的这个绘画模式在这里呢来一个圈圈，我们把它的数量先不管，我们先间距先改小一点， 然后把它的填充给关掉，我们试一下，然后在动画模式里边，我们给这个路径做一个路径的绘画的话，哎，你看 怎么样？所以他费用好，就好在这几个模式他都是共通的，所以你就可以这么玩。但是在这里面你不能去编辑这个锚点了，我们要回到这里再去编辑一下，比如我在这里拉起来 啊，比如拉成这个样子，再加一点圆角啊，不错。但他这个其实跟我做这个组件没关系啊，因为他这个其实就是直接复制的，所以你直接就能用。嗯，这个好玩啊，不过你还可以给他做成横向的，横向的就大家一起长出来，是吧？ 好，那下一个东西就是变量，变量现在他多了几个，不知道大家有没有发现啊？你看这是我之前创建的，就是他在这里边多了两种，一个是时间，一个是差值。那这个时间其实就是我们刚才那种，呃，持续多久？延迟多久？ 然后这个叉值呢？就是运动曲线嘛，首先我们先选一个正常的 in and out。 好， 那现在我们给我们的这个动画，我们都给他，我们就加俩吧，我们就加前面这俩 名称跟这个，你看这里他就可以应用我们的这个变量了。比如说我把这个叉值都用上我们刚才设置的这个叉值，然后位置的叉值也一样 改成这个。哎，现在我们来播放一下，可以看到这两个现在是这个样子，但如果我们把这个变量给改掉，我们给他改改一个这样动动态的，那这里边的这个动态 直接就改掉了。所以你这样就很方便的去规划你们品牌的这个动效的节奏，而且到时候你可以一键去修改， 就很方便。那不要忘了大家这个变量它还可以设置这个不同的模式嘛，对吧？那我们可以在默认模式里边是一个样子，在这里你还可以去尝试更多的样子，比如说我们可以尝试一个 delete and back， 这样的话当你在这里新建一个滑板， 然后把它拖进来，然后给这个画板设置了模式的时候，你看现在就变成这个样子了，那么拖出去默认的时候是这个样子，但拖回来就变了。 好，那么接下来就是 agent， 飞马的 agent 呢？我这里暂时还没有体验上啊。就是如果你是制作动画的新手，那你就可以直接让 agent 帮你去打关键针，同样也可以帮你去学习如何制作动效， 如果你是老手的话，它可以帮你去解决很多重复性的工作。那接下来就是开发模式，我们可以来进入开发模式看一下。 打开开发模式，我们选中我们这个组建，那之前右侧这里是我们的那个代码片段，现在同样的有一个区域就是 motion 的 代码片段，那这里就可以看到 大概有几个层有哪些动画，然后你可以同样的把它导出为 react， 然后 css， 那 现在这两个好像还没有支持啊。然后你可以导成这种 json 格式也是可以的。 那如果开发看你这东西看的并不是很清楚，你可以让他直接点击这个东西，就可以打开一个时间轴式图，他在这里就可以清楚的看到到什么阶段运行了什么的动画。所以你现在做东西，你就不需要再给他写那样的交付文档，直接把这个东西，哎，他自己打开就能看。 那右边这个东西现在有很多很多的行，如果你想让开发清楚的看某一个是什么样的动效的话，那你选中谁，这边就变成了谁的参数，让我们点击这里就可以退回去。那刚才有一个东西忘讲了，就是当我们制作完一个动效的时候， 如果是我们自己打的关键针，在中间就可以有一个叉直的曲线在这里，你就点击之后右侧就进入叉直的选择器了，这里你就可以选择刚才系统预设的这些东西，然后也可以选择库里边就是你自己创建的， 这里就是我们刚才串的那个变量，点击就可以直接应用上去，那这里有小蓝底，你拖拽它可以直接格式化的调整，那在这里也是一样啊，那么现在你如果用 ai 去开发产品的话，之前他可以通过 m、 c、 p 来获取 布局参数， ai 就 可以更加方便的还原，现在有了动效他也可以获取到动效的参数，那这样你的 ai 来还原动效就会变得非常的精准了。 那最后一点就是我们讲这个原型交互之前飞马在这个填充里面支持了视频的时候，然后就有这么一个东西，就是我们连接过去之后，在中间这里，然后下面有一个动画，动画我们选择智能动画，下面就有一个播放运动动画， 其实就跟之前那个播放视频是一样的。好，那还有小技巧，如果你现在在设计模式，你想要快速的进入这个动效模式去做动效，你可以直接点击这个小图标， 就像我们之前把它标记成开发模式一样，我们可以直接点击这个小图标，他就直接进到这个动效模式里去了。但是这个只有在你做过动效的地方才会有这个快捷键，比如这个他没有做过动效，那你在这里是没有这个动效的快捷键的。 好，那讲到这里我们基本上把 figma motion 的 功能全都过了一遍，那现在你应该知道 figma motion 的 定位是什么，它其实是想让你能够快速方便的去把这个动效给做出来，做出来之后你就可以拿它去跟开发交流，或者去对接到 实际的落地。这它有两种使用方法，一种是你在这里直接制作好动效，就是比如说那种角色或者图标的动效，做完之后，你在这里直接导出成视频，或者导出成这个这幅图或者 c v g 动画之后，它们应该会支持 load， 你 就可以把它导出来之后直接用到项目里面，这是第一种用法。第二种用法就是对接开发，在这里制作好你的页面的交互动效，那么开发在这它就可以直接拿到这些参数， 他就知道你这东西是怎么运动的。那我们来对比一下他和 a 的 区别。 a e 其实他原本是用来做特效的，他并不是专门为 u i 动效而生的，所以你可以看到他很大很杂，我们用他来制作老铁动画之类的，也是通过插件 body movie 去把它做出来，是一个很重的东西。 那么 figma 的 这个动效是专门偏向于 ui 设计师制作动效，交互和对接是一个很清亮的动效工具。如果你要制作特别复杂的特效，那你可以通过 figma 这里边这个 shader 来制作，因为这个 shader 也可以通过 ai 来制作嘛。 也就是说接下来你要制作一些简单的动效，你完全可以在斐克曼里边去制作，不需要打开 ae 了，除非是很复杂的，那和 rap 的 区别又是什么呢？ rap 能用的工具比较基础，那像 rap 的 话， rap 它是一个 数据驱动动效的工具，你可以看到在这里它可以有多条时间轴，然后我们可以通过条件来控制在什么时候去调用不同的时间轴。 比如我在这里播放一下，这是默认的状态，那我们可以改成这样听歌的状态，我们改成听话的状态以及这样说话的状态，那并且可以通过这个参数来控制他的嘴型， 并且在制作的时候，你可以看到我这里边是有骨骼功能以及各种各样的约束，所以来制作起来是比较方便的。 那除此之外，我们还可以对它进行个直接性的交互，有这个案例，我们来播放一下，可以看到它可以跟随我的鼠标这样去摇晃，是吧？当我点击之后还可以去打枪，你看， 所以这个是很好玩的。然后刚才说的那个 figma 有 shader， shader 可以 做出各种各样的特效，但是 rev 它也有，并且比 figma 那 个要更加强大，它这里还支持三 d 各种东西，就是它这个脚本是非常非常好用的，非常好玩的。比如在这里简单的一个脚本，我就可以这样，你看， 哎，有这种很自然的反馈，并且 rev 所输出的任何东西都是可以直接拿到程序里去使用的，开发完全不需要重新去还原一遍，这就是 rev 跟 figma 最本质的区别。 figma 未来会不会去做多动化？会不会做动态机， 这个是我们目前无法去判断的，但至少目前来说飞鹰马那个还是比较清亮的，如果你想要做这种特别酷炫的动效，然后可以跟他去实时互动，去交互，那目前还是 rap 是 多一份，并且 rap 去制作动效的方式方法也越来越多样了，比如说像这种 骨骼呀，然后像事件呀，摇杆啊，或者它的脚本功能都是非常方便的。 figma 现在跟 rev 来比的话还是差得很远，但是如果你要做一些很简单的东西，那你用 figma 去制作是非常快的，因为你不需要导出，导出嘛， 这就是飞马东校目前在这个行业中的定位以及他适合的场景。以上就是我们这期视频的全部内容了，这里是三教十里，如果你觉得对你有帮助，能让你学到一些内容的话，欢迎给我一个点赞转发，也能给我一个关注是最好的，你们的支持是我更新的最大动力，那我们下期视频再见！拜拜！
244三秋十李Sergio
16:09查看AI文稿AI文稿大家好，我是六妹小艾文，本节课我们来学习一下飞格玛，在肯飞格二零二六发布的一个新的功能，飞格玛 motion， 那 之前我们在原型当中做的动效主要是需要用户操作触发的交互动效，现在 motion 模式里面呢，增加了时间轴和关键帧，让你在设计一些动态图形和演示动画的时候，可以直接在飞格玛当中完成，不需要再导出到 ae 里面去制作。 那在设计文件中呢，点击工具栏新增的这个图标就可以打开 motion， 现在还是一个测试版，如果看不到这个入口，可以更新一下版本。打开之后呢，能够看到下面多出了一个时间轴区域，那接下来呢，选择一个图形， 看到右侧边栏的属性设置相比于底站会有一些变化。首先是上面这里多了一个 animations， 它的作用呢是让我们能够使用 motion 提供的预设效果，快速的创建一些动效。这里有两个选项，一个是 animations， 还有一个是 add animation。 我 们先看一下右边这个，点击之后呢，它会给这个对象去自动的加上一个动效，默认的呢是这个位移的动效， 点击空格键就可以播放查看这个动效，然后就着这个动效，我们来看一下时间轴的部分，那时间轴呢，是用来控制动画起始时机，记录元素在某个时间点的属性状态，以及控制这个动画时长的一个轨道。 拖动这个部分呢，可以去改变这个窗口的大小，最右侧的这个折叠时间轴按钮可以去控制窗口的显隐， 然后拖动旁边的这个滑块是控制这个时间轴的缩放，那这个缩放呢，你也可以使用触控板，或者是按住 ctrl 键，用鼠标滚轮去缩放，或者是点加减号也可以。那这个怎么习惯怎么来？ 时间轴上的这个刻度呢，就代表着时长，然后它的默认单位呢，是毫秒拖动。这个游标可以在时间轴上选择当前的时间位置， 然后拖动。这一个部分啊，是调整整个动画的这个持续时长，但是它最小，不能够小于当前已经存在的这个动画的时长，就是最小，它就只能到这了。 然后时长也可以在左侧的这个部分啊，去进行精确的数值设置。左边的这个数值呢，就是游标的时间位置， 比如说输入一个三百，那他就是在这里，然后二百就跑到这里。右边的这个数值呢，就是控制这一个部分啊， 就是整个动画的时长设置，然后点击这个时间单位，它可以在毫秒和秒之间去切换。旁边的这个按钮呢，是可以改变动画的循环方式，这里有三种方式啊，分别是 loop， 就是 这样循环的播放，然后 play once， 单次播放，播放一次就停止。还有一个是乒乓啊，它就是来回这样反复的播放。 那这里呢，需要注意的是，你这个对象需要是在画框当中，它这个循环设置才能够生效，如果你是没有画框的话，就只有这样的一个对象， 你点这里，你怎么点也没用，它就是一个默认的 loop， 就 只有这一种方式。 呃，接下来左侧这两个按钮啊，一个是播放暂停，那这个我是很少用啊，我一般用这个空格键会更多一点，也比较方便。 旁边的这个按钮呢，叫做通过 autokeyframe 切换自动关键帧，那这个我们先留着，一会回来再讲。回到右侧边栏看这个 animations 这里，那当前这个是为移动化，然后点开之后，下面是它的一些设置，像首先这个 type 类型 slide in 这样的，然后 slide out 就 分别是这里有一个目标位置啊，然后它是移入还是移出的这样的一个区别，或者是自定义，那自定义呢，你就可以给它设置一些更具体的位置。 下面这里呢是设置移动的方向，比如说从左边或者是从右边以及移动的距离。 底下这一块呢，分别是延迟，持续时长和缓动曲线调整，这个延迟和持续时长的数值在底下这个时间轴的部分都会有体现。 缓动曲线我就不讲了，如果想详细了解的话，可以去看我的 figma 系列课。然后点左上角的这个 position 这里啊，可以去切换属性动画，这里面分别是位置缩放、旋转尺寸、不透明度和路径。 其他这些属性的设置项我就不一一介绍了，这个大家可以去自己试一下。 然后重点要说一下，底下的这个路径目前是智慧的，它的生效条件呢，是非闭合路径啊，有描边，而且这个描边的位置要是三特居中的，我们先切回到这个设计的模式啊，然后钢笔工具 画一个线，切回到 motion， 然后 animations 点这个加号，现在呢这个 pass 就是 可用的状态了。然后我们点一下，看一下这个效果， 基本上就等同于 ae 当中的这个修剪路径。 然后要注意一下我刚才说的这个路径动画的生效条件，比如说这个 position， 如果给它改成其他的 这个 pass 就是 一个智慧的状态，就不生效了， 给它改回来。 路径动画这里有四种类型，第一个照效果呢，就是把这个路径画出来，从无到有的一个过程，下面这个 direction 呢，它可以去改变这个绘质的方向。 然后第二个类型 erase， 它和前一个效果相反啊，这个是把已有的路径擦除的一个效果， 从有到无。 接下来第三个 travel 效果呢，它是显示一部分描边，然后让它沿着这个路径移动。 下面的 segment 设置，像是设置这个小线段的长度。 最后一个类型就是自定义，那它这里呢，是可以通过这个首帧和尾帧去更加详细的设置开始和结束的这个描边的长度。 然后 trim 这里呢，就跟我们刚才这个 type 是 类似的一个效果，这个大家去试一下， 可以去更详细的去控制里面的一些呃首尾帧的情况。 那这些呢，就是几种预设的属性动画，然后点这个加号，可以去给一个对象添加多个动画，比如说现在这个就是又有旋转，然后又有位移。 那有时候如果你对一个对象添加了很多的属性的话，时间轴这个部分就会影响观察，你可以点击这个按钮去让它收起和展开 那 animations 这里的这个小加号。说完我们来看旁边的这个 animations 按钮， 这个里面呢，它提供了更多的一些预设效果，然后它给这些效果呢分为了四组，分别是 basic 基础， enter 进入 cycle 循环和 exit 退出。第一组这个基础就是我们刚刚讲的加号里面的。然后其他呢就是稍微复杂一点的，前面的这个是预设效果的名称，然后后面这个 fast， medium 和 slow 是 表示这个动画速度的快慢。 那由于这个预设的效果非常多啊，所以我就简单的演示一下，然后大家可以自己去探索，比如说这个 job 就是 这样一个下落，然后有弹性的，这样的效果会更复杂一些啊，你看它还有不透明度的变化， 再换一个 这个 scoot 就是这种滑走的一个效果。 以上呢就是 animations 的 介绍，主要的作用呢就是让我们能够快速的创建一些预设的动态效果。那如果你想要创建更精细的动画，可以采用另外的一种方式。 在切换到这个 motion 之后呢，我们看到右侧边栏的这些属性设置的后面都会出现一个小菱形。 好了之后呢显示的是 add keyframe， 就是 添加关键帧，那所有属性后面带有这个添加关键帧图标的都可以去打关键帧，比如说不透明度啊，圆角颜色 以及像这个效果里面的一些参数都可以打关键帧。 下面呢我们来给这个形状加一些关键针。首先呢在时间轴这里啊，把这个油标调到零的位置，然后点位置后面的这个菱形给添加一个位置关键针，再给他添加一个旋转关键针， 然后油标给他移到一千的位置，这个时候呢，你就可以在这个右侧边栏这里去调数值， 它就形成了一个动画，或者是你在 结尾的部分，你直接拖动和在这个形状上面去操作也是可以的。 然后在时间轴上面点下这个连线，可以去调整缓动曲线， 然后我们看到在这个左侧这里啊会有一个小眼睛，它的作用呢是控制当前的这个属性动画是否生效。比如有的时候你在观察的时候，想要暂时的去掉某一个属性动画，你就可以点这里， 现在呢就是暂时的把这个位 移的动画给它隐藏，就这样， 那目前我们看到这个对象它的旋转呢，是以这个形状的中心点为锚点去旋转，如果你想要改变这个锚点的位置呢，就可以在右侧点击这个编辑锚点按钮， 调整这个锚点的位置，再看一下这个动画，现在呢它又是以这里作为锚点了，这个锚点的位置就不是这个对象的中心了。 然后在时间轴窗口呢有一个按钮是刚才我们没有说，就是这一个叫做 togo auto key freeming， 打开之后呢，我们在右侧边栏或者是在对象上面去调整属性的时候，它会自动地去打成首尾针，比如说这里面我们给它调整一下不透明度 调为零，然后这里呢就是自动给你打上了首尾针，看下效果，不透明度呢就有一个从百分之百到零的一个效果渐隐， 你如果不是自动关键针的话，你在这里调这个不透明度，就不会给你打上这个首尾针。那在这个动效完成之后，你可以在下面的这个 export 里面去进行导出， 这个要选择画框， figma 提供了 mp 四、 webm、 gif 和 svg 四种导出格式，然后下面这里呢可以调这个质量和帧率。最后呢，在交付研发的时候，研发同学可以在这个开发模式 点击这里就可以去查看这个动画， 以及按需要去切换不同形式的动效代码。 好的，那以上呢就是本视频的全部内容，如果对你有帮助，还请三连和关注，感谢支持！
842六边形Evan
00:37查看AI文稿AI文稿figma make 一 键生成 ui， 效率直接翻倍，三步搞定一整套 ui 界面，亲测好用！第一步，打开 figma， 点击右上角 make 图标，进入 ai 界面。第二步，上传参考图，粘贴你的设计框架或直接输入需求。 第三步，按下回车，等一小会就会生成一个带交互的 app 原型。 figma make 可以 点击这个按钮，将当前页面一键复制为可编辑的设计稿， 还能生成前端代码，设计开发无缝衔接。关注我，分享更多设计干货！
04:54查看AI文稿AI文稿figma 现在不只是画 u i， 它已经可以直接做动效了喽。大家好，今天我将以这个案例来跟大家介绍 figma motion 的 操作教程。首先我们打开 figma design 的 设计文件， 我已经把这一段动画所有要用到的元素都已经设置好了，我们点击右下角的 motion 的 入口，然后你就可以看到它可以在这段动画里面的属性。 首先我们给这个加号来加上一段动画，点击选择这个元素以后，我们来找到右边的 animation 的 入口，然后点击加号，这里有很多预制的动画，比如说 位置大小或者是旋转等等，那我这里要选择一个旋转，然后我们把角度改成三百六十度，我们来看一下效果，它的旋转就已经完成了。 然后你可以看到右边他有一个这样子的轴，这个轴呢代表的就是你这段动画的长度，比如说我总共可能预计我一千毫秒的一个长度，那这个蓝色的部分呢，代表的你所设置的当前的动画的一个长度了。 你可以在这里去修改你的轴的位置，好让你的动画能够吸附在这个轴上。比如说我打算这一段动画做六百毫秒，我就可以把这个关键帧定到六百毫秒，然后把这两个直接拖拽到六百的 位置，我们还需要给他去添加一个透明度的变化，我们可以用刚刚的预制动画去做，我们也可以用关键帧动画去做。 那在这里我给大家推荐一个功能，我们点了这个按钮以后，他就会自动的去判断你的哪一个关键针发生了变化，比如说第零秒的时候，他的透明度是一百， 然后呢我在最后一针的时候，想要把这个透明度改成零， 他就会把这一段的动画自动的制作出来，好，这个效果就做好了。那我们平时为了预览方便的话呢，就会在这里点击这个录，也就是循环的按钮，如果你只想要循环一次呢，也可以在这里去点击修改 现在创建的动画效果呢，可能会比较生硬，我们可以通过去修改关键帧里面的缓动缓出来，让他的这个效果变得更加生动一些。 那我们还可以通过点击这一条时间轴的线来调整它的曲线，来控制它缓动缓出的一个效果。 并且我们还可以在这里点击这个下拉的菜单，点击加号去创建一个我们预制的缓动缓出效果。 那这样子的话呢，你就可以在 variables 里面找到你设计的这一个效果，之后应用在别的元素上。那这个加号的动画我们做完了，我们来做一下已关注元素的这个动画， 我们先把它拖拽到它该在的位置，它其实跟上面的动画是一致的，我们直接复制上面的这一段动画，然后呢把它粘贴在已关注的这一个元素上， 他们的区别在于他的透明度应该是钢指的零透明度变到最后的一百的透明度，这样子才能够出现一个渐线的一个效果，我们来看一下，然后我们再把两个 元素的动画都播放一遍，这样子他就能够实现一个从未关注到已关注效果的一个转换了。 刚刚我们是通过手搓的方式实现了这个效果，我们也可以在 figma 里面使用 figma agent 来帮我们去实现动画的效果，但是因为我现在还没有被全量到这一个功能，所以暂时无法去体验。 另外 figma m c p 也可以识别现在的动画了，我们只需要点击这个画板以后点击右上角的按钮，然后选择 copy link， 再打开你的 figma agent， 给它发布命令，把这个动画插到你想要插入的地方，比如说你的网站里面，粘贴你的画板链接，我们可以看一下实现的效果， 可以直接把这个链接分享给你的开发，它打开了以后呢，右边就会出现这个 motion 的 模块，它可以在里面选择它对应的语言，然后直接复制这一段代码呢，就可以实现了。 那如果你想把这段动画导出其他的格式，只要点击右边的 export 的 按钮，然后选择你的格式和你的帧率以及它的高低，然后点击 export， 它就可以完成导出了。 飞格玛的六大更新，你还对哪一个感兴趣呢？可以在下面告诉我，我下一次就来出这个功能的教学视频。
137浪味仙女爱设计
00:32查看AI文稿AI文稿你们看这是我在网上找的一个参考图，这是我用 codex 为还原的 figure 文件，都是可编辑的，其实它的流程都非常的简单，你只需要把这张图片直接为 codex， 跟他说你要调用这个 u s q 帮你还原这个页面，最后给你输出一个完整的 html 网页，接着你就可以直接打开这个文件， 然后在 bug 码左侧这里的插件管理插件直接搜这个内容好了之后点这里的文件，把刚刚的文件直接拖拽过来，然后你就可以看到一个可编辑的 bug 码文件了，你就可以在这里进行图片以及文字上的修改。
768🎭朱脑壳(AI版）
01:07查看AI文稿AI文稿同学，别走一分钟，学会弹窗交互，先把所有的弹窗单独放在一边，选择一个按钮，直接连接到你想要的弹窗。在 action 这个位置，我们选择 open overlay， 把点击其他区域关闭，勾选上， 再给它添加一个 background， 在 效果这里我们选择一个溶解，点击预览我们当前页面可以看到，当我点击对应的按钮，它就会出现我们对应的弹窗，那这个时候我点击其他区域，这个弹窗是会关闭的，同时我需要点击这个按钮，让它也关闭，选择这个按钮 直接给它进行连线，连线，连线到这个位置 close overlay， 同时我们选择下面这个区域，给它连线，连到这个底部弹窗。底部弹窗呢，同样我们这里要选择一个 open overlay， 选择之后呢，勾选上，点击其他区域关闭，勾选上 background， 在 效果这里我们要选择默认，我们要选择向上滑动，同时这个按钮我们要给它设置一个返回。关闭。好，这个时候我们再去预览我们当前页面，点击它 就会从下滑上来，点击这里就会关闭，再点击其他区域也会关闭。好第三个功能弹窗，我们选择右上角这个按钮，我们给它进行连接，连接完之后， action 选择 open curly， 在 这里是点击其他区域关闭。在动作这里我们选择一个默认映，效果呢是一个左滑动，在 position 这个位置，我们直接选择一个手动，选择之后就会出现这样的一个选项，我们可以把它放在我们想让它出现的位置。预览当前页面，点击右上角，它就会从右侧滑出来，再点击它就会关闭。 ok， 你 学会了吗？
177猫Sir不吃鱼
01:16查看AI文稿AI文稿bigbang motion 的 实战来喽！我会从 shader 组建变量 agent 开发模式，本次五大更新进行讲解。首先是 shader， 很多炫酷的动画都是通过 shader 实现的，在描边模式下可添加 shader， 选择自己喜欢的样式， 之后添加动画效果，选择 pass， 得到这样的路径，动画 shader 也可以在效果中添加， 选择 web 并调整合适的数值，就能实现这种流体的效果。 第二个更新是动画可以变成主键子，主键同样继承副主键的动画。 第三个更新是谋生变体，支持设置时间和曲线，变体设置后就可以在设置动画属性时进行调用，其实这里和主键的用法差不多。 第四个更新是 agent， 不 仅可以通过打关键帧的方式实现动画，也可以通过文本语言进行动画设置，这里 figma 至少专业版本以上。最后，开发者模式支持动画 jason 打出并支持查看时间线开发，可以清楚地了解每一个元素的位置变化。
493月半AI酱
02:56查看AI文稿AI文稿今天主要就是想跟大家分享一下 figma 它的 m c p 现在到底有多猛？呃，我们看到当前这个设计系统还有这些页面都是我拿 ai 工具连接 figma 的 m c p 了之后 ai 生产的， 也就是说我人工一点也没有干预，它就直接在 figma 的 原声文件里边帮助我生成了这些设计的内容，然后我们怎么使用，其实也是非常简单的。然后在这里面我是推荐大家直接使用这个 codex， 因为它的安装真的是非常简单，只需要我们来到这个技能和应用的这个部分 后，我们就可以直接看到 figma 的 这个插件，我们点击这个连接，它会有一套连接的流程，我们直接一直点确认，确认确认，然后它就能够给我们添加成功。这个插件呢就是直接把我们 figma 的 这个 m c p 的 服务还有 skill 的 技能包就打包成一块了， 就相当于安装了这个插件之后，你 m c p 的 服务也有了，它内置的这个 skill 技能你也有了，就用起来会很方便。而连接成功了之后，我们去使用它的时候，基本上就是两个方向，一个是让编程工具直接去看我们的设计稿去生成代码，还有一个就是 bigmail 去看我们 web 定出来的内容去生成设计稿，主要就是两这两个使用的方向，那让他参考我们的设计稿去生成页面，我们就只需要在 bigmail 里边选中我们想要生成代码的页面 copy 这个链接， copy 了之后我们直接把这个链接发送给这 codex， 它就可以直接连接 m c p 的 服 服务去帮助我们去运行，他会先读取我们的页面，帮助我们自动开发成对应代码文件。那如果说我们想要让他参考我们的这个已经生成的这个代码文件，去生成对应的 figma 原生的文件，我们也只需要用这么简单的一句话，他跟我们确认一下这个文件所属的团队是什么， 就会自动生成对应的设计稿。我们可以看一下这个是他给我生成的 figma 的 原文件，这个是我们之前的这个设计稿，当然这里边也会有一些偏 叉，就比如说他拿 svg 直接画的图形，肯定是不如我们手动画的那种图片要精致的，所以我们需要想要去有调整的地方的时候， 就比如说调整一些细节的这种图案，我们可以直接对应复制组建的这个链接，给它提供一些修改意见，让它改它就能够定位到我们 figma 里边的对应的这个组建他也可以去参考，就相比到之前我们去截图去定位的话，要方便很多，也会准确很多。然后后面的测试就是我直接让他生成页面的一些操作，比如说我让他根据当前页面的风格去设计套设计系统，还有一些根据设计系统去 开发一些延展的一些页面，在 figma 里边执行的效果都是很不错的。这些内容就是我们刚开始给他去展示的。 当然这个设计系统相对来说是比较简单的，包括一些组建的展示，因为我给他的内容就比较简单，只给了他一张页面去做参考， 所以他生成的内容相对简单，我们如果说有丰富的页面参考，可以让他去尝试一下，生成复杂的设计系统都是可以被我们去开发的。从我目前的这个简单的测试的流程来看，我觉得他执行效果还是非常好的，而且很稳定。
192AIGC肖学长
07:19查看AI文稿AI文稿大家好，我是小翔，我们来看一下飞哥马的工作区以及文件的管理。首先我们打开飞哥马，可以看到他的首页，在最上面可以看到我们当前打开的一个个的设计文件， 如果是苹果系统，最上面看到的是拆单栏，在温灯时下其实也有拆单栏，这个需要我们打开一个设计文件，在最前面的这个飞格马图标，我们点开在这能够看到这些拆单命令。 我们点击小房子，可以回到飞哥马的首页，下面是自己的账号，我们点开之后如果说登录了多个账号，可以在这里进行切换，也就是说我们可以同时登录多个飞哥马的账号。 右边有一个搜索框，在这里可以搜索文件或者是团队以及团队成员，再往右这里有一个通知图标，这个是跟团队协作关 更密切一些。我们后面会说到最右边有一个个人的头像，点开之后里面也有一些命令，首先是自己的账号，然后是个人中心，然后是插件设置，包括主题是亮色的还是暗色的，在这里也能切换账号或者是退出登录。 我们再看一下左边，左边的第一个是蕊顺子，就是最近打开的文件，在这里能够看到最近打开的这些文件，它是以时间顺序进行排序的。 然后第二个命令就是拽死，就是草稿，在草稿箱我们可以去新建文件，或者是查看我们已经删除的文件， 违建的新建我们一会会单独来说，再往下是可没有逆体，也就是社区，社区也是飞格马很有特色的一个功能，我们点开在这里能够发现大量的这些设计文件，包括一些设计资源，这些都 都是可以直接拿过来用的，而且都是原文件，这个我们也会单独来说，这里是提示让我们掏钱的，我们不用管它。下面有一个 freezerboss， 也就是收藏，比如说这些文件，我们点一下收藏，在这就能够看到我们收藏的这个文件下面才是真正的我们去管理文件的一个地方， 也就是 tm 子团队。在飞哥吗里面文件是这样的一个结构，我们来看一下这样的一个图。首先注意我们说的是免费账号的情况，因为如果说你能翻到这个视频，大概率你用的也是免费的账号， 然后我们这个账号可以去新建多个团队，是没有限制的，可以新建多个团队，免费版的一个团队只能新建一个项目，然后项目下是文件，一个项目下可以有三个设计文件，还有三个这个字母 的文件，设计文件就是我们做界面、做交互的这些文件，这个也是我们的一个终点。然后是非个继母文件，非个继母文件反正就是一个很好玩的东西，就是当前看到的这个就是一个非个继母文件，比如说这种花里胡哨的一些功能，包括去拖动一些形状，写一些文字， 当然这个也是可以多人协作的。嗯，这个呢主要多用于一些头脑风暴，这个我们也放到后面单独来讲，因为这个功能也比较简单。 然后是设计文件，免费情况下，每个设计文件只能建三个页面，我们可以看一下这个在这里只能建三个页面，再去新建就提示我们要掏钱。 其实三个页面一般也够我们用了，因为一个页面它并没有限制我们去建多少个画板，或者是绘制多少个元素。有一点免费账号是没 没有限制的，就是这个草稿箱，我们可以在草稿箱里面新建无数个文件，当然这里面的文件跟我们团队里面的文件它是有一些区别的，这个主要体现在团队协作上。点开团队，在这里能看到我已经新建了几个团队，我们可以点击下面，然后再去创建一个团队，比如说是谷歌， 然后点击创建就可以去创建一个团队，这里可以添加一些协助成员。当然我们可以先把这一步跳过去，后面用到的时候再去邀请， 然后我们选择这个免费的版本，这样我们就新建了一个团队，但是这个团队下现在是没有项目的，我们可以去新建一个项目，在这里点击 new practice， 或者是点击后面的这个加号，我们就可以新建一个项目，比如说这是我们的 一个外保端的项目，我们就叫外保。点击创建，这时我们就新建了一个项目，当然我们只能新建这一个项目，我们可以再点开这个团队，然后在这里可以看到一些团队的设置，比如说项目的情况，在这能够看到一个项目，然后是团队成员现在是没有的， 包括团队的设置，比如说团队的这个 logo， 我们可以在这看一下，比如说在这去改变我们团队的一个 logo， 我们点开刚才新建的这个项目，现在是空的，里面是没有文件的，我们可以在这里去新建一些文件，上面这里能看到我们可以新建设计文件或者是非科技文件， 当然我们只能建三个设计文件和三个飞格机母文件，我们也可以导入文件，比如说导入该学的文件，在这里我们可以点击这个加号，然后 后我们就新建了一个设计文件，并且他会自动把这个文件打开，打开这个文件，在最上面我们可以看到这个文件所属的这个项目以及文件的名称。现在叫安抬头的，也就是微命名，我们可以单击，然后去给他命一个名字，我们先随便起一个名字， 后面有一个小三角。我们点开之后还有一些其他的操作，比如说丢个 dk 就是复制，包括重命名，包括跳转到项目或者是移动到其他的项目，我们点击移动项目，可以移动到其他的团队或者是项目里面， 下面还有收藏或者是删除，上面这个是导出，然后这个是显示历史版本，飞个马会自动的给我们保存多个历史版本，我们点开历史版本，在这里能够看到我们 可以免费存储三十天的历史版本，如果是掏了钱就没有这个限制。具体的使用方法后面我们会说到点击叉号退出历史版本，在左边能够看到一个图层面板， 比如说我们按一下 a， 先去新建一个画板，在这里就能够看到有一个画板后面是资源，这个跟主建密切相关。再往后是配件，也就是页面，点开在这我们就可以新建多个页面，现在有一个我们可以再点击创建一个，再去点击 我们可以创建三个，再去点击就提示我们要升级，我们可以在这去切换页面，然后在页面里面我们就可以去新建多个画板， 然后在画板上进行我们的设计，比如说绘制一些形状，写一些文字，我们再看一下这个文件结构，就是团队 项目设计文件页面。最后给不想掏钱的小伙伴再提供一个小技巧，我们可以在茶馆箱里面去新建一个设计文件， 然后我们在这个文件里面可以去新建多个页面，这个是没有限制的，我们可以新建多个，然后我们把这个文件移动到项目里面，我们可以把它移动到我们刚才新建的这个项目里面， 这样他还是多个页面。如果我们再去这里进行添加是不能添加的，我们可以回到项目这里去看一下，我们当前这个项目里面有两个文件，那我们下次再见。
71小布丁
05:44
01:18查看AI文稿AI文稿朋友们， fig 马这次真的把设计师动效这一块彻底做通了。就在刚刚结束的 fig 马 config 二零二六上， fig 马正式发布了 fig 马 motion， 最直观的变化就是 fig 马里终于有时间轴了，你只需要切到 motion 模式，画布下面就会出现一条时间轴 图层，什么时候出现按钮怎么弹出页面怎么切换都可以。直接打关键帧位置缩放、旋转、透明度这些属性。也能直接打关键帧位置缩放、旋转、透明度这些属性。更狠的是，它还接入了 fig 马 agent， 你 可以直接用 ai 帮你制作动画， ai 会直接在时间轴上升成关键帧，升成之后你还可以继续手动微调节奏、缓动和细节。 figma 模型更大的变化就是把动效带进了设计系统，这些动效规则可以跟组件一样被附用 团队里的其他设计师打开，同一个组建也能直接沿用这套动效规范。做完之后，他还能直接导出成视频、 gif 动画等格式。如果是交给开发，也不用再靠录屏和口头描述开发，直接就能看到时间轴关键帧滑动曲线和具体动效参数。还可以复制相关代码， 会让产品动效从演示环节真正进入设计和开发交付流程。产品设计从静态界面直接就能变成一套完整的动态体验，以后从 u i 交互动效到开发交互都能到飞格玛里一次性搞定，目前已经可以体验了，感兴趣的朋友快试试吧！我是静静，关注我带你了解更多前沿 ai 工具。
116AI星踪岛
02:55查看AI文稿AI文稿hello， 大家好，又和大家见面了，那本期给大家带来的是林真骑手 figma 访战的一个实战教程。话不多说，直接我们就开始。那我们首先先看一个案例，这个网站叫金谷英，他家是专门做独立站这一块的，多多去介绍。那首先看一下他家的这个样式， 那有一些地方注意一下，它就是 floating bottom， 这个要返回顶部按钮往下，它这个时候它的按钮出现了，那咱们快速过一下。好，那我们返回顶部，左边是我们一个仿站的效果。好，我们也过一下，先刷新一下，看一下，它其实是有一个控制这个效果，在 这边是做了一个缩放，到下面的时候它就折叠，个人认为比他那个原版的设计好看一点，因为他原版的这个地方他是占位号的， 但是他在顶部的时候，这个地方占一个空白，比较难看一些。那其实你看图标不太一样的地方是因为我没用他那一套图标，他的那一套全是用 svg 调用的，我这一套是用谷歌的 material icon， 这个相似度的话，我个人觉得至少有百分之九十左右吧。第一稿生成出来呢？不是这样的哈，这样的话去安装这个飞哥码的插件， 然后首先有飞哥码账号，然后飞哥码号里面去链接到这个插件。就第一次你安装的时候 调用的时候，他会让你去授权你的账号后，他才会这出现在这里，那这个时候的话音连接好了之后，你就可以去抓取这个页面，抓取完了之后，你可以在飞哥买的一个新建一个草稿里面去把整个设计稿给它粘贴出来，粘贴出来之后 你可以去通过 qq 也好，通过 cloud code 也好，可以再安装一个 mcp 啊， mcp 链接调用他让他去从设计稿转到一个网页。 其实第一稿它不是这样的，我已经是修改了很多版，比如说这上面其实它是轮播的，它是第一稿的话，其实默认它不轮播。第二个它的 cs 钥匙按钮，钥匙也是一致的， 也就是说它第一个按钮是蓝色，后面全是蓝色的，那其实可以看到它原版它其实是不一样的，每个标签它其实下面的文字按钮其实是统一一致颜色。所以这些 cs 的 调整，包括我刚刚讲的这个悬浮按钮上的然后按钮等等。 讲一个小插曲啊，一个是我公司的一个国内站的一个服务商，那时候就说我们这个域名啊到期了，因为我们这个域名呢到九月份啊，其实呢，实际上我们跟上一个务商呢，是签了五年的这个协议，知道大家猜猜多少价格吗？六千块，没错，就是一个点 com 的 域名， 五年续费是六千块，那完了之后，其实上一个服务商压根就没有续，上一个服务商就跟他说的表达这个意思呢，千五一年还纯亏本之内，一套在二零零上是多少钱呢？这也就九十五对吧？算他九十五一年的话，续费九十五， 这才多少钱？这千五还要说会亏本？好了，我们简单就回顾一下，如果大家有兴趣的话，下次我可能会出一个更加详细的教程，包括每一个步骤去做。本期内容，我们下期再见。
15_Sshen
01:00查看AI文稿AI文稿完全不懂 a e 的 小白也能只用一句话做出这样的动效。你现在看到的这段动画不是在 a e 里做的，而是在 figma。 这次 figma 的 更新直接把一整套动效能力搬进了设计画布，你只需要输入一句提示词，告诉他元素要怎么移动怎么出现， ai 就 能直接在时间轴里生成一套真正可编辑的关键帧。它生成的不是一段只能看不能改的视频位置缩放、透明度、动画时长，甚至整个运动节奏都可以继续手动调整。而且这次更新并不是简单增加了几个动画预设， figma 算是把 ae 放进了画布里， 动画能跟着组建一起附用，甚至整理成一套完整的动效设计系统。还没完， figma 接下来还会加入原声三 d 变换，文字画框和矢量图形都可以直接沿着 z 轴旋转，同时保持可编辑。 figma motion 当然还替代不了 a e， 但它已经让我们看到， 未来设计工具之间的边界只会越来越模糊。另外，我整理了一份 ai 提示词和工具合集，需要的评论区扣六。
4005A+1
00:36查看AI文稿AI文稿如何使用飞格拉组件呢？首先我们将图标与文字进行编组，然后点击图标创建组件，将组件子版复制出来。同样的操作于另一个图标， 有该棱形图标的为模板，点击子版组件可进行组件替换，在模板组件进行的更改会直接作用到子版组件上去， 再又不资产百块也可查看组建内容，快来尝试飞滚外的组建功能吧！一个核桃，专注名企，高薪就业！
60像素壹佰_奶盖
