粉丝3574获赞4.4万

飞马今天刚刚更新了一些图片编辑相关的 ai 新功能,我们一起来看看。这是一张图片,按住卡曼的在边缘拖拽,可以变化这张图片的比例,然后右下角这是它的新功能, 也就是我们经常在 ai 里用到的扩图功能,加上了一个选区功能,有两个功能,一个是把当前选中的内容删掉,另外一个就是把当前的内容和背景分离,也就是把这个内容从背景里提取出来, 把这个云去掉,看它能不能去好。 然后我们再把右下角的这个,比如说这个水印给它删掉,现在去水印利器,然后甚至我们可以把这个云和文本从背景上分离出来, 这以后就真的不用打开 ps 了。嗯,这些东西都是分层的了, 然后这个是重新生成这个梦幻城三 pro, 根据选中的图层样式生成新图, 内容是上海迪士尼,它会有一个 之前的参考,之前的图和新图的一个对比样式,它就把中间的城堡换成了迪士尼的样子。 总体来说,新上线的这部分功能非常的实用,是我们每天切实的可以用到的工具。这一部分 sigma ai 的 编辑功能是针对于 专业版、组织版和企业版生效,免费的账号暂时是没有办法使用的,教育版账号其实也等于是专业版,所以教育版账号也是可以用的,有空的话快来试一试吧!关注我,我是自己查查,每天分享一点设计技巧。

