從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

大家好,我是言川。

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

更多新功能解析:

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

本文除了會介紹 Figma 的最新更新內(nèi)容,還會在后文分享一些實(shí)用的 Figma 使用教程。因?yàn)槲覍?shí)在是太想把 Figma 推薦給大家使用了。

話不多說,讓我們先從這次更新的內(nèi)容開始吧。

一、五大功能盤點(diǎn)

1. Figma Make(重磅炸彈!?。。?/strong>

Figma Make 是一個基于 AI 模型(Claude 3.7)的“從提示到代碼生成”的工具,用戶可以通過與 AI 聊天的方式,將設(shè)計想法或現(xiàn)有的 Figma 設(shè)計稿轉(zhuǎn)化為可交互的原型或 Web 應(yīng)用。

并且,還可以將所生成的應(yīng)用程序通過專屬鏈接進(jìn)行共享,或發(fā)布到公共網(wǎng)頁上。

Figma Make 共有 4 種 AI 生成方式,分別是基于原型圖生成、基于設(shè)計組件生成、基于設(shè)計圖生成和基于提示詞指令生成。

① 基于原型圖生成

上傳黑白的原型圖,并輸入提示詞指令:

Make my home pagefunctional and addsome temporary mock content.

將我的主頁功能化,并添加一些臨時的模擬內(nèi)容。

② 基于設(shè)計組件生成

將 Figma 中設(shè)計的框架和組件直接粘貼到 AI 聊天中,并輸入提示詞指令:

Make this shoppingcart a functionalexample with mock content.

將這個購物車做成一個功能示例,并添加模擬內(nèi)容。

③ 基于設(shè)計圖生成

上傳 PNG/JPG 格式的設(shè)計圖,并輸入提示詞指令:

Turn the shop designin my image into afullscreen, responsiveprototype.

將我圖片中的商店設(shè)計轉(zhuǎn)化為一個全屏、響應(yīng)式的原型。

④ 基于提示詞指令生成

類似于 AI 編程工具的生成方式,通過輸入自然語言生成可交互界面,提示詞指令:

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

創(chuàng)建一個簡單的 Markdown 應(yīng)用來記筆記,并添加一些模擬內(nèi)容。

除此之外,F(xiàn)igma Make 支持多輪對話功能,允許你在生成的交互界面中添加設(shè)計組件、設(shè)計圖或使用提示詞指令進(jìn)行修改和優(yōu)化。

你還可以利用 Figma Make 的編輯工具進(jìn)行局部修改,例如更改填充、邊距、顏色和文本屬性等。如果不確定如何修改,可以通過 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.

我不需要隱藏側(cè)邊欄的按鈕。請刪除它,并替換為一個按鈕,顯示編輯器和預(yù)覽并排。

Figma Make 還支持團(tuán)隊(duì)協(xié)作和應(yīng)用發(fā)布功能。

  1. 團(tuán)隊(duì)協(xié)作:簡而言之,就是將生成的應(yīng)用程序文件共享給他人,支持實(shí)時多人協(xié)作修改和優(yōu)化。這也是 Figma 在設(shè)計工具領(lǐng)域早期脫穎而出的重要功能之一。
  2. 應(yīng)用發(fā)布:這一功能非常具有可玩性,允許用戶將生成的應(yīng)用程序直接發(fā)布到網(wǎng)上,并支持自定義設(shè)置應(yīng)用名稱以及域名地址。

“網(wǎng)站圖標(biāo)”也支持用戶自定義設(shè)置。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

Figma 官方在介紹時,提到“Supabase 集成即將推出,方便您輕松設(shè)置后端?!?這句話的含金量太大了!

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

也就意味著,你不僅可以在 Figma 中完成設(shè)計稿,還可以借助 Figma Mark 功能實(shí)現(xiàn)設(shè)計稿開發(fā),還可以部署后端數(shù)據(jù)庫、自定義應(yīng)用名稱和域名地址,實(shí)現(xiàn)一站式應(yīng)用開發(fā)與上線。

最后,來看幾個基于 Figma Make 開發(fā)上線的網(wǎng)站原型:

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 階段,且僅對付費(fèi)計劃中的 Full seat 用戶逐步推送該功能。

2. Figma Sites

Figma Sites 是一款全新網(wǎng)站構(gòu)建工具,可以幫助設(shè)計師和團(tuán)隊(duì)在一個平臺上完成從設(shè)計、原型制作到網(wǎng)站發(fā)布的全流程,而無需依賴第三方工具或者是編寫代碼,該功能類似于 Framer(無代碼網(wǎng)站構(gòu)建)。

看了一堆官方發(fā)布的資料信息,整理出了 Figma Sites 六大功能亮點(diǎn):

① 與 Figma Design 的無縫集成

Figma Sites 可以與 Figma Design 中的設(shè)計稿聯(lián)動,允許用戶將設(shè)計稿直接復(fù)制粘貼到網(wǎng)站項(xiàng)目中,實(shí)現(xiàn)設(shè)計與開發(fā)的無縫銜接。

② 響應(yīng)式布局與多端適配

通過自動布局(Auto Layout)和斷點(diǎn)設(shè)置(Breakpoints),F(xiàn)igma Sites 支持為不同設(shè)備(如桌面、平板、移動端)設(shè)計響應(yīng)式布局,確保網(wǎng)站在各種屏幕尺寸下的良好展示。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

③ 快速調(diào)用預(yù)設(shè)模塊

Figma Sites 提供了強(qiáng)大的內(nèi)容插入功能,允許用戶通過“Insert”面板將預(yù)構(gòu)建模塊、嵌入內(nèi)容、網(wǎng)頁模板以及設(shè)計庫直接添加到網(wǎng)站項(xiàng)目中。

④ 豐富的交互與動畫效果

內(nèi)置多種交互和動畫效果,如滾動字幕、懸停狀態(tài)、視差滾動等,用戶可以通過簡單的設(shè)置為網(wǎng)站添加生動的視覺效果,而無需代碼構(gòu)建。

⑤ AI 驅(qū)動的交互生成

Figma Sites 計劃引入 AI 功能,允許用戶通過自然語言提示生成交互動畫和代碼,例如輸入“創(chuàng)建一個 1px 邊框的模擬時鐘,顯示當(dāng)?shù)貢r間”,AI 即可生成相應(yīng)的動畫效果,減少手動編碼的需求。

