接下来我们介绍一下 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, 那这部分就是文字工具的介绍。
粉丝13.3万获赞64.6万

ok, 那接下来我们进入到 figma 的开箱使用环节,分为三个部分,分别是注册账号软件汉化以及字体插件的安装。我们先看第一个部分注册账号,打开 figma 的官网, 我们看到右上角有一个该 star 里的或者中间位置也有这个按钮,我们点击一下,然后弹出了一个弹窗,你可以注册自己的费格码账号,如果你有谷歌的账号,可以直接用谷歌的账号登录,当然你也可以注册一个新的账号,我这里面注册一个新的账号,给大家演示一下, 输入密码,然后点击创建账号,这个时候需要输入你的名字,你就随便起一个名字,这里边选择你是做什么工作的,选择设计,再往下是用 fake 码做 为什么样的用途,我们选择第一个就好了,个人使用,然后勾选上,我同意点击创建账号,这个时候菲格玛账号就已经创建好了,但是需要我们进入到邮箱里去进行一下验证,我们进入到邮箱刷新一下 啊,他这个邮件直接进入到我的垃圾邮件里了,大家在验证的时候需要注意一下啊,点击这个邮件,点击验证邮箱 继续前往。 ok, 那我们就已经注册成功了,就可以打开网页版的这个码的软件,那这里边需要输入一个团队的名字,我们可以先不用输入,点击跳过,接下来会有一个版本的选择,第一个是入门版,第二个是专业版, 入门版会有一些文件数量的限制,专业版每个月会有一些费用,我们可以先用入门版,这步我们 我们也先不用管,直接点跳过就行了。当前我们使用的是 fake 码浏览器的版本,当然你也可以下载客户端的版本,在官网顶部的第一个导航下有一个登录,这里面有三个选项,选择自己电脑对应的版本,像我的电脑是麦克电脑,我就下载第一个就好了。 第二部分教一下大家 figma 的汉化,我们打开 figm 软件之后,发现 figm 软件都是英文版的,这个对于英语基础不太好的同学在学起来的时候会有一些吃力,那我们可以通过安装插件的办法来解决这个问题。 但是强调一点,我个人还是建议大家尽量的去使用英文版,如果大家未来想要加入到大厂或者加入一些国际化团队,那么你使用英文版可以快速的融入到团队和融入到项目里,而且这个软件本身也并不复杂。 我们打开中文汉化的这个网址可以看到目前汉化有两种方式,第一种是下载汉化客户端,第二种是基于 come 浏览器去安装一个呃浏览器的插件啊,这两种方式都可以看大家日常的一个使用习惯,当前我自己使用的是 come 浏览器,我就安装这个插件就 ok 了,点击这个按钮, 然后点击添加至 chrome, 添加至扩展程序, ok, 这个时候就已经安装好了。我们回到 figma 的软件里边,刷新一下页面, 这样 figma 就已经基本被汉化了,但是我们发现 figma 里面的局部的单词和句子没有完全的汉化,这是因为这个插件的开发者针对部分单词没有完全翻译,但是整体啊并不影响我们使用。第三个部分给大家介绍一下字体插件的安装, 如果你使用的是浏览器的版本,比如说我在这里面打一段文字 啊,把它切换成平方。在浏览器的版本里,我们后安装的一些字体是无法显示的,那这个问题在客户端的版本里是不存在的,因为客户端的版本会直接调用系统内的字体,因为我这个电脑之前已经安装了这个插件,已经不存在这个问题, 但是这里还是给大家演示一下。那出现这个问题的时候,我们需要安装一个 figma 的自己插件,打开这个网站,同样他也是在这个 download 下载资源里边。 最右边这里有一句话已经提示了,我们客户端是不需要安装的,那这个插件主要是针对于浏览器的,那我们选择对应的版本就好了,点击下载直接安装, 非常简单。安装完成之后,我们回到 figma 的软件里边,然后选择这个字体切换一下,切换成另外一个字体, 然后可以改变一下自重,哎,这个时候他的字体就可以完好的显示出来了。下面我们看一下费格玛的价格和版本,点击上面的 pricing, 这里可以看到费格码给我们提供了三种不同的版本。第一个是免费版,那像咱们很多同学应该用的都是免费版,他可以支持三个费格码和 fake jam 的文件,在个人的草稿中是不限数量的,那这里比较恶心的是团队里只能创建三个费格码的文件,数量非常有限。 第二个是专业版,专业版可以创建无限个 fit 码的文件和无限的历史版本,以及创建团队的组建库,但是专业版会有一定的费用, 比如说十二美元每个月的这样的费用。第三个是企业版,有专业版的所有功能,再加上一些定制化的高阶功能,一般大厂会采用这种企业版。 对于这三个版本而言,新手用户选择免费版也是可以用的,但是免费版会有一些文件的限制吗?以及没办法创建团队的组建库,那同学们可以选择这个专业版,那他的费用也是能在我们的承受范围之内的。 下面给大家普及一下 figma 的文件管理的维度。首先是 team 团队,团队下面是 project 项目,项目下面是 file 文件,文件下面又可以有多个配置页面,那当然每个页面下面又可以有无数个画框, frame 就是一环套一环的结构。

