Agent Economy

Figma:设计的未来是代码与画布

Figma: The Future of Design is Code and Canvas

Figma CEO Dylan Field 近日发表文章,阐述了 Figma 对设计未来的愿景:代码与画布的融合。在这个 AI 能力爆炸的时代,设计的核心工作是在无限可能性中找到最佳解决方案。

Claude Code to Figma:从代码到设计稿

Figma 推出了全新的 Claude Code to Figma 功能,让开发者可以直接将代码转换为可编辑的 Figma 设计稿:

  • 安装 Figma MCP(Model Context Protocol)
  • 在 Claude Code 中输入 "Send this to Figma"
  • 浏览器渲染状态自动转换为完全可编辑的 Figma 图层

画布思维 vs 代码思维

Figma 认为,在 AI 能够帮助构建任何你能描述的可能性的世界里,设计的核心工作是找到最佳解决方案。而设计画布比 IDE 或 ADE 中的提示更适合导航众多可能性:

  • 发散思考:在画布上可以并排比较不同方案,看到全局
  • 直接操作:可以直接操控编辑细节
  • 双向流转:探索并打磨设计后,可以通过 Figma MCP 将设计变更拉回到代码库

工作流程的演进

过去,产品设计和开发工作流程通常是线性的:头脑风暴 → 设计 → 编码。现在,你可以从任何地方开始,到任何地方去。关键是停下来问自己是否在正确的方向上构建。

Figma 希望帮助用户逃离"隧道视野",跳出来探索全局。无论是产品构建始于终端、提示框、可视化 UI 还是手绘草图,Figma 都希望成为一切汇聚的地方。

阅读完整文章:https://www.figma.com/blog/the-future-of-design-is-code-and-canvas/

Figma CEO Dylan Field recently published an article outlining Figma's vision for the future of design: the convergence of code and canvas. In this era of exploding AI capabilities, the core work of design is finding the best possible solutions in a nearly infinite possibility space.

Claude Code to Figma: From Code to Design

Figma has introduced the new Claude Code to Figma feature, allowing developers to directly convert code into editable Figma designs:

  • Install the Figma MCP (Model Context Protocol)
  • Type "Send this to Figma" in Claude Code
  • The browser's rendered state automatically translates to fully editable Figma layers

Canvas Thinking vs. Code Thinking

Figma believes that in a world where AI can help build any possibility you can articulate, the core work of design is finding the best possible solutions. The design canvas is better at navigating lots of possibilities than prompting in an IDE or ADE:

  • Divergent thinking: On the canvas, you can compare approaches side by side and see the big picture
  • Direct manipulation: You can use direct manipulation to edit details
  • Bi-directional flow: After exploring options and polishing the design, you can simply use Figma MCP to pull design changes back into your codebase

Evolution of Workflows

Previously, product design and development workflows were often linear: brainstorm → design → code. Today, you can start anywhere and go everywhere. What's key is taking a moment to ask yourself if you're even building in the right direction.

Figma hopes to help users escape "tunnel vision," zoom out, and explore the big picture. Whether product building begins in a terminal, a prompt box, a visual UI, or a hand-drawn sketch, Figma wants to be the place where it all comes together.

Read the full article at https://www.figma.com/blog/the-future-of-design-is-code-and-canvas/

FigmaAI-DesignClaudeMCPProduct-Design
← All articles