⑥ 內(nèi)容管理系統(tǒng)(CMS)

Figma 計劃在年內(nèi)推出內(nèi)置的 CMS 功能,這就是一個后端的數(shù)據(jù)管理系統(tǒng),當(dāng)你通過 Figma Sites 上線網(wǎng)站后,便可通過 CMS 功能實(shí)時更換網(wǎng)站中的文本、圖像、視頻等數(shù)據(jù),根本不需要前端開發(fā)代碼......

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

目前,F(xiàn)igma Sites 處于 Beta 測試階段,向所有 Full seat 用戶開放。AI 交互生成功能將在未來幾周內(nèi)上線,CMS 功能預(yù)計將在年內(nèi)推出。

3. Figma Buzz

過去,F(xiàn)igma 主要專注于 UI 和網(wǎng)頁設(shè)計,是設(shè)計師協(xié)作的首選平臺。而如今,他們進(jìn)一步拓展了設(shè)計邊界,推出了專為品牌和市場團(tuán)隊(duì)打造的新工具 —— Figma Buzz。

Figma Buzz 讓品牌設(shè)計師能夠在 Figma 中直接創(chuàng)建并發(fā)布設(shè)計模板,供團(tuán)隊(duì)其他成員在保持品牌一致性的前提下進(jìn)行內(nèi)容替換與調(diào)整。相比于 Canva 這類面向大眾的模板工具,Buzz 更強(qiáng)調(diào) 企業(yè)級的品牌控制 —— 模板由內(nèi)部設(shè)計師制定,確保每一份輸出都符合品牌規(guī)范。

目前 Figma Buzz 已經(jīng)全量上線,所有的用戶都可以免費(fèi)使用。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