打门嗨,我是开开玩一下这套菲格玛的梦妆女子高中生小一。先来看看人偶,他的服装要比其他几个多一点,同样穿着未来感的高跟鞋,有两个羞涩腼腆的替换脸,而头部造型更是有了三种变化,我更喜欢戴着眼镜的,而他的武器看着像个手提, 拉开手柄就是一把大刀了。他还有一个翘起来的裙子配件,普通的只能弯到,这样骑个自行车都累,替换之后身体就能缩起来了, 车更服帖。再来看看他的配套的摩托车,配件不多,车模的轮胎也没有避震,方向盘可以小幅转动,而唯一的零件就是为了插上小 一个大刀,这样就是车载的形态了,配上小姨相当帅。拿出几十块钱的摩托模型,一比十二的比例刚刚好,这样低配版的也可以玩,未来感十足,战斗力爆表的女孩叔叔我实在太上头了,不过比起精品,我更喜欢可动的。

这一集我们介绍如何使用菲格马的奥托雷奥。在低端中快速制作表格。完成后你将可以随意拉伸列的宽窄以及调换他们的位置。那我们开始吧。 首先要画一个 freme 作为行容器,在里面添加一行文字框,选 freme, 点击凹凸雷奥。先把间隔和内编剧清零。点击右边按钮,我们让框内元素居中,并设置上下内编剧。接下来再画一个 freme 作为列容器, 同样把间隔和内边距清零,并添加颜色来分辨形状范围。然后我们放入行容器并把列容器拉宽,这时我们发现行容器并不会跟随拉伸。我们选中行容器,在 resize 下面,我们把横向宽度改成 fucocan 填充容器, 这样就可以自适应拉伸了。多复制几层形成裂。最后我们需要把裂放入表格里, ctrl out 加 k 变成足键,放入新建的奥拓莱奥的容器里,复制几个,添加些许细节就完成了。

