四大功能盘点

1、Figma Make（重磅炸弹！！！）

Figma Make 是一个基于 AI 模型（Claude 3.7）的“从提示到代码生成”的工具，用户可以通过与 AI 聊天的方式，将设计想法或现有的 Figma 设计稿转化为可交互的原型或 Web 应用。

并且，还可以将所生成的应用程序通过专属链接进行共享，或发布到公共网页上。

Figma Make 共有4种 AI 生成方式，分别是基于原型图生成、基于设计组件生成、基于设计图生成和基于提示词指令生成。

① 基于原型图生成

上传黑白的原型图，并输入提示词指令：Make my home pagefunctional and addsome temporary mock content.

将我的主页功能化，并添加一些临时的模拟内容。

② 基于设计组件生成

将 Figma 中设计的框架和组件直接粘贴到 AI 聊天中，并输入提示词指令：

Make this shoppingcart a functionalexample with mock content.

将这个购物车做成一个功能示例，并添加模拟内容。

③ 基于设计图生成

上传 PNG/JPG 格式的设计图，并输入提示词指令：

Turn the shop designin my image into afullscreen, responsiveprototype.

将我图片中的商店设计转化为一个全屏、响应式的原型。

④ 基于提示词指令生成

类似于 AI 编程工具的生成方式，通过输入自然语言生成可交互界面，提示词指令：

Create a simple markdown app for taking notes. Add some mock content.

创建一个简单的 Markdown 应用来记笔记，并添加一些模拟内容。

除此之外，Figma Make 支持多轮对话功能，允许你在生成的交互界面中添加设计组件、设计图或使用提示词指令进行修改和优化。

你还可以利用 Figma Make 的编辑工具进行局部修改，例如更改填充、边距、颜色和文本属性等。如果不确定如何修改，可以通过 AI 功能使用指令生成修改建议，比如示例中的提示词指令：

I don't want a hide sidebar button. Delete it andreplace it with a button that shows the editor and preview side by side.

我不需要隐藏侧边栏的按钮。请删除它，并替换为一个按钮，显示编辑器和预览并排。

Figma Make 还支持团队协作和应用发布功能。

团队协作：简而言之，就是将生成的应用程序文件共享给他人，支持实时多人协作修改和优化。这也是 Figma 在设计工具领域早期脱颖而出的重要功能之一。

应用发布：这一功能非常具有可玩性，允许用户将生成的应用程序直接发布到网上，并支持自定义设置应用名称以及域名地址。

“网站图标”也支持用户自定义设置。

Figma 官方在介绍时，提到“Supabase 集成即将推出，方便您轻松设置后端。” 这句话的含金量太大了！

也就意味着，你不仅可以在 Figma 中完成设计稿，还可以借助 Figma Mark 功能实现设计稿开发，还可以部署后端数据库、自定义应用名称和域名地址，实现一站式应用开发与上线。

最后，来看几个基于 Figma Make 开发上线的网站原型：

Cute Calendar

Conference Asset Generator

Wooden Chess

World Coffee Map

Form Builder UI

OKLCH Color Palette

Figma Make 目前处于 Beta 阶段，且仅对付费计划中的 Full seat 用户逐步推送该功能。

2、Figma 

SitesFigma Sites是一款全新网站构建工具，可以帮助设计师和团队在一个平台上完成从设计、原型制作到网站发布的全流程，而无需依赖第三方工具或者是编写代码，该功能类似于 Framer（无代码网站构建）。

看了一堆官方发布的资料信息，整理出了 Figma Sites 六大功能亮点：

① 与 Figma Design 的无缝集成

Figma Sites 可以与 Figma Design 中的设计稿联动，允许用户将设计稿直接复制粘贴到网站项目中，实现设计与开发的无缝衔接。

② 响应式布局与多端适配

通过自动布局（Auto Layout）和断点设置（Breakpoints），Figma Sites 支持为不同设备（如桌面、平板、移动端）设计响应式布局，确保网站在各种屏幕尺寸下的良好展示。

③ 快速调用预设模块

Figma Sites 提供了强大的内容插入功能，允许用户通过“Insert”面板将预构建模块、嵌入内容、网页模板以及设计库直接添加到网站项目中。

④ 丰富的交互与动画效果

内置多种交互和动画效果，如滚动字幕、悬停状态、视差滚动等，用户可以通过简单的设置为网站添加生动的视觉效果，而无需代码构建。

⑤ AI 驱动的交互生成

Figma Sites 计划引入 AI 功能，允许用户通过自然语言提示生成交互动画和代码，例如输入“创建一个1px边框的模拟时钟，显示当地时间”，AI 即可生成相应的动画效果，减少手动编码的需求。

⑥ 内容管理系统（CMS）

Figma 计划在年内推出内置的 CMS 功能，这就是一个后端的数据管理系统，当你通过 Figma Sites 上线网站后，便可通过 CMS 功能实时更换网站中的文本、图像、视频等数据，根本不需要前端开发代码......

目前，Figma Sites 处于 Beta 测试阶段，向所有 Full seat 用户开放。AI 交互生成功能将在未来几周内上线，CMS 功能预计将在年内推出。

3、Figma Buzz

过去，Figma 主要专注于 UI 和网页设计，是设计师协作的首选平台。而如今，他们进一步拓展了设计边界，推出了专为品牌和市场团队打造的新工具 —— Figma Buzz。

Figma Buzz 让品牌设计师能够在 Figma 中直接创建并发布设计模板，供团队其他成员在保持品牌一致性的前提下进行内容替换与调整。相比于 Canva 这类面向大众的模板工具，Buzz 更强调 企业级的品牌控制 —— 模板由内部设计师制定，确保每一份输出都符合品牌规范。

