Figma Adds New AI and Code Tools
Figma Adds New AI and Code Tools
Figma 推出全新 AI 與程式碼工具
Introduction
Figma has new updates. These tools help people with coding, moving pictures, and AI.
Figma 推出了新更新。這些工具能協助使用者進行程式碼編寫、動態影像處理及 AI 應用。
Main Body
Now, designers can put code directly into their work. This helps designers and engineers work together faster. They can test ideas quickly.
現在,設計師可以直接將程式碼放入作品中。這有助於設計師與工程師更快速地協作,並能快速測試想法。
Figma also has new tools for motion. Users can make 3D shapes and moving parts. They can use AI to make special visual effects.
Figma 同時推出了新的動態工具。使用者可以建立 3D 形狀與動態元件,並利用 AI 製作特殊的視覺效果。
Figma now has AI agents. These agents can connect to other apps like Excel and Notion. Figma also bought a company called Weavy to make the work easier.
Figma 現在擁有 AI 代理人(AI agents)。這些代理人可以連接到如 Excel 和 Notion 等其他應用程式。Figma 還收購了一家名為 Weavy 的公司,以簡化工作流程。
Conclusion
Figma is now a place for both design and coding with AI help.
Figma 現在已成為一個在 AI 協助下,能同時兼顧設計與程式碼編寫的平台。
Vocabulary Learning
⚡ Power Words: 'Can'
In this text, we see the word can many times. At A2 level, this is your best tool to describe abilities or possibilities.
How it works:
Subject + can + action (verb)
Examples from the text:
- Designers can put code... (They have the ability to do this)
- They can test ideas... (It is possible for them)
- Users can make 3D shapes... (They are able to)
The Rule: Never add "to" after can. ❌ Can to put ✅ Can put
🛠️ Word Connections
Look at how these words group together to make a clear picture:
- Work together Teamwork
- Moving parts Animation
- Visual effects Special looks
Vocabulary Learning
Figma Adds Advanced Coding Layers and AI Features
Figma 新增進階代碼層與 AI 功能
Introduction
Figma has announced several technical updates to its design platform, focusing on combining coding, motion graphics, and AI-driven automation.
Figma 宣布其設計平台將進行多項技術更新,重點在於將代碼、動態圖形與 AI 驅動的自動化相結合。
Main Body
The most significant change is the introduction of code layers within the shared workspace. This update allows users to import code repositories and turn code flows into design layers, which makes the process faster for designers, product managers, and engineers. Chief Product Officer Yuhki Yamashita emphasized that this new environment encourages rapid experimentation rather than focusing immediately on perfect code.
最顯著的改變是在共享工作區中引入了代碼層。此次更新允許用戶匯入代碼庫並將代碼流程轉換為設計層,這讓設計師、產品經理和工程師的流程變得更快速。首席產品官 Yuhki Yamashita 強調,這個新環境旨在鼓勵快速實驗,而非立即專注於完美的代碼。
Furthermore, the platform has improved its creative tools by adding native motion support and special visual effects. Users can now create 3D transitions directly in the interface, meaning they no longer need to use external software. These visual improvements are supported by WebGPU technology, allowing users to create effects like pixelation using simple AI prompts.
此外,該平台透過增加原生動態支持與特殊視覺效果,改良了其創意工具。用戶現在可以直接在介面中創建 3D 轉場,意味著不再需要使用外部軟體。這些視覺改進由 WebGPU 技術支持,允許用戶使用簡單的 AI 提示詞來創建如像素化等效果。
Finally, Figma is increasing productivity through AI agents and generative plugins. The platform now allows users to create repeatable 'skills' using text prompts and can connect to third-party data from GitHub, Notion, and Excel. Additionally, Figma is integrating the tool Weavy, which will allow users to build complex AI workflows directly on the canvas later this year.
最後,Figma 透過 AI 代理與生成式插件來提升生產力。該平台現在允許用戶使用文字提示詞創建可重複使用的「技能」,並能連接 GitHub、Notion 和 Excel 的第三方數據。此外,Figma 將整合 Weavy 工具,讓用戶在今年稍後能直接在畫布上構建複雜的 AI 工作流。
Conclusion
Figma is moving toward becoming a full-stack development environment by merging design tools with live code and AI automation.
Figma 透過將設計工具與即時代碼及 AI 自動化結合,正邁向成為一個全棧開發環境。
Vocabulary Learning
🚀 The 'Power-Up' Logic: Moving from Simple to Sophisticated
At an A2 level, you describe things using simple verbs: "Figma has new tools." or "It helps users."
To reach B2, you need to describe processes and results using more precise, academic-style verbs. Let's look at the 'engine' of this article.
🛠️ The Upgrade List
Instead of using basic words, look how the author describes change:
- Instead of "making" Integrating: "Figma is integrating the tool Weavy." (This means putting two things together so they work as one).
- Instead of "joining" Merging: "Merging design tools with live code." (This is used when two things blend into a single new thing).
- Instead of "improving" Increasing productivity: "Figma is increasing productivity through AI agents." (B2 students focus on the result of the improvement).
💡 The 'B2 Secret': Complex Noun Phrases
B2 speakers don't just use nouns; they build "noun chains" to be specific.
A2 Style: "Tools that use AI to automate things." B2 Style: "AI-driven automation."
A2 Style: "A place where people share work." B2 Style: "A shared workspace."
Pro Tip: To sound more fluent, stop using long phrases starting with "which is..." or "that are..." and try to put the description before the noun using a hyphen (like AI-driven).
⚡ Quick Shift: The 'Result' Connector
Notice this sentence: "...meaning they no longer need to use external software."
In A2, you would say: "They have 3D transitions. So, they don't need other software."
By using ", meaning...", you connect the feature directly to the benefit. This is the hallmark of B2 fluency: showing the logical consequence of a fact in one smooth breath.
Vocabulary Learning
Figma Integration of Advanced Computational Layers and Artificial Intelligence Capabilities
Figma 整合進階運算層與人工智慧能力
Introduction
Figma has announced a series of technical updates to its design platform, focusing on the convergence of coding, motion graphics, and AI-driven automation.
Figma 宣布其設計平台將進行一系列技術更新,重點在於結合編碼、動態圖形與 AI 驅動的自動化。
Main Body
The primary architectural shift involves the implementation of code layers within the collaborative canvas. This development facilitates the cloning of repositories and the extraction of code flows into design layers, thereby streamlining the iterative process between designers, product managers, and engineers. Chief Product Officer Yuhki Yamashita posited that this spatial environment prioritizes rapid conceptual exploration over the immediate production of optimized code.
主要的架構轉移涉及在協作畫布中實作代碼層。此發展有助於複製儲存庫並將代碼流提取至設計層,從而簡化設計師、產品經理與工程師之間的迭代過程。首席產品長 Yuhki Yamashita 認為,此空間環境優先考慮快速的概念探索,而非立即產出優化後的代碼。
Furthermore, the platform has expanded its creative utility through the integration of native motion support and shader effects. The capacity to execute 3D transforms and transitions directly within the interface obviates the previous necessity for external software conversion. These visual enhancements are augmented by WebGPU-powered shaders, which can be generated via AI prompts to produce effects such as dithering and pixelation.
此外,該平台透過整合原生動畫支持與著色器(shader)效果,擴展了其創意用途。直接在介面中執行 3D 轉換與過渡的能力,消除了先前對外部軟體轉換的必要性。這些視覺增強由 WebGPU 驅動的著色器支援,可透過 AI 提示詞生成,以產生如抖色(dithering)與像素化(pixelation)等效果。
Institutional efficiency is further targeted through the deployment of AI agents and generative plugins. The platform now allows for the creation of repeatable 'skills' via text prompts and supports the integration of third-party data sources, including GitHub, Notion, and Excel. Additionally, the acquisition of Weavy is being operationalized; a full integration is anticipated later this year, which will enable the generation of complex node-based workflows directly on the canvas.
機構效率則透過部署 AI 代理(AI agents)與生成式插件進一步提升。該平台現在允許透過文字提示詞創建可重複使用的「技能」,並支持整合第三方數據源,包括 GitHub、Notion 與 Excel。此外,對 Weavy 的收購正進入執行階段;預計今年晚些時候將完成全面整合,屆時將能直接在畫布上生成複雜的基於節點的工作流。
Conclusion
Figma has transitioned toward a full-stack development environment by merging design tools with live code and AI automation.
Figma 透過將設計工具與即時代碼及 AI 自動化結合,已轉型為全棧開發環境。
Vocabulary Learning
The Nuance of Nominalization and Formal 'Verb-to-Noun' Conversion
At the B2 level, students rely heavily on active verbs to describe processes. To ascend to C2 Mastery, one must master the nominalization of actions—the process of turning verbs into nouns to increase density, objectivity, and academic precision.
⚡ The Linguistic Pivot
Observe the text's preference for abstract nouns over active phrasing. This is not merely 'formal writing'; it is a strategic shift in focus from the actor to the concept.
- B2 Approach: "Figma integrated advanced layers, which helps the team work faster."
- C2 Approach: "The implementation of code layers... facilitates the cloning of repositories... thereby streamlining the iterative process."
🔍 Surgical Analysis: High-Value Lexical Clusters
-
The "Obviate" Dynamic
- Text: "...obviates the previous necessity for external software conversion."
- C2 Insight: Instead of saying "makes it unnecessary" (B2) or "removes the need" (C1), the author uses obviate. This verb specifically targets the removal of a requirement through a superior alternative. It is a hallmark of high-level technical discourse.
-
Operationalization of Assets
- Text: "...the acquisition of Weavy is being operationalized."
- C2 Insight: This transforms a corporate event (buying a company) into a functional process. To 'operationalize' is to move from a theoretical or legal state (ownership) to a practical, working state (integration).
🛠️ Architectural Pattern: The "Agentless" Passive
Notice how the text employs phrases like "Institutional efficiency is further targeted".
By omitting the subject (who is targeting the efficiency?), the writer achieves a dispassionate, authoritative tone. In C2 English, the result is prioritized over the agent.
Key Transformation for your writing:
Avoid: "Figma wants to make companies more efficient by using AI." Adopt: "Institutional efficiency is targeted through the deployment of AI agents."