figmamake是什么工具

pencil 对 决 figma， 谁才是未来的 ui 设计工具？废话不多说，今天我们直接上硬核 pk。 首先我们打开 figma make， 告诉他需求，简单的描述下页面和风格，同时选择 g m i 三点一 pro 模型 发送出去，可以看到正在生成中，绘制过程稍微有一丢丢慢。好了，生成的效果出来了，看着比较简单，页面可以满足基本需求，而且直接自带交互，极其丝滑。但我想试试 cloud code 的 四点六模型效果，我再次生成一遍。 ok， 生成出来了 效果更好，推荐大家多尝试。这里再打开 python， 我 们可以选择官方内置的各类规范，不用担心没有规范而乱套了。这里我们选性价比更高的 g p t 五点四模型， 开启多线城，也就是多个 ai 同时进行。再将同样的需求给到 python， 我 们再点击开始生成，可以看到 python 正在批量生成中，注意看有六个 ai 打工人同时在帮你干活，可以看到每个 ai 工人都在分析和工作中，是不是好像在掌控着一群人。 并且生成的 ui 界面很专业，一步步的把每个板块生成出来了。设计出来的版式与功能很细致，但画面的效果不如斐格玛丰富， 这时我可以随意拖动，想改点小细节，手动微调，非常方便。这点就比较类似斐格玛的编辑功能。在右侧可以看到与斐格玛一样的编辑区，自由度很高，掌握感非常棒，这点盘搜完胜。相比之下，斐格玛没有官方的内置规范，如果想用一套规范还得自己去添 家，比较麻烦点，生成的 ui 想手动修改，得一个个复制，复制出去后想再次让 ai 编辑就比较费劲了。但飞格玛 mac 可以 单独让 ai 或手动修改某个点， 这个功能还是非常便捷的。但别急，开发交付才是重头戏。告诉潘素，帮我开发出来， ai 工人就能直接帮你开发。可以看到 ai 开发工人正在进行中，飞格玛更狠，生成出来及时预览交互效果， 一键发布出去就是前端 html 代码，这里我们预览一下，效果非常 ok， 带有一定的交互，基本一比一还原了。另外在设计图右键发送给 mate， 也能一键生成前端代码，一比一完美还原，设计开发一体化。综合来看，飞格玛目前依然抗打，而像素胜在直观，速度快，质量高，易上 手。我的建议是，完全不懂设计的小白，无脑充，像素快，小白专属专业设计师依然是飞格玛， 它的生态和 ai 能力还是很 ok 的， 但也强烈推荐试试 pencil。 最后需要 figma 和 pencil 的 使用步骤。评论区留言记得点赞、关注、收藏！我是大木，关注我，跟上 ai 步伐！