哈喽,大家好,今天我们给大家分享的就是我们的交互图怎么去画,那我们现在看到的这样一张图呢,就是我们插在这个需求文档里面的一张交互图, 嗯,对于这个需求文档应该是怎么样的,如果大家感兴趣的话,可以在评论里面回忆,然后我把这个需求文档的链接发给大家。 交互图的这个画法呢,其实是比较多的啊,我们可以用这个飞个马,飞个马是一个圆形和这个 ua 设计的工具,也可以使用墨刀里面的流程图和圆形图两种不同的这个墨刀提供的功能。那其他的工具大家也可以自己去了解, 这里的话我就不再去追述到底都有哪些方法可以画。嗯,大家要记住的就是不管是画圆形图还是画这个交互图吧,我们能够使用各种各样的工具,最终我们找到我们自己使用起来比较顺手的工具就可以。那我们从飞格马开始,飞格马是一 网页应用,所以大家不需要下载任何的这个客户端啊,只需要通过我们的这个网站,然后你去搜索一下这个飞哥们就可以进入注,完成注册就可以开始使用了。然后大家在注册成功之后呢,点击一下那个红框那个创建新的那个文件的位置,就可以进入到飞哥码的这个画布了。 在进入到画布之后呢,我们就需要创建一个新的这个页面,这个页面我们给他取一个名字叫抖音交互图, 后续的话我们就需要在这个页面里面去插入不同的这个啊。屏幕这里我们就选择的是 iphone 四三 pro, 那我可以通过这个复制粘贴把这个屏幕空白的屏幕创建多个,对吧?我们假如说是有六张图,那我们就需要创建六个屏幕, 在创建完这个屏幕之后呢啊,我们就需要去把我们的那个呃图片给他复制粘贴进来啊,在粘贴进来之后,我们看到 这个屏幕的宽度他是三百九,所以我们就把图片的宽度也调成三百九,然后再把这些图片一张一张的给他放进去,再放进去之后啊,我们会看到那个底下会出现一段空白嘛,因为我截图是用的安卓去截的这个图, 所以我们就选中上面的这个页面,这个时候我们需要按住 shift 去选择这个页面,选择完了之后把页面的高度调整为七百九十五,这样我们的这个页面和我们这个图片啊他的比例就一样了,我们通过拖拽呢,可以去把他这个位置变成是我们需要的那个最终的位置。 接下来我们需要去做的一件事情呢,就是要把所有的这个页面选中,然后给他进行一个锁定。我们去这么做的原因是因为我们后续需要在这个图的基础之上去加入我们的点击区域,加入我们这个箭头,那因为我们加入的这些点击区域和这个箭头他实际上并不属于我原 原型图的一个部分吧,所以我们就需要在嗯加入这些箭头和点击区域之前,先把已有的这些页面进行一个锁定。 那锁定的方式呢?就是在我们现在的这个地方点击右键,然后选择呃底下的那个锁定,这样的话我们整个这个已有的这些部分就被锁定,你就无法再对他进行任何的移动和修改了。 接下来我们要做的就是在机械图的上面去给他插入我们所谓的这个点击区域哈,我们就可以通过这种给他画一个框的方式,然后对这个框把他的这个填充给他删除掉,然后变成只有那个空白的填充,只有边框,把边框的颜色和边框的那个 出息调整,然后再去画箭头。那这块我们要做一个判断啊,如果用户没有登录的时候和登录的时候有区别,那要去做这个菱菱形的这个东西,我们就画出一个正方形,然后把他的这个 角度调整四十五度,然后把它拖到这个对应的位置,然后上面加上文字可能是这个用户是否登录,然后通过右边去对这个呃这个区域这个文字的这个行属性进行调整。 然后再接下来的话,我们就需要去给另外一条分支去画这个线,这里的话我们画出来这个箭头本来是直线,那我们就需要选择到其中的那个小点,然后对他进行拖动,让他变成一个直角啊,然后写上对应的这个文字未登录。 嗯,其他后面的这个操作的部分呢,就是比较类似的了,我们都需要去通过这个矩形的这个组建,然后就画出来一个框,然后把这个框的呃填充删除掉,然后给他选择这个对应的颜色的这个这个边框,然后再去加上这个箭头后面的部分的话就 跟前面是一样的了,然后我就不再给大家注意数了,这块的话大家可以慢慢的去学会使用它对应的这个快捷键啊,比如说画矩形是用 r, 然后画这个箭头是用我们的 shift 加上 l, 对所有的这些快捷键你掌握了之后呢,你的这个效率就会相对而言会高很多。 等到我们把所有的这个箭头都画完了之后,我们这张图就已经做完了,接下来我们就要用这个切片的工具,大家可以按这个键盘上的 s, 或者用鼠标去点击这个 slides 的这个位置去选中这个区域, 然后再点击右侧的这个导出,选择三倍图,你看一下这个预览没有问题之后点击这个导出,这个时候你再打开你你你就这张图片就能下载到你的本地了。然后你再打开这张图片看, 基本上就是我们在最初给大家看到的那个呃图片了,大家如果学会了的话可以弹幕一个一,如果学会了的话可以弹幕一个二。