在創(chuàng)建 Figma Buzz 時,你可以選擇“創(chuàng)建新模板”或者是“選擇模板創(chuàng)建”。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

Figma Buzz 的畫布提供兩種視圖:Asset view(資產(chǎn)視圖)用于專注編輯單個設(shè)計,Grid view(網(wǎng)格視圖)則便于一覽并管理多個資產(chǎn)。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

在使用過程中,你也可以在“模板”按鈕中找到官方提供的素材,不過這些可能不適用于國內(nèi)的設(shè)計。

當(dāng)然,如果你可以調(diào)用在 Figma Design 中發(fā)布的項(xiàng)目文件,在團(tuán)隊(duì)協(xié)同和資源調(diào)用方面,你可以完全相信 Figma。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

在構(gòu)建模板時,,設(shè)計師可以將某些關(guān)鍵元素進(jìn)行鎖定,防止團(tuán)隊(duì)成員在使用模板時隨意修改 (別瞎改我的設(shè)計稿)。

通過鎖定功能,設(shè)計師可以明確哪些部分可以自定義(如文案、圖片),哪些必須保持不變(如 Logo、配色、排版),從而保障品牌一致性并提升協(xié)作效率。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

Figma Buzz 擁有批量創(chuàng)建功能,支持 .xlsx 或 .csv 格式的電子表格,每一行代表一個要生成的資產(chǎn),每一列對應(yīng)設(shè)計中的一個可變字段,如標(biāo)題、日期、時間或圖片。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

提示: 在下圖示例中,僅包含四條數(shù)據(jù)。不過,批量創(chuàng)建功能可以同時支持創(chuàng)建 100 多個資源。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

最后,你也能在 Figma Buzz 中使用 2024 年發(fā)布的 AI 功能,支持通過提示生成圖像、移除背景、提升分辨率等操作。

圖像生成能力是集成 OpenAI 的 gpt-image-1 和 Google 的 Imagen 3 模型,但這些 AI 功能都快發(fā)布 1 年了(2024 年 6 月 26 日),還沒有全量上線,也真是無力吐槽......

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

4. Figma Draw

在深入了解了上述三項(xiàng)與 AI 相關(guān)的產(chǎn)品更新后,讓我們將目光重新聚焦于 Figma 這款設(shè)計工具,看看它在設(shè)計功能上的更新,同樣可圈可點(diǎn)。

首先要介紹的是 Figma Draw,它被視為 Adobe Illustrator 的輕量級替代品。

以往,F(xiàn)igma 作為一款矢量圖形工具,主要專注于 UI 和網(wǎng)頁設(shè)計,其在繪圖方面的表現(xiàn)不如 Adobe Illustrator 的矢量編輯能力。然而,隨著此次功能的更新,F(xiàn)igma 正在逐步向 Illustrator 靠攏。咱們接著往下看:

目前 Figma Draw 已全量上線,你可以在 Figma Design 中切換,切換后,工作區(qū)也會發(fā)生改變,如圖所示:

底部的工具欄會變成帶有鋼筆 、 畫筆和鉛筆的工具欄。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

右側(cè)邊欄變?yōu)榕c插圖相關(guān)的屬性的更簡化的視圖,其中的滑塊控件可平衡藝術(shù)感和像素完美調(diào)整。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

左側(cè)邊欄中的 “圖層” 部分顯示圖層內(nèi)容的放大預(yù)覽。雙擊圖層預(yù)覽即可直接縮放至畫布上的該圖層。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

接下來就是 Figma Draw 更新的 6 大亮點(diǎn)了:

① 矢量筆刷與鉛筆工具

提供多種筆刷樣式,支持手繪風(fēng)格的創(chuàng)作,用戶還可自定義筆刷,滿足個性化需求。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

在 Figma Design 中,點(diǎn)擊工具欄中的“繪制”,選擇鉛筆或畫筆工具,通過輔助工具欄設(shè)置顏色、大小和樣式后,拖動光標(biāo)開始繪圖,按住 Shift 可繪制直線。