本节课呢,我们将学习菲格玛形状工具的使用,我们这节课最主要的重点是在于呢,要清楚如何去绘制一些基本的常见造型, 那么会做完之后呢,还要知道呢,如何去编辑他的外在形状,这是我们的一个重点。进入软件之后呢,我们先找到形状工具的位置,他呢在这边啊, 在飞马平台中的话呢,它是内置的以下这些基本的形状造型。矩形工具,快件的是二箭,直线工具, l 箭箭头, shift 箭加 l 箭,椭圆工具是 o 箭多边形以及新型工具。那么我们先去学习 一些啊他的基础用法。我们找到矩形工具,矩形工具的话呢,按住 shif 键是正方形,不按 ship 键是长方形啊,非常简单。画完之后呢,我们可以对他的圆角进行设置,按住 out 键可以对单边进行圆角的这个操作。 第二个呢是直线工具,选中直线工具之后,按住 ship 线绘制直线,画出来之后呢,我们需要清楚直线工具改颜色,在右下角参数中点击就可以直接对他的色彩进行修改。 而下方这里的话呢,是用来去修改描边的这个粗细以及描边的位置居中内部或者是外部。描边在下方的话呢,我们可以去设置描边的一些这个类型啊,比如说菱形渐变, 就给这个位置加个菱形,然后这边的话呢,我们给他添加一个箭头,可以做出来一个这样的造型,而其实点和结束点中间的小图标,他就相当于是反向,可以把两个命令的进行反向这个操作。 箭头工具的话呢,他和直线工具是一样的,区别就在于他已经提前的把箭头给我们添加好了啊,刚刚是我们自己进行添加的啊, 同样工具的话呢,就是按住 ship 键画一个正圆形就可以,而多边形工具的话呢,我们按住 ship 键画一个正三角形, 画出来之后呢,这里可以调节圆角,这里的话呢可以呢去增加他的这个角的这个数量, 再往下新型工具, 新型工具呢,我们按住这个 shift 键画出一个五角星,画出来之后呢,我们可以对他的圆角进行设置, 那里面的角度进行控制,包括呢这个角的数量也可以进行控制啊,那其实呢,像这些基础工具啊,他的操作上是比较简单的,大家只要绘制出来之后呢,自己多去点一点啊就可以了。在圆形工具中呢,他有一个命令,和我们之前的软件不太一样, 你画完之后呢,看这里还有个小圆点,你点击之后,我们就可以非常方便的去做这种饼装图,哎,这是非常方便的,而且速度呢非常迅速啊,这是他的一个特点。 在形状工具下方呢,还有放置图片工具,这个放置图片工具的话呢,非常的实用,如果说你想在里面 给他添加一张图片,包括呢我们做 yy 页面时,我们用户头像圆形的用户头像,我想让一张图片呢放在这个圆里面,我们就可以使用放置图片功能, ctrl 键加 shift 键加 k。 好,那么点击之后呢,选择你的图片, 这时候呢你的鼠标上就会挂一张图,你再点一下这个造型,他就会直接剪切进去,速度呢是非常方便的,而且很快速,他可以剪切在任意造型中去,那我们再按一下啊, ctrl 键加 shift 键加 k, 选中图片,点击,你看他也能进去啊,只要是个形状,他都是可以快速剪切进去的。那么在这个平台中的话呢,有一个秘密啊,跟他是非常非常像的, 叫什么呢?叫蒙版,我们来看一下呢,在这个平台中,蒙版的这个使用操作, 蒙版的话呢,我这里有两个造型,一个是圆形,一个呢是一张图片,他当里面的话呢,去实现蒙版操作时,我们可以呢这样去做,我们先把这个球啊,把这个球呢给他移动到图片的下方, 移动到下方之后呢,我们可以框选两个部分,再去点击上方中间的这个图标叫设为蒙版快线是 ctrl 键加 os 键加 m, 点进去之后,那么我们的图像也会被剪切到这个范围中去啊,可是实际上的话呢,这样的这种操作啊,他的操作体验感是不太高效率的,对吧?因为我们可以直接使用放置 图片工具的这个功能,迅速的去做出来这个效果,然后这里的话,你还要再去画一个圆形去做这种事情,就变得非常的麻烦了啊。 以后呢,你要是想去做一个限制在某个范围内的这个造型的话呢,其实更推荐大家使用的是放置图片的这个功能,而不是我们蒙版的这个功能啊,所以大家对这个要清楚就可以了。 旁边的这个按钮的话呢,就是我们的拨人运算合并,减去顶层保留交集以及排除我们的交集,那么我们可以用这些属性呢去做一个小图标, 一个相机的图标,这个相机图标的话呢,可以看出来是由三部分组成啊,一个是外面的矩形,这呢是小矩形,这里呢是一个圆形。 那好,我们来去铃木一下这个造型,第一步呢,我们先绘制一个矩形啊,好画一下, 画好之后呢,将他的圆角稍微的拉远一点点,按住 out 键,可以对左右两边同时进行缩小,再按住 out 键复制一份,再去缩小啊,这边再去缩小。 当你看不见他的小圆点时呢,你可以把你的画面给他呢,放大一点就可以看到小圆点,那就缩小一点 好了。那么缩小之后呢,对于这两个图形来讲,他是什么属性呢?是不合并,对吧?所以我们点击上方选择连集,这样就完成了合并。合并之后呢,我们再找到椭圆,在 这里呢给他画一个圆形,对齐再框选这两个造型,选中之后呢,我们在上方找到剪去顶层,这样呢就完成了我们一个轮廓的这个制作。 但是要注意呢,虽然说感觉啊好像已经变成了一个造型,可是本质上啊,他并不是,当你双击之后,你会发现我依然可以对他里面的东西进行再次的辩解, 也就说本质上他现在呢并不是一个完整的一个形状,你看在图层里面也能看得出来,他都是分开的, 那我如果说我决定我不再对他进行修改了,我就要这么去做,那怎么办呢?我们就可以点击啊,叫合并,但是里面的呢叫拼合,所选项其实就是我们之前的合并形状啊。好, 那点击之后大家注意看一下我们这边图层的这个变化,点一下,那他就会变成一个完整的一个单独的一个图层 啊,你再次双击的时候呢,就会进入到形状的叫编辑模式,双击进入形状编辑模式,在编辑模式中的话呢,你可以对他的毛点进行随意的这个修改,并且呢选中的这个毛点啊,我们还可以呢单独去控制他的圆角参数啊,非常的方便啊, 我们找一个形状工具来试验一下画一个正方形,画正方形之后呢,如何进入到他的编辑模式呢? 可以点击上方的这个小图标,编辑对象进入到这个模式,或者说你就直接双击他,双击进去之后照样也能进入到编辑模式,对他的 造型进行任意的这个调节,那调整过程中的话呢,我们可以选中对他的这个圆角造型进行单独的这个调节啊,非常的方便。如何退出我们的编辑模式,双击空白地方,这样呢就可以退出这个编辑模式了, 我们来总结一下本部分所学习的主要知识点。首先呢我们要去知道呢怎么去编辑一个形状双击或者点击上方的编辑对象小按钮,这样就可以为他进行编辑,退出的话呢,直接双击空白地方就可以, 我们可以使用移动工具呢,在编辑模式下,对他单独的毛点进行圆角的这个操作不容易算的,使用方法呢,和我们之前所接触的设计软件呢,他是一样的合并形状的开件呢,是 ctrl 键加 e 键。而蒙版 工具的话呢,他的摆放位置是上层是图像,下层是遮罩。创建蒙版的快捷键是 ctrl alt 键加 m, 再按一次呢是取消, 但是考虑到呢,其实这个蒙版工具他更多功能代表的就是对图像进行一个裁切,那么我们可以采用一些更加方便的做法去完成这个事情,我们可以使用 frem 的图像裁切功能,或者说呢可以使用放置图片功能, ctrl 键加 shift 键加 k, 选中图片,直接点击形状,把它直接放进去,这样操作呢会更具效率化一些。