为什么大厂的设计师都在用飞哥吗?啊啊?首先,飞哥嘛支持麦克以及 windows, 同时两端系统同步,支持无系统账号区分。第二点,飞哥嘛基于服务器数据存储于云端,避免多设备设计搞不同步麻烦。 同时菲格玛也是支持桌面端应用的,点击左下方选择对应系统即可下载。如果你看到这里,那么恭喜你!重点来了,菲格玛相比较 steat, 目前最大优势就是在线协同设计、远程办公或是在线修改设计稿将会变得非常简单。最后,菲特曼还有个强大功能,社区功能菲特曼社区是菲特曼最大特色之一,你可以在社区内看到大量优秀设计案例, 甚至你可以一键复制当前喜欢的案例,通过看他的原文件学习精进自己的设计能力。如果你还想了解更多菲格玛知识,关注我,后续持续更新。

因为这对浴足,我又买了肥姑妈,看这些细节他是懂宅男的,那我们就来看看这款带毛衣的素体究竟如何?他的卖点就是这款小毛衣了,素体上的细节你们不关心就不看了,套上毛衣之后要把他的衣领翻下,穿好之后就是这个样子啦。然后我的面相中规中矩,高度比 普通的六寸矮一点,自带的是长靴。赶紧给他换上丝袜替换件,换上手型和替换表情是不是就更可爱了,看着人都精神了,给他加上底座,站立的姿势就能更稳。再来看看 他的可动,后背弯曲的幅度相当惊人,所以这种瑜伽姿势也能轻松拿捏。腰部向前弯曲的幅度有限,但是胯部没什么限制,所以趴着的动作你想怎么摆都可以换。主要的问题就是肩膀粗细,衣服对可动有干涉。虽然他只是一个塑体和毛衣的搭手,但是作为二次元的老婆是足够了。

五年前诞生了一款设计工具,一开始无人问津,甚至没有人看好,后来他一己之力吊锤了市面上几乎所有的对手。没错,他就是我们今天的主角 fig 嘛。 市面的设计工具很多,为什么选择菲格曼呢?我们先来看一下 ext too 死近三年全球设计工具的旋律情况。 数据上可以看到,一九年飞克马的使用率还是明显落后一次给值。但是呢,到了二零二一年, 仅仅两年的时间,菲格玛使用率涨到了百分之七十七,提升了足足百分之一百零八,这什么概念呢?十个设计师中,八个都是在用菲格玛,但是 skr 使用率从百分之六十一下降到百分之二十九,暴跌了百分之五十二。我们再来看一下迄今为止的榜单,可以看到,无论是使用率还是评分,菲格玛全都稳居第一,而且越来越多的大厂也都开始使用菲格玛了。 由此可见,飞个马成为设计师的主力工具是全球趋势,如果不会,飞个马很可能会影响到你接下来的求职。 那么问题来了,对于设计师来说,转移工具的成本其实是相当高的。那么为什么大家都开始从 sga 只迁移到菲格玛呢? 首先,飞哥马有跨平台的优势, sky 独家 mark 系统, vnness 系统,用户是无法使用的。而飞哥马基于网页,无论你是什么系统,只要有网络和浏览器,你就可以随时随地的使用。飞哥马工作不受物理设备的 限制,最典型的例子就是我们在疫情影响下,可以迅速实现远程办公,不需要任何门槛。 飞克马的第二个优势呢,是多人协作的优势。首先是上下游协作,在以往,设计师对接开发需要第三方工具雕塑切图,对接需求方需要额外导出设计稿,加上设计稿频繁的修改,仅仅资源对接这一块就需要耗费大量时间。 现在呢,有了飞个马,只需要一个链接,我们就可以让许球方和开发看到我们的设计哦,而且呢,他也支持开发直接查看标注跟切图。 其次呢,是设计师内部协作,传统的设计师协作呢,我们单线城处理各自负责的部分,在涉及到公用的模块组建,需要频繁的依赖于本地传输,耗费成吨的沟通成本。比如下面这个场景,不知道你 有没有很熟悉呢?而我们现在有了飞个马,我们只需要在项目文件中建立多个配置,每人在各自的配置中做图,就可以随时查看对方进度, 有够用的地方拿来即可,免除了大量的协作成本。飞克马的第三大优势是他的社区优势。对于设计师来说,原文件除了工作对接和拿来换钱外, 不到万不得已基本不会轻易示人,就算是 jibo 比汉斯这样开放性的社区,也紧紧停留在作品展示上。而菲格玛是程序员社区 gap 熏陶,通过社区功能实现了开源共享的模式,全球的设计师都可以在社区上传自己的资源, 这个模式厉害在哪呢?你在社区看到任何自己喜欢的资源,全都可以一键复制到自己的飞科马上 尤文件的每一个图层组件路径全都有,比方说我想用到 odb 系列产品的 logo, 以前呢,都是在网上搜,要么护,要么没扣底。那现在呢,可以直接去飞马社区搜了。而且呢,很多都是合集,比如这位老哥做的品牌 logo 合集,看着还不错, 我们只需要点击 wind 按钮,原文件就变成你的了。可以看到,原文件里面涵盖了大部分的主流品牌 logo, 而且呢,这些 logo 全部是作者自己一个个出生画的,形状、颜色等样式都可以任意 diy。 里面呢,还有很多其他东西,比方说三 d 素材、作品及大厂规范等等。当然,它还包括必不可少的插件资源,数量非常多。我后面呢,会把我用过的实用插件主意推荐给大家。通过以上 上三个方面,足以证明飞格马确实有碾压并取代 sky 的资本。当然,飞格马强大的地方远远不止如此,比如性能、文件管理、功能、操作等等方面,他都有极大的优势。关注我,后面呢,我慢慢跟你细说, 希望你能喜欢。本期视频我是设计学安九,我们下期见!

