請更新您的瀏覽器

您使用的瀏覽器版本較舊,已不再受支援。建議您更新瀏覽器版本,以獲得最佳使用體驗。

終結設計與開發的隔閡,Figma 推出「程式碼圖層」打造全端無縫協作新紀元

科技新報

更新於 1天前 • 發布於 1天前

Figma 6 月 24 日於年度 Config 大會上公布一系列更新,將程式碼、動畫與 AI 工具更緊密整合進設計流程,並把協同合作畫布重新定位為更適合全端開發的工作空間。這次更新的核心,是讓設計師、產品經理與工程師能在同一介面中更直接地試驗想法,而不必先把重點放在可直接上線的精緻程式碼上。

最受關注的新功能之一是 code layers(程式碼圖層),使用者可在 Figma Design 畫布上直接操作程式碼,包括複製(clone)程式庫、從程式碼中抽取流程並轉成可編輯的設計圖層,然後將修改同步回程式碼。Figma 產品長 Yuhki Yamashita 表示,程式碼圖層讓團隊能更快疊代概念,適合快速探索不同方向,而不需一開始就追求可直接部署的生產級程式碼。

https://vimeo.com/1203668650/3e951b989f?fl=pl&fe=sh

Figma 也把動態設計能力拉進平台內,新增對動畫、轉場與 3D 變形的支援。過去設計師常需在其他軟體製作動畫再轉換成可被理解的程式碼,現在動畫與轉場可以直接在 Figma 中建立,並可透過 AI 產生部分素材或使用預設樣式,或在時間軸上手動調整。

另一項更新是 shaders(著色器)功能,使用者可透過提示詞建立特效與填色,並使用 WebGPU 支援新的視覺處理效果,例如 dither(抖動)、pixelate(像素化)與多種模糊型態。這些過去在 Figma 中難以直接完成的效果,現在可在畫布上直接製作。

https://vimeo.com/1203595010/c5212652fc?fl=pl&fe=sh

Figma 同時擴大 AI 助手的用途。使用者可以用文字提示建立可重複使用的 skills,讓 AI 代理執行固定工作;也能連線 Notion、Granola、Excel 與 GitHub 等工具,或附加檔案,讓 AI 擁有更多背景資訊。公司也加入以提示詞建立客製化外掛(generative plugins)的能力,例如版面產生器或向量路徑追蹤器,降低團隊打造可重用工具的門檻。

此外,Figma 正在進一步整合去年收購的節點式工具 Weavy(也稱 Weave/Weavy 或 Weave 工具的相關整合)。公司表示在未來數月內,使用者將能直接在 Figma 內建構 Weavy 工作流程,讓多模型比對與視覺產出流程更緊密地融入畫布操作。

(首圖來源:Figma

立刻加入《科技新報》LINE 官方帳號,全方位科技產業新知一手掌握!

查看原始文章

更多理財相關文章

01

台灣百億食品大廠「董事辭世」!公司突發重訊證實了

三立新聞網
02

台灣食品大廠獨董「驚傳辭世」 公司發重訊證實了

EBC 東森新聞
03

台股週一恐續震?融資猛殺出200億!他點「週末1操作自救」:別急…

民視新聞網
04

護國神山自己救!台積電遭外資連4砍 3家上市櫃公司搶進280張

ETtoday新聞雲
05

50歲後才明白:真正折磨人的不是股票,是「買在對的時間」…放下擇時焦慮,錢反而站得住腳

幸福熟齡 X 今周刊
06

台股為何大跌? 阮慕驊曝原因跟蘋果有關:柿子撿軟的吃

鏡週刊
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...