今天主要就是想跟大家分享一下 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 里边执行的效果都是很不错的。这些内容就是我们刚开始给他去展示的。 当然这个设计系统相对来说是比较简单的,包括一些组建的展示,因为我给他的内容就比较简单,只给了他一张页面去做参考, 所以他生成的内容相对简单,我们如果说有丰富的页面参考,可以让他去尝试一下,生成复杂的设计系统都是可以被我们去开发的。从我目前的这个简单的测试的流程来看,我觉得他执行效果还是非常好的,而且很稳定。

欢迎收看九零后育 i 设计师早九晚六育妞航票工作 plus 一 眨眼,我的架呢?怎么没了?早知道不眨眼,还好在家有猛猛休息。今天一分钟教你用 ai 生成大屏登录页,并用飞马制作动效落地交付!先用小云雀 ai 图片设计功能生成大屏登录页的背景,只需片刻就生成好啦!选择一张喜欢的放入飞马进行风格适配,并把登录页的业务内容补充完整。 选中生成好的背景图,加入对话,输入提示词,抠掉建筑物,保存两张图,用一镜到底上传两张图,添加提示词进行生成。很快建筑生长效果就生成好啦!把生成好的视频放入 figma, 更改视频的透明度为百分之五十。画板添加黑色底色登录框变成组建并添加变体二,修改变体一的透明度 百分之零。变体一到变体二的交互为延迟,触发五千毫秒智能动画三百毫秒。预览一下登录页,加载效果就完成啦!继续让 ai 把扫描效果去掉,输入提示词进行抠掉保存后,再用一镜到底上传三张图,分别在转场一和转场二中输入提示词,使视频达到想要的效果。等待片刻效果就完成啦! 扫描圈从小到大像连衣一样循环复制一个画板一,把生成好的视频放在画板二中,调整登录框的状态为变体二。 画板一到画板二添加交互延迟触发五千三百毫秒智能动画三百毫秒预览画板一就可以查看整体的效果啦! 画板一是为了实现打开登录页时的加载效果,画板二是登录页打开后的常态效果,这套 ai 加 ui 工作流举一反三,可以做出更多效果哦!今天的干货也总结成了文档,需要的小伙伴自取。过年一整个在家充电并大吃特吃, 洛阳真的好便宜,欢迎大家来玩!今天的你也辛苦啦,我们下期视频再见,拜拜!关注我,解锁更多 ai 加 ui 技巧,主页还有更多 ui 提效教程!

警告,当你的对手刷到这条视频,他会立刻把他的修图师开掉!还在一张张抠图抠到眼瞎,背景里的路人劈不干净,边缘全是毛边,想把画布扩一倍,结果内容全靠猜!醒醒吧,高手处理图片早就不是靠技术,而是靠系统! 这套神仙级的图像编辑系统,将彻底颠覆你的工作流!第一,魔法分离。他能像有生命一样,自动识别并提取画面里的任何元素。发丝级精度一键取用, 素材获取,从未如此简单。第二,创世级修复,画面里不想要什么,抹掉就行, ai 会自动补全画布外,想要什么, ai 能无中生有, 创造出无缝衔接的全新内容。第三,意念改图。最炸裂的是,你甚至不用动手打一段字,告诉他,你想要的塞伯朋克风画面就自动渲染,图片里的文字也能一键替换。记住,真正拉开你和高手差距的,不是技术,而是你驾驭工具的思维层级。 这个 ai 图像编辑系统,如果你也想把时间还给灵感评论区,顺便聊聊你平时做图最崩溃的是哪一步呀?