大家好，我是杰杰。 figma mcp 呢，有个非常好的升级，现在你可以直接在 figma 画布上使用 ai agent 进行设计。它呢主要是通过 user figma 的 tool， 让你通过 cc， codex 或者其他 mcp 的 客户端生成修改你的设计系统相关联的设计资源。 figma mcp 呢，已经存在有段时间了， 以前呢，有一个工具是 generate figma design， 可以 将实时应用和网站的 htlm 转化为可编辑的 figma 图层。那全新的 userfigma 工具呢， 就是让 ai 根据你的设计系统直接在它的画布上进行操作。 figma 和它的合作伙伴还分享了九个 skills， 大家可以看一下。 scales 呢，它可以通过自我修复，循环塑造输出的细化方式。当你使用支持视觉的 ai agent 的 时候，它会不停地截图，然后迭代不匹配的地方。而且这次 figma 开放了对 code connect， figma joy， 还有 figma 的 界面的访问。 figma 官方的 mcp 免费用户，它呢是提供最多呃，每月六次工具调用，基本上是不能做些什么的。 如果你想让 ai 在 figma canvas 上做设计，那就需要去啊订阅它的 dev 或者是 for 席位。 figma 的 figma 的 核心功能呢，有这些，那它怎么安装呢？比如我这里用的是 cursor， 那 我就在它的设置里有一个 marketplace， 找到 fake 码，点击一下安装就行了。如果你是在 c c 里，那可以通过这行命令来安装官方的 fake 码。安装后呢，需要你印证一下身份。如果是在 codex 里使用，那先添加各个 skill， 再之后呢，在设置里面添加 mcp server， 并且点击 fake 码服务器的安装并且认证。现在来看一下 fake 码 mcp 各个工具的讲解。 get a design contest， 它可以获取 figma 选择的上下文，默认输出是 react 和 tailwind。 你 可以这样提示 ai generate figma design 呢，它可以将网页捕获，导入或者转化为 figma 的 设计。 get a variable defines 呢， 它是返回设计中使用的变量颜色。 get code connector， 它可以解锁 figma 节点 id 与代码库中 相应代码主键之间的映设。 user config 码，这也是一开始提到的，可以让 ai 在 它的啊 canvas 里面做一些设计。 search design assistant 呢，这也非常好理解，可以搜索所有连接的主键库。 create new file， 你 可以提示 ai 呢，在 config 码里面新建文件， 不需要给它一个既定的链接。使用。 m c p 有 一些最佳实践。飞格玛官方呢，还推荐将飞格玛 mac 和飞格玛 m c p 结合在一起。现在呢，就来介绍一下我通过飞格玛 ai 来帮我做了哪些事情。我在酷狗里面提示 ai 呢，呃，当时用的是 op 的 四点六， 我让他根据一份设计系统的文档来生成可折叠手机应用的新的 figma 设计页面。在这里呢，我选择了 plan 模式 opt。 四点六，在这里呢，做了六个阶段的计划，再接着就让他去开始执行。 我们看到他在呃和 m c p 对 话中，先会解锁一下我这个 figma 有 没有认证过。 然后呢，开始使用啊，创建 new file tool 来创建一个新的文件。 再接着呢，就使用 user 呃 figma tool 在 figma canvas 里面做设计。之后他就开始创建设计 token， 颜色变量集合，检查字体。 再接着呢就创建第一个屏幕了，创建好了之后他还截图验证了一下，我们先不看这个书名和这个作者 啊，它这个其实没有一一对应上，整个截图可以看出它的设计还是比较淡雅的。再接着它创建第二个 screen， 再之后第三个，第四个等等 一次提示，他就帮我创建了这么多页面。创建好了之后呢，也给出我相关的链接，并且告诉我完成了四个中文页面。来到飞克玛的页面，我们可以看到四个图层都是呃 ai 帮我去生成的，他遵循的是我一开始给他的设计系统语言。 我们看到这里的内屏展开的主页，还有书架部分，还有包括沉浸式阅读这一页，其实我特别喜欢它的设计啊配色，包括它这里选的文字也都是非常不错的。外屏呢还有一个折叠态， 它还模仿了这里的 wifi， 还有电量时间，下方呢就显示如果一开始进入这个书架 会最近的活动是什么，还有快捷操作。我觉得 open 四点六在这一点上设计是相当好，我在上一期视频里面有讲到谷歌的 stitch， 我 就是通过谷歌的 stitch 提示它生成可折叠安卓的阅读应用， 它就帮我生成这些我们看到的画面。左边呢是它的设计语言，当我点击右侧有一个画板图标， 选中它，然后有一个 design markdown 复制一下，我将它翻译好呢，然后呢就放在 cursor 里，让 opt 四点六根据这个设计系统来生成我们在 figma 页面上看到的这些页面， 我个人觉得它的整个啊颜色设计语言保持的还是相当不错，包括我们现在在这里看到的这样的一个啊，排版渐距风格 也是非常像啊。一开始 stitch 在 这里设计的样式，换一个模型， 让 ai 通过菲克玛 m c p， 它会设计出什么样子呢？这里是呃 curda 最近推出来的 comproger， 二来设计的它帮我是做了两个简单的页面，这个页面呢，整体是比较简单的， 色彩的话和我一开始给他提供的啊设计语言 markdown 文件还是非常像。再看一下他的折叠台，这里呢，他的设计就不是特别像折叠屏了，折叠屏的话，虽然说他的屏幕也很大，但是左侧这样的一个图标设计还是太小了， 包括它展现的内容也比较少。那我在这里呢，一是用到了 compose 二模型，第二呢，当时是没有通过计划模式来让它多展现一些内容， 所以他一开始呢帮我构建的页面我们看到是非常简单的。现在来看一下如何让斐格玛 m c p 来做出这样的小鸟儿童理发店的 landing page 页面，并且最终呢让 ai 生成一个真实的页面。 我们看到这些图片是 curses 调用 banana 来生成的。下方啊有服务项目，理发流程， 门店环境、家长评价、提前预约等等，包括这里的有常见问题，这个程序我是通过 gpt 五点四 medium 的 推理程度来最终生成的。在做应用之前，我是先找到了多宁国的网页 啊，这里只是作为一个演示，我们可以看到多宁国的这个风格呢啊，它的图标 logo 是 绿色的，整个页面是比较可爱的，会有一些这种圆角的元素。在克尔这里就提示 gpt 五点四， 让它基于多宁国的网站，在飞克码中创建一个完整的设计系统，创建一个包含遍体的主件库，并拉取真实的 logo 文件， 使用真实的字体和颜色系统将所有这些内容创建在一个新的 figma 文件的单页上。它呢，就先获取多灵国的素材，我是参考 啊 factory ai 它的一个提示。然后呢，开始调用 figma mcp， 在 过了一段时间之后，它就提示我， 他已经拿到了这些真实品牌资产。然后我就告诉他，用真实的颜色和官方真实 logo， 同时把字体规范写进设计系统。但主页里的可编辑文字呢，先用别的一个字体来代替， 再接着他就生成了这样的页面，放大一点呢，可以看到他用到哪些色彩， 还有字体真实的官方的 logo， file， 还有可变的主键库，输入框，卡片素材等等。再之后呢，我就提示它参考目前设计风格， 做一个单页小鸟儿童理发网页 fik 码，设计页面需要是中文页面，在 fik 码上它就会呈现这样的页面，并且呢它提示我啊，它可以将这个网页再细化，做成高保证的版本，于是我就让它做成高保证的版本。 有一个卡片呢，用到了橘色的一些元素，那我觉得这个橘色呢跟整个页面不是特别搭， 所以我就手动调整了这个卡片的一些背景字体颜色。那之后就新开一个 cursor agent 页面，将这样的一个链接放这里。这个链接怎么获取呢？就是在左侧 选中一个 layer， 右键选择啊 copy link to selection， 就 可以把这一股整块都选中了。做一个 link， 放在 ctrl 对 话框里， 让 ai 呢根据链接生成 react 应用。然后它就调用 get designcontestinfact 码，开始编辑代码了，很快就将程序写好了。 他说呢，呃，现在这个里面的有些插图和图标用的是 figma mcp 返回的远程资源链接，这类资源通常不是永久的，它可以生成一些图片， 于是我就让它调用图片生成功能，为网页生成合适的配图。它会调用谷歌的生图 nano brother。 啊，我看到他生成的这三张图片呢啊，除了第三张可能没有那么完美，前两张还是非常不错的。接着我就让他把这三张图放到当前的页面里，换现在的远程飞克马图片，并且让他适当的添加一些啊谋选动画效果。 最终呢，就让 gbt 五点四生成了我们现在看到的这样的一个样式。在这里呢，没有调用 flunt and skills， 而是使用了 figma mcp。 啊一开始设计好的一个设计的元素， 然后最终生成了这样的页面。我个人觉得啊，飞格玛 m c p 在 这里应用还是非常好，非常方便的。刚刚介绍的这两个案例呢，都是让啊 ai 通过 user 飞格玛 to 来生成。 那现在呢，再看一个案例，是调用飞格玛 m c p 呢，来根据我现有的一个程序 来做一些啊元素的一些调整。我首先让他看一下我现有的代码文件，问他可以通过 figma m c p 来做哪些？呃，主键之后五点四呢，告诉我建议先做这几个部分，然后呢我就让他 啊做一个 voicerm studio 主键页，并且要深沉到 figma 的 canvas 里。 当时我是给他新建了一个新的页面，即使你不给他创建一个新的页面也是可以的，他是自己会创建一个新的页面。之后就可以看到 ai 呢在 figma 的 页面上去生成了这样的一个页面， ai 在 生成截图发现呢，这里啊高度有些问题， 他又自己去调整了一下，这个就是他当时生成的一个主键库页面，左边是主键集， 右边呢是一个组合视力。再接着我提示 ai 把这些视觉主键呢继续升级成更规范的 figma 设计系统。补一页完整的 memo voice studio web 页面端界面，这是一个 cover， 这是设计系统的基础样式集，那我们可以看到它这里列出了不同的 color 字体， 还有包括字体有不同的大小，这里也展示出来了，还有不同的啊，主键，这是 actions 啊，这是 feedback。 之后呢，他又帮我去做了啊，五个页面，那我们可以看到呢啊不同的 web 端页面， 还有桌面端 setting open 的 状态。最后呢还有手机端展示的一个页面，整体而言做的内容是非常丰富的。最终呢， g p t 呃，给到回复说已补全这些不同的页面。 创建了啊样式集啊，包括变量集合，颜色，羽翼，渐距羽翼，文字样式，阴影样式， 还有这些主键库，他也是帮我拆解出来了，大家帮我们做出这样非常详细的一个拆分，那就非常有利于我们后续啊程序功能的增加调整 啊，不同页面设计语言保持一致。最后再给大家看一下如何让 ai 啊将一开始 啊这样的一个设计，之前是通过飞格玛 ai 做的一个页面，然后让它调整生成右侧我们看到的这样的一个设计。首先呢，我先获取到一开始设计的 url， 让它改成啊瑞士设计风格。 然后呢，它告诉我在读取这个页面之后就触发了 starter plan 的 调用上限，所以它没办法改。 之后呢，我就开始升级 plan 了，包括我们刚刚看到的其他三个案例啊，都是我升级 plan 之后去做的。再接着他就开始设计了，我们看到这边呢有一大块是呃空白的， 于是我就截图让他去调整一下，这是 ar 优化后的， 可以看到有了一些改变，当然这部分内容的话，可能你手动一下会更好一点啊，毕竟调用这些 ai 的 话也不是特别便宜。 最后呢，我还让他把页面呢导航做的更醒目一点，整个页面做成中文，让他确认某个字体可用之后， 瞬间呢就啊切换成了中文这个页面。虽然说目前这个页面呢还是有不少的问题，但是呢，我们可以看到 ai 在 调用 usefigma 啊这个 tool 的 时候，生成效果还是非常好的，它的修改速度也是非常好的。 我个人呢是啊，不怎么会使用 figma 的， 那通过 figma mcp 它可以来帮我们去轻松地来做到这一点。

