大家好，我是言川。

Figma 本月終于迎來了期待已久的 AI 功能更新。其實，早在幾年前我就想寫寫 Figma 了，這次借著它這波更新，終于有機會和大家分享一下。

更多新功能解析：

本文除了會介紹 Figma 的最新更新內容，還會在后文分享一些實用的 Figma 使用教程。因為我實在是太想把 Figma 推薦給大家使用了。

話不多說，讓我們先從這次更新的內容開始吧。

一、五大功能盤點

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 還支持團隊協作和應用發布功能。

1. 團隊協作：簡而言之，就是將生成的應用程序文件共享給他人，支持實時多人協作修改和優化。這也是 Figma 在設計工具領域早期脫穎而出的重要功能之一。
2. 應用發布：這一功能非常具有可玩性，允許用戶將生成的應用程序直接發布到網上，并支持自定義設置應用名稱以及域名地址。

“網站圖標”也支持用戶自定義設置。

Figma 官方在介紹時，提到“Supabase 集成即將推出，方便您輕松設置后端。” 這句話的含金量太大了！

也就意味著，你不僅可以在 Figma 中完成設計稿，還可以借助 Figma Mark 功能實現設計稿開發，還可以部署后端數據庫、自定義應用名稱和域名地址，實現一站式應用開發與上線。

最后，來看幾個基于 Figma Make 開發上線的網站原型：

Cute Calendar： https://slept-blend-author.figma.site/

Conference Asset Generator： https://plaque-surf-oasis.figma.site/

Wooden Chess： https://motto-reach-shell.figma.site/

World Coffee Map： https://quartz-step-acre.figma.site/

Form Builder UI： https://prize-loop-crate.figma.site/

OKLCH Color Palette： https://gloss-modern-smile.figma.site/

Figma Make 目前處于 Beta 階段，且僅對付費計劃中的 Full seat 用戶逐步推送該功能。

2. Figma Sites

Figma 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 中更加順暢地進行繪圖。根據我過往的經驗，應該也能支持連接手繪板進行操作。

并且你也可以結合組件來構建插畫庫，你懂的。

5. Grid

全新的「Grid」布局功能，是在 Auto Layout 的一項重大升級，支持二維布局，允許設計元素在水平方向和垂直方向上同時排列和對齊。

目前已經全量上線，往下繼續看網格布局的新變化吧。

① 設置網格的列數與行數

網格自動布局引入了行和列的二維布局控制，允許設計師在右側邊欄的網格選擇器中設置所需的行數和列數。

② 調整網格列與行的尺寸

可以通過點擊軌道上的藍點標簽，選擇“自動”或手動拖動邊緣，以靈活調整列和行的大小，從而實現響應式設計。確實比 Auto Layout 所支持的自動布局更強了。

③ 在網格單元中添加、移動與管理對象

在網格中，可以直接創建、拖入或復制對象，它們會依序排列；若空間不足，Figma 會自動調整布局或添加行列以容納所有元素。

④ 讓對象跨越多個網格單元格

通過在畫布上調整子對象尺寸，使其跨越多個網格單元格，并在對齊單元格邊緣時自動設置為“填充容器”，從而實現在父對象縮放時的自適應調整。

⑤ 將對象對齊到各自的網格單元格

最后，可通過右側邊欄的對齊按鈕將子對象與其所在單元格進行左、右、居中等方式的對齊，多個對象將分別對齊到各自單元格。

最后，Figma 也非常貼心的為我們準備了一份「Grid」的教程源文件，拿去玩吧。鏈接地址： https://www.figma.com/community/file/1484548529005244626

好了，以上就是 Figma 在 Config 2025 大會上推出的五個功能產品。

不過，本文還沒結束。說了這么多，如果你是設計師或者已經用過 Figma 的朋友，應該是能夠深諳 Figma 功底的。但我知道，很多關注我的粉絲可能根本不知道 Figma 是啥。

并且我一直的人設就是名 AI 內容創作者，但為什么要更新這篇文章呢？