想必大家一定遇到过飞哥吗?打不开,网速慢的情况,那么今天告诉大家如何去解决。本教程来源于网上的一篇文章。首先我们需要准备这两个工具, 一共分为两步,第一步,打开这个文件,等他下载完成后复制这一串文本。第二步,打开 swet hox, 点击左上角的加号,给他起个名称,点击确定,然后把刚刚复制的文本粘贴到这里来,点击启用按钮就 ok 了。关于工具,我已经放在抖音粉丝群了,记得查收哦!

我猜你肯定也遇到过这样的情况,看着一堆密密麻麻的文件,哎,我,那个文件存哪来着?上次做的那个文件叫什么名字来着?这个文件当时是哪个版本? 你历经千辛万苦,终于找到了你需要的文件,打开文件之后,发现他居然是个废弃的版本。我尼玛,或许你有着良好的文件管理习惯,但是新的问题也有可能会困扰着你。这个文件和上一个版本有什么区别? 当然,这不是你的国,我们的习惯呢,是面对问题给出答案。作为设计师的答案呢,就是一个又一个的设计文件。我相信有的时候你的答案远远还不止一个。 呃,所以我们做文件如果不及时整理呢,就会变成这个样子。即便你有整理和归纳的习惯,但是传统的目录结构的管理方法呢,又显得没有那么灵活。嗨,我是胶布。在接下来的十分钟里,我们将了解一种新的文件管 管理思路。首先要知道设计文件是如何产生的, ui 的设计呢,多是服务于产品的,而产品本身呢,会按照一定的周期进行更新,也就是所谓的发版 发板呢,会包含若干个功能。这里的功能呢,也可以叫做需求。其中每一个需求都相当于一个问题,都是需要对应档案的,也就是设计文件的支持。按照以往的管理方式呢,是直接面对需求进行管理,你的文件很有可能就会变成这个样子。 要是按照版本记录呢,在进行更新时,又需要在各种文件夹中来回穿梭,用起来还是有点麻烦。我们不妨尝试着换一种思路,创建一个记录文件,因为需求本身呢,他可能是一句话或者是一个文档,只需要我们记住就好了,哎,交付款,来来来,给你看一下这个需求,那吊炸天的需求 至少提升日活百分之二十,我跟你讲,这个绝对是用户刚需,用户一用就得喜欢上这个东西,你就说吵吵谁吧,哎,你这我也不太喜欢,来咱们看一下这个 app。 而处理结果呢,是一个又一个实实在在的文件,把记录和文件本身分开进行管理,他们之间用连接的方式进行管理。还记得文件是怎么来的吗?是发板中包含了需求,需求需要对应的文件, 那么我们可以把版本和需求这两个记录给提取出来。具体的设计文件呢,独立存储记录文件,通过链接的方式跳转到不同的设计文件,这样看起来是不是显得会灵活一些?那么接下来我们尝试增加一个虚拟项目,阿尔法版本,其中呢有两个需求,需求一 需要 a 页面,需求二需要 bc 页面。首先呢我们需要创建一个记录文件叫阿尔法,里面呢包含了需求一和需求二, 这个时候呢,我们把需求一的链接哎拽到 a 页面上来,需求二的链接呢,拽到 bc 页面上,这样看起来效果还算不错。 这种管理方式用到飞哥们上,我们来试一下效果。我们需要做三件事,首先呢我们需要创建一个目录文件和按照产品功能去创建设计文件。 首先呢是目录文件,这个目录文件我们也可以管,他叫做记录文件,他本身呢就是一个普通的费格网文件,在左侧配这四一栏呢,我们用来记录版本,每一个版本我们用一个配置进行表示。画板区域呢,是这个版本所 包含的需求,每个需求呢又会包含对应的功能页面,这样看起来好像还不错。不过为了区分每个需求在工作中不同的状态,我们可以再增加一行状态栏。呃,把这个记录文件呢做成一个任务看版的形式,看版从左到右依次为未确认。 呃,这里面放的是我们已经知道了,但是还不确认做不做的需求。收件箱需求和时间都明确了,但是我们不一定有时间立马开始做,然后我们可以把它放到收件箱里面等待去制作。 制作中呢,就是我们正在处理的这个需求了,带过稿呢,是我们做完了,需要和产品或者是开发进行确认的内容。呃,开发中呢,是设计确认完了都没有任何问题了,可以开发去实现了,然后再验收。是开发已经完成,然后等待我们设计 进行一个验收。已上线呢,是确认没有问题的需求之后,等待合并成集成包的需求。每一个需求呢,都会变成一个卡片的形式, 按照常规的工作流程呢,所有的卡片都会依次从最左侧挪到最右侧,然后都是一个已上线的状态,那么这一个版本的需求呢,就全都完事了。接下来是设计文件,这里呢我介绍一下我使用的管理方式。拿一款大家都比较熟悉的 apple 微信来举个例子, 我们可以按照 apple 功能呢进行设计文件的管理。首页呢,他可以是一个功能文件通讯录,发现我各是一个文件。 那么每一个功能文件的配这四一栏呢,会包含三种内容,分别是封面,可以帮助我们在飞哥码中快速定位文件。呃,他的尺寸呢是七百八十五 pt, 高是三百五十 pt, 这里面呢可以写上他的功能名字。 然后接下来呢是对应的设计文件。呃,前面四位呢是我们的需求号,这个需求号的话一般是由产品去记录的,每一个需求只会对应一个号码,这个号码呢必须是由产品设计开发,能达成一致的一个标准。 后面的版本呢是记录了这个页面的更新次数。呃,小数点。后两位呢是记录了简单样式的更改,比如说我改了这个页面的文字字号颜色,或者是调整了图标的大小。 小数点后移位呢,是记录了这个页面的功能框架的修改,比如说我在这个页面新增了一个功能。小数点的,前一位呢是大版本的修改。 呃,这个可能和上一个版本的设计是完全不一样的。最后呢还有一个仓库,这个仓库呢是用来存放我们一些飞机稿的。此外呢,我们还要给这个设计文 键增加一个标题,这个标题呢是和记录文件的需求保持一致的。在标题的后方呢,我们再增加一个记录文件索要链接的版本,接下来我们就可以把功能文件和版本记录给关联起来。在功能文件的 plus e 栏里面,右键选择对应页面,我们选择 copple 配置, 到版本记录中,找到对应的需求,然后找到对应的页面,然后选择文字,我们按一下键盘上的 ctrl 加 k, 或者是选择上方的创建这个链接, 在弹出的文本框里面,我们直接粘贴刚才所复制的链接就可以了,这样的话一个带有跳转链接的版本记录我们就可以做好了,这个时候我们就实现了版本记录跳转到对应设计文件的功能。另外为了方便我们跳回这个版本记录,我们可以在功能文件的标题的右上, 然后把他的这个前往版本记录也在创建一个链接,我们复制对应版本的页面链接,粘贴到对应的这个标题上,这样一来呢,就可以实现文件之间的快速跳转了。 一起来回顾一下版本式文件管理呢,主要有两部分组成,负责记录的版本文件,每一个配置里面呢包含了需求状态和需求卡片。 啤酒卡片里面呢,又包含了对应的功能页面的名称,另外一堆呢是以功能作为记录的设计文件,再配置一栏有封面,把笔记录和一个仓库,每一个配置里面呢又会有导航标题。 最后呢,他们之间用令客的方式进行关联,就实现了飞哥马的版本式文件管理。接下来模拟一个在工作中可能遇到的情况,比如说预计一点零点零二版本有三个需求,首先呢,我们需要新建一个一点零 零点零二这个版本,先把它记录下来,然后再增加任务处理的状态栏,再增加三个需求卡片。最后呢,我们依次将需求名称填写进去, 在对应的需求卡片里面呢,我们再填入页面名称到这里呢,记录文件我们就算创建完成了,接下来呢就是去找对应的功能文件,如果没有对应的功能文件,我们直接创建一个,记得加上封面版本记录和仓库。然后我们开始画界面, 假装这是界面画好了,在界面上方呢,我们记得去增加一个标题,把引导的标题呢给改掉,复制一个配置链接,粘贴到对应的需求的页面文字上,再将这个版本页面的链接粘贴到导航标题上,这样的话,我们第一个需求就算添加完成了, 其他的两个需求呢,我们用同样的方式进行添加。使用这样的文件管理方式呢,不管是产品设计师还是开发,在日常的工作流程中呢,我们只需要关注一个版本记录就 ok 了, 就可以快速的找到我们对应的文件内容。视频中所用到的文档呢,我会放在评论区中,大家可以自行下载。最后祝各位生活愉快,再见。 拿大家一款都比较熟悉,拿一款,大家都拿,拿大家拿一款,大家都比较对。