你用 ai 生成页面的时候,有没有遇到过这种情况?布局崩坏,建军乱飞,内容全是歪的。现在你能把截图跟代码一起丢给他,他能自己看,自己改, 主打一个自觉。而且已经上线的项目也能动,加个小入口,调个样式,他能保证自己不乱碰,不会改着改着直接把你项目搞崩了。连你的封面落地页他都能帮你盘,直接告诉你哪里在拖点击率,怎么改能让你的用户多停留两秒。智普刚更新的新的五 me turbo 模型, 专门给视觉能力做了优化,昨天刚出,我立马就做了测试,总结出三种实用玩法,不用懂代码,不用配环境,会截图,会复制粘贴就能用,非常简单。废话不多说,咱们直接开始。 我之前用 ai 生成的页面,经常会发现一堆问题,只能够一张一张截图帮选打字,改完又改,经常三次人都搞不定。 现在你可以整页截图加代码丢给他,直接让他做全局检查,自己去修复。你看他自己把底下这些问题全扒出来了,报告,卡片偏右上传的图标往下跑了,右边输入的面板叠在一起他都能检测出来。说实话看的还挺细致的,不会跟之前那些模型一样,直接当没看见 改完。你看这个效果,这两个地方原来左右不对称的上下挤在一起的,现在都能够修复好,而且我只是改了一轮就搞定了,确实是有点东西的 厉害。但更实用的是,已经上线的项目,他也能够改,这一种更加偏向于我们日常的工作。一般上线的项目吗? 你懂的,基本都是小修小补,加个入口,调个样式,基本不会大改的。我拿了一个开源的 ai 聊天项目做演示,截图框,选好这个位置丢给他,告诉他我就要在这个地方加个按钮,点击就能放烟花,其他什么都别动。 ok, 搞定了,刷新一下看看底部,这里多了一个烟花的按钮,点一下就能播放动画了。 而且他只动了这个位置骑行代码,其他地方一个字都没有碰,其他的功能都是完全没有受到影响的。该聊天的聊天,该设置的设置,以后加个活动入口,换个按钮颜色,导航栏加个小红点,都是截图丢过去的事情了。但是如果碰到那种祖传的十三代码,这我可说不准了, 哈哈哈。除了代码能力,他还能帮你审核封面、落地页、 ui 界面这一种就不光是改代码了。你有没有遇到过这种情况?封面做完了自己看着还行,但总感觉不知道哪里差点意思, 想让设计师改,但是又说不清楚。这时候你就可以丢进去,让他来帮你盘,你看他不光能找到问题,还能帮你分析你的受众,你的竞品是什么 做的,你要告诉你该往哪个方向赶,他会帮你生成一段话术,就像你平时协助沟通一样,直接复制粘贴过去。哎,你可能会问,为什么不直接让他出一些深图的提示词?我试过了,审美和你一般,而且还得抽卡,那还不如把专业的事情交给专业的人来做。对, 这套工作流不只是封面,像落地页、 ui 界面、 ppt 他 都能看,并且我已经整理成就一起放在文档里了,所以你看修烂页面,改线上的项目盘封面核心就一个逻辑,截图直接丢给他,让他自己看着办, 哈哈哈。当然,真指望他凭空代替你的审美肯定是不现实的,但拿他做一个赛博助攻,帮你扫盲区,把脏活干了,这绝对是够用的。大家可以拿自己项目尝试一下,看看能不能发现更多更有趣的玩法。我是木马,陪你一起玩 ai 的 赛博搭子,咱们下期见,拜拜。