要創(chuàng)建自定義畫筆,只需右鍵點(diǎn)擊矢量圖層,選擇“創(chuàng)建畫筆”下的“拉伸畫筆”,創(chuàng)建完成后即可在畫筆樣式菜單或高級描邊設(shè)置中使用。

② 漸進(jìn)模糊與紋理效果

在 Figma 中,共有六種效果類型可用:投影、內(nèi)陰影、圖層模糊、背景模糊、噪點(diǎn)和紋理。而本次更新新增噪點(diǎn)、紋理和漸進(jìn)模糊等填充類型,增強(qiáng)視覺層次感。

噪點(diǎn)效果:將隨機(jī)像素應(yīng)用于圖層,使其具有模仿膠片攝影視覺特征的微妙顆粒狀紋理。

紋理效果:果使物體的邊緣變得粗糙,產(chǎn)生粗糙的效果。

漸進(jìn)模糊:允許控制模糊的大小、方向以及開始和結(jié)束的強(qiáng)度。

③ 全新的圖案填充和描邊效果

圖案填充:將圖案用作圖層的填充或描邊時,圖案的來源可以引用同一文件中畫布上的其他對象。這個對象可以是單個圖層,也可以是組或框架中的多個圖層。

通過選擇畫布上的對象作為圖案源,并使用圖案選項(xiàng)設(shè)置圖塊類型、比例、間距、對齊方式和不透明度,且圖案填充會動態(tài)更新。

本次更新的描邊類型有兩種,分別是動態(tài)描邊和畫筆描邊。

動態(tài)描邊:允許設(shè)計師通過調(diào)整頻率和波動幅度參數(shù),為線條增添自然的手繪感和個性化風(fēng)格。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

畫筆描邊:通過高級描邊設(shè)置中的“畫筆”選項(xiàng)卡,為選區(qū)應(yīng)用自然的手繪效果。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

④ 文本路徑排列

現(xiàn)在。Figma 允許將文本沿著矢量路徑(如曲線、圓形或自定義路徑)進(jìn)行排布,這個功能期待非常久了!

如圖所示,將文本沿矢量路徑排列,使用藍(lán)色手柄調(diào)整起始位置,并通過右側(cè)“排版”面板中的“翻轉(zhuǎn)文本方向”選項(xiàng)切換文本排列方向。

⑤ 變換

基于選定的對象創(chuàng)建動態(tài)的重復(fù)圖案,可以輕松地生成復(fù)雜的圖形排列,而無需手動復(fù)制和對齊元素。

⑥ 更精確的矢量操作

多矢量編輯、套索和形狀生成器等工具可讓更好地控制每個單獨(dú)的點(diǎn)或多個點(diǎn),這個沒啥好說的,微不足道的優(yōu)化。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

⑦ 可變寬度筆畫

通過在任何給定點(diǎn)設(shè)置所需的精確寬度,可以更好地控制筆觸,但該功能還未上線。對我來說這個功能真的會經(jīng)常用到,我就喜歡設(shè)計這種效果!

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

總的來說,F(xiàn)igma Draw 補(bǔ)充了 Illustrator 中繪制插畫的多項(xiàng)實(shí)用功能,現(xiàn)在你可以在 Figma 中更加順暢地進(jìn)行繪圖。根據(jù)我過往的經(jīng)驗(yàn),應(yīng)該也能支持連接手繪板進(jìn)行操作。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

并且你也可以結(jié)合組件來構(gòu)建插畫庫,你懂的。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

5. Grid

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

目前已經(jīng)全量上線,往下繼續(xù)看網(wǎng)格布局的新變化吧。

① 設(shè)置網(wǎng)格的列數(shù)與行數(shù)

網(wǎng)格自動布局引入了行和列的二維布局控制,允許設(shè)計師在右側(cè)邊欄的網(wǎng)格選擇器中設(shè)置所需的行數(shù)和列數(shù)。

② 調(diào)整網(wǎng)格列與行的尺寸