原因很簡單：Figma 是我從做設計師時就開始用的產品（已經有 5 年了），現在作為內容創作者依然離不開它。只要上班開電腦，Figma 就是我必開的軟件。

無論是以前做 UI 設計、網頁設計，還是現在做小紅書配圖、文章配圖、課程宣傳物料，Figma 都是我主要的設計工具。我一直想把這款超級好用的設計軟件推薦給大家，這次借著它 AI 功能的更新，終于有機會寫下來。

所以，除了上面那些更新內容，接下來我還會介紹 Figma 的基礎知識，教大家怎么免費使用它。即使你現在還不了解 Figma，我依然希望能把它推薦給你。

二、Figma 介紹及安裝

Figma 是一款基于瀏覽器的協作式矢量圖形編輯器和原型設計工具，支持跨平臺使用，用戶可以在 Windows、macOS、Linux 等操作系統上通過瀏覽器直接訪問，無需安裝任何軟件。

抓兩個點，云端使用以及協同。

云端使用，簡單來說就是只要聯網就能用。Figma 對本地電腦的配置要求很低，不用擔心電腦性能問題。所有設計數據都保存在你的云端賬號里，換臺電腦登錄賬號后，所有之前的設計文件都能直接打開，繼續編輯，非常方便。

協同是指多位用戶可以同時在同一個項目里編輯設計稿。你可以看到別人實時操作，比如多個鼠標光標在畫面上一起工作，極大提升團隊合作的效率和體驗。

除此之外，Figma 擁有活躍的社區，用戶可以分享和獲取各種設計資源，如模板、組件庫、插件等，可以直接打開源文件獲取相應的素材，整個過程都基于云端完成，非常方便。

Figma 是海外團隊開發的工具，打開 Figma Design： https://www.figma.com/design/

用郵箱注冊即可，支持 Google、QQ 等主流的郵箱賬號，不需要魔法網絡也能登錄使用。你可以通過瀏覽器的方式直接打開使用，當然也可以下載桌面客戶端（也是云端存儲數據）。

客戶端下載地址： https://www.figma.com/downloads/

1. 中文漢化版插件

Figma 目前還未做中文的語言適配，但我們可以安裝漢化插件，插件網站： https://www.figma.cool/cn

① 瀏覽器漢化

如果你使用瀏覽器登錄 Figma，那么就在你的瀏覽器的“擴展”中安裝“FigmaCN”，Google 瀏覽器的插件地址： https://chromewebstore.google.com/detail/figmacn/japkpjkpfdakpkbcehooampdjfgefndj

注：如果是其他瀏覽器，可以去瀏覽器的擴展中搜索“FigmaCN”安裝即可。

② 客戶端漢化

客戶端的漢化并非是在官方發布的 Figma 應用安裝插件，而是直接下載 Figma 中文客戶端。

1. MacOS_Intel 版本： https://yancymin.notion.site/Figma-macOS
2. MacOS_M1 版本： https://yancymin.notion.site/Figma-macOS
3. Windows 版本： https://yancymin.notion.site/Figma-Windows

不論你是瀏覽器還是客戶端，安裝完成后打開/創建文件，就能跟我一樣使用中文版本了。

2. 免費白嫖版本

免費版本的 Figma 存在著一些限制，比如文件數量，免費用戶最多只能創建 3 個 Figma 文件和 3 個 FigJam 文件，每個文件最多可包含 3 個頁面。還有協作功能，免費版每個項目最多只能有 3 個編輯者等等。

但問題不大，有個白嫖方式，就是申請 Figma 教育版。地址： https://www.figma.com/education/

進入表單中，分別選擇 Administrator、Bootcamp or Online Program，如圖所示，其他的選擇很大概率會不通過的！！！

在“為何申請免費的 Figma 教育計劃？”中填寫這段文案（AI 寫的）：