大家好,我们上次分享了 integrity mcp 的 安装,今天我们继续分享如何让设计稿变成代码,完成首页三个页面的开发。点赞加关注,我们开始 我这里是以 ios app 为例,如果大家想开发安卓 h 五都可以。首先我用叉 code 创建了一个空项目,只有一行代码。 hello, 我们来到 integrity, 我 们给他第一条指令,读取当前项目结构,熟悉代码发送给他, 他已经返回了,对我们当前项目进行了一个熟悉。项目处于起步阶段,代码量极少,因为是我刚创建的一个新项目。我们来到 figure, 选中页面,右击 copy link to selection, 我们给他一条指令,帮我开发当前页面。 figma 链接主界面是一个 tab 点发送,他给我做了一个计划, 我们可以看一下。他给我做了一个计划,我们点击继续,他自动给我生成代码,左侧我只有两个文件,都是空文件,什么都没有。我们稍等一下, 选择接受所有。我们运行一下,看一下效果。 它给我们创建了一个类首页,我们来看一下,大家看首页的效果,已经有了,虽然有 bug。 我 们点击这个心情,应该切换背景, 我们来开发第二个页面,现在第二个页面和第三个页面都是空白的,切换到 figma, 选中页面,选择 copy link to selection 这两个页面,让它一起开发。 给他一条指令,帮我开发这两个页面。两个页面的链接发送给他, 我们来看一下,他说已经完成了全部开发,我们来运行一下项目, 报了两个错,我们复制这个错误,我们复制错误发送给他,让他自己来修,他已经修复完了我们这个错误,他说现在项目可以运行了,我们来试一试, 项目已经运行起来了,我们看一看,刚才他还给我加了一个格式化的图标,首页,我们点击心情记录,背景色是改变的, 我们来修改一下这个 bug, 复制了四个设计图的链接,给他一条指令,首页记录心情,背景色是会改变的,参考设计图发送给他,已经完成了关键改动,我们来运行一下,看看项目报错了,没关系,我们复制 继续丢给 ai, 他 说已经修改完了,我们再来运行一下,运行起来了,我们看一下 现在这个颜色改变了,但是颜色值好像有点差别。这三个我们看一下,切换到 good 这个心情的时候,这个背景颜色和我们设计稿的颜色差异很大,应该是这个颜色, 我们给他一条指令, good 的 设计稿,点击 good, 参考这个设计图颜色,我们让它继续修改,修改完了,我们来看一下运行效果,跟我们这个颜色差异很大,我们切换一个模型, 我们再来运行一下,现在跟我们的颜色一致了,对不对?首页颜色有点偏深,我们让他继续把首页颜色改一改,给他一条指令,参考这个,点击首页 great 参考设计稿调整 返回了,说首页已经改完了,我们点击接受。我们来看一下首页的颜色,现在首页的颜色太深了, 首页的颜色现在跟我们的设计稿是不是保持了一致,我们看一下我们是不是不需要写一行代码,直接通过 ai 帮我们完成了从设计稿到代码的一个过程,现在我们已经 web coding 的 工作结束了, 三个主界面的功能都已经完成了。开发是不是很简单?我们只需要跟他沟通页面整体的开发,局部的调整他都可以帮我们完成。包括 他生成代码的时候报错了,我们直接把报错的信息发送给他,他也可以自动帮我们完成错误的修改。 下一次我们分享如何把项目发布到应用市场,让你的 a p p 走向世界。点赞关注收藏三年不要错过,下期,我们下期见,拜拜!

哈喽,大家好,今天我想演示一下如何通过 ai 工具将 fig 码 ui 转成前端代码。这里我只要选择 fig 码并进行登录,登录后选择我想要的设计稿,选中我想要生成的设计稿 并添加到对话中,这个时候 id 一 会自动获取 fake 码中的图片和文字内容。 当这个码 u y 这些元素获取完了之后,我们可以用文字的描述让它将这个页面生成到我们指定的文件中。现在它就开始生成了。 现在它生成完了,我们可以打开浏览器看一下生成的效果。这是生成完的效果和 figma 的 效果进行对比, 我感觉还原率还是挺高的。那今天的演示就到这里了,我们下期再见。

最近 figma 新出了一个很重要的功能,叫 figma agent。 简单说,它不是普通的 ai 画图工具,而是一个直接住在 figma 画布里的设计助手。 你可以在设计稿里直接跟它对话,比如帮我生成几个不同风格的页面方案,帮我把这个组建换成另一种状态,帮我把整套页面改成深色模式,或者帮我检查这个设计有没有体验问题。它真正厉害的地方是, 它不是脱离你的设计系统乱生成,而是可以结合你现有的组建变量、样式和团队规范来工作。 所以对设计师来说,飞哥曼 agent 最大的价值不是取代设计,而是把大量重复机械、低价值的操作交给 ai。 比如批量改字体、统一组建状态、填充真实内容,快速探索多个版式方向。未来做网站 app 产品原型时, 设计师的工作会越来越像导演,你负责判断方向、审美和体验, ai 负责帮你快速执行和扩展。所以这次飞格曼 a 剑客的意义很明确,设计流程正在从手动拖拽进入 ai 写作时代。