可以通過點(diǎn)擊軌道上的藍(lán)點(diǎn)標(biāo)簽,選擇“自動”或手動拖動邊緣,以靈活調(diào)整列和行的大小,從而實(shí)現(xiàn)響應(yīng)式設(shè)計。確實(shí)比 Auto Layout 所支持的自動布局更強(qiáng)了。

③ 在網(wǎng)格單元中添加、移動與管理對象

在網(wǎng)格中,可以直接創(chuàng)建、拖入或復(fù)制對象,它們會依序排列;若空間不足,F(xiàn)igma 會自動調(diào)整布局或添加行列以容納所有元素。

④ 讓對象跨越多個網(wǎng)格單元格

通過在畫布上調(diào)整子對象尺寸,使其跨越多個網(wǎng)格單元格,并在對齊單元格邊緣時自動設(shè)置為“填充容器”,從而實(shí)現(xiàn)在父對象縮放時的自適應(yīng)調(diào)整。

⑤ 將對象對齊到各自的網(wǎng)格單元格

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

最后,F(xiàn)igma 也非常貼心的為我們準(zhǔn)備了一份「Grid」的教程源文件,拿去玩吧。鏈接地址: https://www.figma.com/community/file/1484548529005244626

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

好了,以上就是 Figma 在 Config 2025 大會上推出的五個功能產(chǎn)品。

不過,本文還沒結(jié)束。說了這么多,如果你是設(shè)計師或者已經(jīng)用過 Figma 的朋友,應(yīng)該是能夠深諳 Figma 功底的。但我知道,很多關(guān)注我的粉絲可能根本不知道 Figma 是啥。

并且我一直的人設(shè)就是名 AI 內(nèi)容創(chuàng)作者,但為什么要更新這篇文章呢?

原因很簡單:Figma 是我從做設(shè)計師時就開始用的產(chǎn)品(已經(jīng)有 5 年了),現(xiàn)在作為內(nèi)容創(chuàng)作者依然離不開它。只要上班開電腦,F(xiàn)igma 就是我必開的軟件。

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

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

二、Figma 介紹及安裝

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

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

抓兩個點(diǎn),云端使用以及協(xié)同。

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

協(xié)同是指多位用戶可以同時在同一個項(xiàng)目里編輯設(shè)計稿。你可以看到別人實(shí)時操作,比如多個鼠標(biāo)光標(biāo)在畫面上一起工作,極大提升團(tuán)隊(duì)合作的效率和體驗(yàn)。

除此之外,F(xiàn)igma 擁有活躍的社區(qū),用戶可以分享和獲取各種設(shè)計資源,如模板、組件庫、插件等,可以直接打開源文件獲取相應(yīng)的素材,整個過程都基于云端完成,非常方便。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

Figma 是海外團(tuán)隊(duì)開發(fā)的工具,打開 Figma Design: https://www.figma.com/design/

用郵箱注冊即可,支持 Google、QQ 等主流的郵箱賬號,不需要魔法網(wǎng)絡(luò)也能登錄使用。你可以通過瀏覽器的方式直接打開使用,當(dāng)然也可以下載桌面客戶端(也是云端存儲數(shù)據(jù))。

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

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

1. 中文漢化版插件

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

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

① 瀏覽器漢化

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

注:如果是其他瀏覽器,可以去瀏覽器的擴(kuò)展中搜索“FigmaCN”安裝即可。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

② 客戶端漢化

客戶端的漢化并非是在官方發(fā)布的 Figma 應(yīng)用安裝插件,而是直接下載 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

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

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

2. 免費(fèi)白嫖版本

免費(fèi)版本的 Figma 存在著一些限制,比如文件數(shù)量,免費(fèi)用戶最多只能創(chuàng)建 3 個 Figma 文件和 3 個 FigJam 文件,每個文件最多可包含 3 個頁面。還有協(xié)作功能,免費(fèi)版每個項(xiàng)目最多只能有 3 個編輯者等等。

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

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

進(jìn)入表單中,分別選擇 Administrator、Bootcamp or Online Program,如圖所示,其他的選擇很大概率會不通過的!??!

在“為何申請免費(fèi)的 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.

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