目前 Figma Buzz 已经全量上线，所有的用户都可以免费使用。

在创建 Figma Buzz 时，你可以选择“创建新模板”或者是“选择模板创建”。

Figma Buzz 的画布提供两种视图：Asset view（资产视图）用于专注编辑单个设计，Grid view（网格视图）则便于一览并管理多个资产。

在使用过程中，你也可以在“模板”按钮中找到官方提供的素材，不过这些可能不适用于国内的设计。

当然，如果你可以调用在 Figma Design 中发布的项目文件，在团队协同和资源调用方面，你可以完全相信 Figma。

在构建模板时，，设计师可以将某些关键元素进行锁定，防止团队成员在使用模板时随意修改 （别瞎改我的设计稿）。

通过锁定功能，设计师可以明确哪些部分可以自定义（如文案、图片），哪些必须保持不变（如Logo、配色、排版），从而保障品牌一致性并提升协作效率。

Figma Buzz 拥有批量创建功能，支持 .xlsx 或 .csv 格式的电子表格，每一行代表一个要生成的资产，每一列对应设计中的一个可变字段，如标题、日期、时间或图片。

提示： 在下图示例中，仅包含四条数据。不过，批量创建功能可以同时支持创建 100 多个资源。

最后，你也能在 Figma Buzz 中使用 2024 年发布的 AI 功能，支持通过提示生成图像、移除背景、提升分辨率等操作。

图像生成能力是集成 OpenAI 的 gpt-image-1 和 Google 的 Imagen 3 模型，但这些 AI 功能都快发布 1 年了（ 2024 年 6 月 26 日），还没有全量上线，也真是无力吐槽......

4、Figma Draw

在深入了解了上述三项与 AI 相关的产品更新后，让我们将目光重新聚焦于 Figma 这款设计工具，看看它在设计功能上的更新，同样可圈可点。

首先要介绍的是 Figma Draw，它被视为 Adobe Illustrator 的轻量级替代品。

以往，Figma 作为一款矢量图形工具，主要专注于 UI 和网页设计，其在绘图方面的表现不如 Adobe Illustrator 的矢量编辑能力。然而，随着此次功能的更新，Figma 正在逐步向 Illustrator 靠拢。咱们接着往下看：

目前 Figma Draw 已全量上线，你可以在 Figma Design 中切换，切换后，工作区也会发生改变，如图所示：

底部的工具栏会变成带有钢笔 、 画笔和铅笔的工具栏。

右侧边栏变为与插图相关的属性的更简化的视图，其中的滑块控件可平衡艺术感和像素完美调整。

左侧边栏中的 “图层” 部分显示图层内容的放大预览。双击图层预览即可直接缩放至画布上的该图层。

接下来就是 Figma Draw 更新的6大亮点了：

① 矢量笔刷与铅笔工具

提供多种笔刷样式，支持手绘风格的创作，用户还可自定义笔刷，满足个性化需求。

在 Figma Design 中，点击工具栏中的“绘制”，选择铅笔或画笔工具，通过辅助工具栏设置颜色、大小和样式后，拖动光标开始绘图，按住 Shift 可绘制直线。

要创建自定义画笔，只需右键点击矢量图层，选择“创建画笔”下的“拉伸画笔”，创建完成后即可在画笔样式菜单或高级描边设置中使用。

② 渐进模糊与纹理效果

在 Figma 中，共有六种效果类型可用：投影、内阴影、图层模糊、背景模糊、噪点和纹理。而本次更新新增噪点、纹理和渐进模糊等填充类型，增强视觉层次感。

噪点效果：将随机像素应用于图层，使其具有模仿胶片摄影视觉特征的微妙颗粒状纹理。

纹理效果：果使物体的边缘变得粗糙，产生粗糙的效果。

渐进模糊：允许控制模糊的大小、方向以及开始和结束的强度。

③ 全新的图案填充和描边效果

图案填充：将图案用作图层的填充或描边时，图案的来源可以引用同一文件中画布上的其他对象。这个对象可以是单个图层，也可以是组或框架中的多个图层。

通过选择画布上的对象作为图案源，并使用图案选项设置图块类型、比例、间距、对齐方式和不透明度，且图案填充会动态更新。

本次更新的描边类型有两种，分别是动态描边和画笔描边。

动态描边：允许设计师通过调整频率和波动幅度参数，为线条增添自然的手绘感和个性化风格。

画笔描边：通过高级描边设置中的“画笔”选项卡，为选区应用自然的手绘效果。

④ 文本路径排列

现在。Figma 允许将文本沿着矢量路径（如曲线、圆形或自定义路径）进行排布，这个功能期待非常久了！

如图所示，将文本沿矢量路径排列，使用蓝色手柄调整起始位置，并通过右侧“排版”面板中的“翻转文本方向”选项切换文本排列方向。

⑤ 变换

基于选定的对象创建动态的重复图案，可以轻松地生成复杂的图形排列，而无需手动复制和对齐元素。

⑥ 更精确的矢量操作

多矢量编辑、套索和形状生成器等工具可让更好地控制每个单独的点或多个点，这个没啥好说的，微不足道的优化。

⑦ 可变宽度笔画

通过在任何给定点设置所需的精确宽度，可以更好地控制笔触，但该功能还未上线。对我来说这个功能真的会经常用到，我就喜欢设计这种效果！

总的来说，Figma Draw 补充了 Illustrator 中绘制插画的多项实用功能，现在你可以在 Figma 中更加顺畅地进行绘图。根据我过往的经验，应该也能支持连接手绘板进行操作。

并且你也可以结合组件来构建插画库，你懂的。