figma make 一 键生成 ui， 效率直接翻倍，三步搞定一整套 ui 界面，亲测好用！第一步，打开 figma， 点击右上角 make 图标，进入 ai 界面。第二步，上传参考图，粘贴你的设计框架或直接输入需求。 第三步，按下回车，等一小会就会生成一个带交互的 app 原型。 figma make 可以 点击这个按钮，将当前页面一键复制为可编辑的设计稿， 还能生成前端代码，设计开发无缝衔接。关注我，分享更多设计干货！

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 就是一环套一环的结构。

写细究文档，用 gemina 画圆形图，用 figma make 做流程图，用 mermaid 修饰细求，用非书多维表格追细强烈点用 grok 做行业调研，用 perplexity 做竞品分析，用 notebook l m 线下会议纪要，用钉钉 ai 听记写汇报材料，用非书 a 类做 ppt。 嗯，都还有进步空间写 ai。 关注这个博主，带你学会以上所有 ai 工具。

接下来我们介绍一下 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， 那这部分就是文字工具的介绍。

大家好，今天想聊一下用 figma 这个工具设计和开发一个网站 web coding 差不多大半个月， 然后也上线了两个网站。想聊一下用 figma 这个工具在完成整个网站的设计部署，上线的时候的一些优点，以及最终在上线这个网站之后，我决定放弃订阅的一些缺点。那我们具体来聊一下， 那先整体说一下我的使用的情况和使用的工具啊，那我用的是 figma make 啊，这个是 figma 下面有编程能力的一个工具啊，主要都是用 ai 来进行网站的一个编程。 那我先后用这个工具设计上线了两个公司的官网，然后迭代了差不多六百多家的版本啊，六百多次的迭代，总共使用掉两万多个 credit。 一 般来说普通的订阅啊，一个月是一百五十块钱，差不多是三千个 credit。 那 先说一下优点吧啊，优点的话，整体来说是一个能让你脱手啊，不用写任何的代码，直接讲需求就可以完成的一个工具啊。那我结合这个网站一起跟大家讲解一下吧。 那这个就是我用斐格玛这个工具啊，差不多用了一个下午做出来的公司的官网。呃，我觉得最大的一个斐格玛的优势是说他能理解你的需求， 然后可以把它做成相应的这些产品，而且这些页面的设计啊，这些图标啊，交互的一些方式，在不同页面之间其实保持了统一啊，这这点其实在做一些产品的时候是非常不容易的。 那像这种课学术的这些课程，其实我都是提供了一些材料给到他，然后他自己去做这些章节的划分啊，内容的提取啊，这里照片其实我还没有给到他，所以他还没有完成， 所以像这些内容其实相当的智能，所以整体上使用下来，其实感受是非常好的啊，特别是说你的需求不是特别复杂啊，更加多的内容你自己已经有了 啊，更加多的让这个 figma 这个工具去做一些整理啊，比较好的一些排版，然后做一些图片的剪辑啊，切割排列啊这些内容，这个工具是做的非常好的， 包括这个暑期活动的这种时间表啊，你都让它贴上去，它都会帮你完成。所以这些内容通过 figma 这个工具来做啊，是非常好的。 那为什么我在使用了大半个月之后啊，最后决定不再续订啊，也把整个的服务切换到啊新的平台上去啊？我觉得主要是发生了一个事， 就是我在这个网站做的差不多比较完整了之后啊，在某一个阶段啊，我需要在一个独立的板块去添加一个完全新的啊内容啊，比如说一个新的高管啊，新的一个老师。 那这个时候发生了几次事故啊？飞格玛去把我整个网站的内容全部重写了一遍，因为他是一个中文和英文两个版本的一个网站啊，在调用某一个翻译的函数的时候，他其实丢失了啊，他找不到这个原有的这些内容，因为我是让他新加嘛 啊，所以他去把整个网站的这个内容根据自己的一个想法全部重写了，所以导致了这个网站啊结构跟原先一样啊，但是里面的内容都不是我原先要给他的， 而且问题是说啊， figma 是 没有做版本控制和回退的啊，它每一次告诉你一个版本迭代了啊，你要它恢复到某个版本啊，是不可能的，即使是恢复到上一个版本，它也是不可能的 啊，它现在跟 github 有 一个对接，你可以把代码去同步到 github， 但问题又来了，你同步到 github 的 这些版本没法重新回到这个 figma 做部署，所以你只能做一个备份，那一旦你要回退某个版本，你就没法用 figma 这个工具了。 所以这个我觉得是一个非常大的一个问题，因为网站随着你的时间的增多啊，你的内容修改的增多啊，你必然会有一些可能性是需要去查看某一些版本的，那这个时候 figma 其实在这方面的支持就不好了。 那如果对于一些不太会编程的同学来说啊，没有这个工具的支持，你要去手动的去导入一些啊，文件啊，一些内容的话，其实是非常困难的啊，所以这方面其实还没有做的非常的好。 那第二个问题我觉得比较小啊，但是其实也感受非常深啊，就是他对于图片的一些搜索编辑其实是比较弱的啊， figma 其实本身是做设计出身的，这一点我觉得也蛮奇怪的， 就你让他把这个图片往上走一点，去遮住一些字啊，或做一些调整啊，格式上的调整，或者是位置上的一些调整的时候，他经常听不懂你在讲什么 啊，这个跟你平时让 figma 去做一些页面啊，做一些内容的时候啊，完全不一样，所以我觉得这方面反而是成为 figma maker 在 做网站上的一个弱点。 所以总结来说，我觉得 figma 对 于一些比较简单的展示型的网站，然后对于大家不需要去做编程的一些同学来说啊，是非常好的一个工具，而且它实现了数据库的部署的直接对接，所以你只要通过 figma 再加上一个域名， 你就可以把这个网站给上线和使用起来了。然后整体费用其实也不高啊， figma 的 话一百五十块钱啊，就可以用一个月，所以你只要网站在线，你每个月给他付一百五十块钱，你可以修修改改啊，这个网站其实就一直在线上啊，所以整体来说价格也是不贵的。 那有这样的需求的同学，其实就可以用这个工具来做自己的一些产品了。好，今天就到这里，拜拜。