太离谱了,我真的觉得我本科四年工业设计白学了,我刚才用 e m g 二点零,发现它可以直接生成那种可编辑的 p s d 文档或者 svg 格式的海报,就是它可以直接导入你的 photoshop 或者 figma 进行编辑。 如果大家不理解这是什么概念的话,就是 ai 已经学会用设计师的工具来做设计了。那么话不多说,我们直接演示一下它的提示词是如何生成的,就是首先我们一定要选择一个 g p t 五点五 thinking 的 模型 啊,我之前也试过其他的,比如说五点三,他都没有很好的效果。选好模型之后,我们就随便的输入指令啊,比如说让他帮我们去生成一个鸡蛋糕的海报,他很快就生成出来了, 而且我们在全网也可以看到啊, emoji 二点零的生成效果是非常好的啊,但这不是重点,接下来才是核心,就是我们让他把海报的逐个元素精准的单独拆分开, 并且不要改变相对的位置,以便可以在 photoshop 中贴合。我把提示词就放在这里,大家可以截图领取。然后就是大约过了一分钟左右,它就可以生成一个所有元素都独立分开的文件, 从背景到文字,每一个元素都是独立的,大家可以看到啊,这个效果真的还是蛮好的。随后就是说我让他把底部的这个白色抠除,然后整体可以合成一个 p s d 文件,把这个文件发给我,这个也是一样啊,提示词大家截图领取。然后也是过了一分钟左右,他就把完整的 p s d 文件生成好了, 关键是它不仅能生成 p、 s、 d, 它连 f、 g 那 种需要的 svg 格式它也能生成。大家可以看到就是每个元素都是独立拆分的,随时可以隐藏。而且你要想编辑其中的文字或者图像的话啊,具体的大小你随时都可以调整, 就比如说你觉得这个鸡蛋不够大,你就可以直接放大,一点也没关系。我觉得这下就是海报设计的,它底下的白边还没有抠干净, 但我觉得模型进步这么快,大家可以想一下一个月之后会是什么样的变化。我觉得之后 ai 生成的图都是分层的,不会再是单一图层了,而且之后我们想要改什么,只针对其中的某一个分层进行定制化的编辑就可以了。 所以说这个对于我本科学了四年工业设计的人来说,真的非常的震惊,因为我们当时学 ps 就 学了差不多一两年的时间,但是现在 ai 就 可以操纵这些工具去帮你生成海报, 生成一些专业的编辑和定制化的内容了,也许马上一个人用 e、 m、 g 二点零就能干掉五个人的设计师工作室了。所以说我真的建议很多现在还在学设计的同学啊,没有必要再学学校里面那些过时的知识了,更重要的是赶紧去学习怎么掌握 ai 这样的技术,然后利用这些技术去批量的接单。 其实现在有大量的场景可以做啊,就比如说一些公众号的封面和订阅,对吧?未来一个人可以接五十个号啊,就算每一个客户你一个月只收他两百块钱,那一个月也是一万块钱啊, 而且还可以做小红书的电竞详情页,你还可以做跨境电商的一些海报素材,就是机会还是非常多的,只不过是大家不会再用那些传统的工具了。我觉得未来就是拼这个批量化和定制化的,如果你不学 ai 的 话,你的产出效率跟别人用 ai 的 根本就跟不上。