I am applying for the Figma Education plan to enhance my design learning experience as a student. Figma’s collaborative features and professional-grade tools are essential for group projects and building a strong design portfolio. Access to the Education plan will allow me to work more efficiently on assignments, collaborate with peers in real-time, and gain hands-on experience with industry-standard design workflows. This opportunity will greatly support my academic and career development in the field of design.

往下，學校可選擇國內的學校，然后附上該學校網站鏈接即可（百度直接搜），其他選擇如圖所示：

上面有個“選擇文件”可以使用豆包 AI 生成一張，美觀度、信息準確度無所謂。
提示詞：“幫我生成一張 UI/UX 的課程海報，9:16。”

最后提交，秒通過。

3. 免費開源的教程

關于 Figma 的教程，網上實在太多太多了，而且它本身也非常容易上手。所以我就不再重復造輪子，直接推薦幾位我一直關注的、分享高質量 Figma 教程的博主。

酸梅干超人的電話亭： https://www.bilibili.com/video/BV19TDGYWEp7

雖然這類教程大多是圍繞 UI 設計展開的，但只要你愿意跟著學、動手做，很快就能掌握 Figma 的核心用法。我幾年前就是完整地跟完了他的一整套教程，受益很大。

草帽 sMao： https://space.bilibili.com/108104104/lists/153325?type=season

草帽老師的 Figma 教學風格我真的很喜歡！他的教程內容覆蓋了從基礎到進階，還緊跟版本更新節奏，連這次 Figma 的新功能也已經上新教程了，非常推薦大家去看一看。

四喜茶茶： https://space.bilibili.com/1591442525?spm_id_from=333.337.0.0

Figma 真正好玩的地方，其實在于插件，這一點有點像 Stable Diffusion。而四喜茶茶的教程，就更偏向于分享各種有趣又實用的 Figma 插件使用技巧。（順帶一提，2023 年大火的 Midjourney 提示詞插件 OPS，就是他們團隊開發的！）

我平時關注的就是這三位老師，基本上只要跟著他們的教程學，Figma 你絕對能上手！

三、寫在最后

好了，以上就是本期分享的全部內容。按照慣例，在結尾處聊聊我個人的一些看法。

首先說說這次 Figma 的更新，在我看來，他們的野心真的不小。過去，Figma 一直專注于為 UI/UX 設計師、網頁設計師提供一個高效實用的設計平臺。

而現在，它支持的功能已經拓展到了品牌設計、插畫設計、UI 設計、網頁設計、產品開發等多個領域。更重要的是，它開始借助 AI 模型的能力，為這些使用場景全面賦能，真正邁向了一站式的「從設計到開發再到市場」的完整閉環。

在 AIGC 時代，“AI + 行業”這個說法，我個人覺得有點扯淡。說到底，AI 真正擅長的，還是在于提效賦能，而不是去取代某個崗位或角色。行業 + AI、流程 + AI 才是未來更靠譜的發展方向——用 AI 來完成一些基礎性工作流，降低成本、提高效率。

Figma 的 AI 能力正是朝這個方向在走。它并沒有顛覆傳統的設計流程或產品開發流程，而是將 AI 技術嵌入到這些流程中，實現局部提效。設計師們的整體工作方式還是原來那一套，只不過現在可以借助 AI 工具，在素材生成、圖像編輯等環節節省大量時間。

而且，隨著 Figma Make 的上線，越來越多優秀的設計師，也會在多能力協作中逐漸成長為“六邊形戰士”。

最后，引用 Figma 首席執行官 Dylan Field 的一句話作為收尾：

“AI is not here to replace designers; it's here to empower them to create more efficiently and effectively.”

AI 將成為設計師的合作伙伴，幫助他們更快地實現創意。

如果你想學習 AIGC，可以加入我主理的《優設 AI 俱樂部》，俱樂部內沉淀有 2000+ 優質 AI 學習資料，涵蓋 AI 繪畫、AI 視頻、AI 提示詞、AI 工具庫、AI 商業設計案例、研究報告......

也可以點擊鏈接： https://wx.zsxq.com/group/15288828142182