往下,學(xué)??蛇x擇國內(nèi)的學(xué)校,然后附上該學(xué)校網(wǎng)站鏈接即可(百度直接搜),其他選擇如圖所示:

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

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

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

最后提交,秒通過。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

3. 免費(fèi)開源的教程

關(guān)于 Figma 的教程,網(wǎng)上實(shí)在太多太多了,而且它本身也非常容易上手。所以我就不再重復(fù)造輪子,直接推薦幾位我一直關(guān)注的、分享高質(zhì)量 Figma 教程的博主。

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

雖然這類教程大多是圍繞 UI 設(shè)計展開的,但只要你愿意跟著學(xué)、動手做,很快就能掌握 Figma 的核心用法。我?guī)啄昵熬褪峭暾馗炅怂囊徽捉坛蹋芤婧艽蟆?/p>

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

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

草帽老師的 Figma 教學(xué)風(fēng)格我真的很喜歡!他的教程內(nèi)容覆蓋了從基礎(chǔ)到進(jìn)階,還緊跟版本更新節(jié)奏,連這次 Figma 的新功能也已經(jīng)上新教程了,非常推薦大家去看一看。

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

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

Figma 真正好玩的地方,其實(shí)在于插件,這一點(diǎn)有點(diǎn)像 Stable Diffusion。而四喜茶茶的教程,就更偏向于分享各種有趣又實(shí)用的 Figma 插件使用技巧。(順帶一提,2023 年大火的 Midjourney 提示詞插件 OPS,就是他們團(tuán)隊(duì)開發(fā)的?。?/p>

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

我平時關(guān)注的就是這三位老師,基本上只要跟著他們的教程學(xué),F(xiàn)igma 你絕對能上手!

三、寫在最后

好了,以上就是本期分享的全部內(nèi)容。按照慣例,在結(jié)尾處聊聊我個人的一些看法。

首先說說這次 Figma 的更新,在我看來,他們的野心真的不小。過去,F(xiàn)igma 一直專注于為 UI/UX 設(shè)計師、網(wǎng)頁設(shè)計師提供一個高效實(shí)用的設(shè)計平臺。

而現(xiàn)在,它支持的功能已經(jīng)拓展到了品牌設(shè)計、插畫設(shè)計、UI 設(shè)計、網(wǎng)頁設(shè)計、產(chǎn)品開發(fā)等多個領(lǐng)域。更重要的是,它開始借助 AI 模型的能力,為這些使用場景全面賦能,真正邁向了一站式的「從設(shè)計到開發(fā)再到市場」的完整閉環(huán)。

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

Figma 的 AI 能力正是朝這個方向在走。它并沒有顛覆傳統(tǒng)的設(shè)計流程或產(chǎn)品開發(fā)流程,而是將 AI 技術(shù)嵌入到這些流程中,實(shí)現(xiàn)局部提效。設(shè)計師們的整體工作方式還是原來那一套,只不過現(xiàn)在可以借助 AI 工具,在素材生成、圖像編輯等環(huán)節(jié)節(jié)省大量時間。

而且,隨著 Figma Make 的上線,越來越多優(yōu)秀的設(shè)計師,也會在多能力協(xié)作中逐漸成長為“六邊形戰(zhàn)士”。

最后,引用 Figma 首席執(zhí)行官 Dylan Field 的一句話作為收尾:

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

AI 將成為設(shè)計師的合作伙伴,幫助他們更快地實(shí)現(xiàn)創(chuàng)意。

如果你想學(xué)習(xí) AIGC,可以加入我主理的《優(yōu)設(shè) AI 俱樂部》,俱樂部內(nèi)沉淀有 2000+ 優(yōu)質(zhì) AI 學(xué)習(xí)資料,涵蓋 AI 繪畫、AI 視頻、AI 提示詞、AI 工具庫、AI 商業(yè)設(shè)計案例、研究報告......

也可以點(diǎn)擊鏈接: https://wx.zsxq.com/group/15288828142182

從設(shè)計到開發(fā)一步到位!Figma 5大新功能深度解析!

收藏 44
點(diǎn)贊 29

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。