谷歌上线了一个东西,设计师看完要集体失业了。每天认识一个宝藏网站第六十期,今天分享的是 google stitch, 这是一个只需描述想法就能直接出设计稿的网站。不管你是做电商的,搞萨斯的,还是做品牌的,模板直接选,选完再改。比如你想做一个健身 app, 直接打字描述你要的效果,选模型几十秒,首页训练计划、社区、个人中心全出来了,点预览,所有页面串联,直接可以交互哪个元素,不满意点一下改。更牛的是,在纸上随手画个草稿,它也能给你变成专业设计稿,相当于把几千块的 u i y 包费直接省掉了。

在菲格玛里,我们只要加入一张长图,无论多么高清都会被压缩成纸一样的画质。这个其实是菲格玛为了降低内存占用,所有宽度或者高度大于四零九六像素的图片都会被等比例压缩。 我们只需要打开这个 insert big image 插件,然后再将长图拖入 figma 画布中,就可以实现原尺寸的无损插入,跟原图一样清晰。

逼疯程序员的不一定是代码,还可以是设计师,当他新建花板的时候,程序员就生死难料。随后画一个和花板一样大小的矩形,调整亮一点的渐变,随后画出一个类似八层的按钮,并且添加画框。 他居然还给画框添加秒边,并且圆角值给到最大,随后更改矩形颜色。谈小间他就下了一个蛋,修改颜色添加的阴影,机智的他选择了同类色, 随后又下了几个大小不同的蛋,拼合成云彩的形状。调整大小位置后降低不透明度,复制一层,调整位置并置顶 下。不出蛋的他画一个圆形,改为底色备用,随后用星星工具画出星星,一闪一闪亮晶晶,满天都是小星星。 适当放大后,直接透明度改成零,选中按钮画框,勾选裁剪内容,趁你不注意,他就把画好的 ui 复制了进来。给文字添加画框后,分别原位复制颜色改为白,名称改为一,也可以改成零,但我不是,我就不改。 随后白色文字上移,注意文字图层要在画板内,但文字不要在画板内。随后复制画板,改变背景颜色,将白色文字移入画板,黑色文字移出画板。 回到按钮,把云彩吹走,星星透明度改为一百十档缩小。随后调整第一个蛋的颜色,并且调整顶部的圆形颜色和背景色一致。最后给按钮添加胶糊,触发模式为蛋机 智能动画前后晃动,动画时长居然给到一千。最后打开预览,一个简单的按钮,动画就做好了。五星评论家麦克阿泽表示,当我看见十八座设计的时候,我就知道做设计能赚钱,因为被开发档案可以赔! 跟着十八学设计迟早开上,法拉利大型设计纪录片持续为您播出!