Name: Claude 程式碼轉 Figma 超神技巧！ (Claude Code to Figma)
Uploaded: 2026-03-06T04:47:43.000Z
Duration: 3 min 20 s

I'm the design director on the AI team at Figma.

現在進行式

And I'm Alex, an engineer who worked on the feature that we're showing you here today.

我是 Alex，一位參與了我們今天在這裡展示的這個功能的工程師。

I'm really excited to show you this workflow that we've been working on.

我非常興奮能向大家展示我們一直在努力的這個工作流程。

Ideas can come from anywhere from doodles to code these days, and

現在，點子可以來自任何地方，從塗鴉到程式碼，而且

code is really interesting because it can get you to somewhere real very quickly,

程式碼真的很有趣，因為它可以讓你很快地達到實際的目標，

but it also runs this risk of just rabbit holing down and kind of missing out on a lot of the exploration stage.

但是它也有一個風險，就是你會鑽牛角尖，然後錯過很多探索的階段。

Exploring in code really means changing code.

在程式碼中探索，真的就是改變程式碼。

It also means creating new git branches, feature flags, threading variables and state and data through all these different code paths.

這也意味著建立新的 git 分支、feature flags、在所有這些不同的程式碼路徑中傳遞變數、狀態和資料。

Ultimately, versions that you end up with, they really just live on your laptop.

最終，你得到的版本，它們真的就只存在於你的筆記型電腦上。

They're not something that you can easily share and collaborate and show to other folks.

它們不是那種你可以輕鬆分享、協作並展示給別人的東西。

And so oftentimes I find that the feedback is often shared in the form of screenshots and video recordings and things like that.

所以很多時候我發現，回饋通常是以截圖和影片錄製等形式分享。

The decisions that you make in code often are also ultimately very single file.

你在程式碼中做的決定，很多時候最終也只存在於單一檔案裡。

They have to happen in a certain order and it kind of limits your ability to explore horizontally and think about the big picture.

它們必須按照一定的順序發生，這在某種程度上限制了你橫向探索和思考大局的能力。

And so for us, the canvas is key to a lot of our workflow.

所以對我們來說，畫布是我們許多工作流程的關鍵。

It's easier to engage as a team, you can see the differences side by side immediately, and

團隊更容易參與，你可以立即並排看到差異，而且

exploration just feels cheaper and more carefree.

探索的感覺更輕鬆、更無憂無慮。

Today we're releasing Claude code to Figma, a new feature in the Figma MCP server.

今天我們要發布 Claude code to Figma，這是 Figma MCP server 的一項新功能。

It can capture any running UI, state your browser and paste those as editable Figma frames right on the canvas.

它可以捕捉任何正在運行的 UI、瀏覽器狀態，並將它們作為可編輯的 Figma 框架直接貼到畫布上。

I have some working code that I really want to explore, so I'm going to spin up Claude and ask it to spin up a dev server.

我有一些想深入研究的程式碼，所以我要啟動 Claude，請它啟動一個開發伺服器。

Looks pretty cool, but we could probably make it work a little bit harder.

看起來很不錯，但我們或許可以讓它做得更多一點。

So what I'm going to do is I'm going to go back into Claude code and I'm going to ask it to send the My Pantry page to Figma.

所以我要做的是，我會回到 Claude code，然後請它將 My Pantry 頁面傳送到 Figma。

所以現在我們已經在 Figma 裡了。

I also wanted to capture a small detail here.

I can select element and I can pick up one of these cards that I think could be better explored.

我可以選取一個元素，然後挑選其中一張卡片，我覺得這張卡片可以更深入地探討。

So just by clicking it, it's already sending it to Figma, I can open up my file and there it is.

所以只要點一下，它就已經傳送到 Figma 了，我可以打開我的檔案，然後它就在那裡。

Now I can come and get my whole design team and we can start exploring variations on these designs.

現在我可以找來我的整個設計團隊，然後我們可以開始探索這些設計的各種變化。

And so for us, it's not really about polish, it's about exploration.

所以對我們來說，重點不是在於細節的打磨，而是在於探索。

We want to try out as many variations until we get to something that we feel really excited about.

我們要嘗試盡可能多的變化，直到我們找到一個讓我們覺得非常興奮的東西。

So we've jammed with the team on this and we've landed in these four different solutions that all really address the problem in quite different ways.

所以我們和團隊一起討論了這個，最後提出了這四種不同的解決方案，它們都以相當不同的方式解決了這個問題。

As an engineer, I also have this great context that is a bird's eye view of all the different trade offs and can make really clear engineering scope considerations based on this.

身為工程師，我也能獲得一個很棒的鳥瞰視角，瞭解所有不同的權衡取捨，並基於此做出非常明確的工程範圍考量。

That way no time is wasted on the implementation details of figuring out how to pull off each of these ideas before we're even ready to commit to which direction we want to go.

這樣一來，在我們準備好決定要往哪個方向前進之前，就不會浪費時間在實作細節上，去研究如何實現這些想法。

And finally, once we have selected one of those ideas, it's really easy for me to use the Figma MCP server to bring those frames back into my code editor and keep us moving forward as a team.

最後，一旦我們選定其中一個想法，我就可以很輕鬆地使用 Figma MCP server 將這些畫面帶回我的程式碼編輯器，讓團隊持續向前邁進。

So what's really great about this is that it uses the best of both worlds.

所以這個最棒的地方在於，它結合了兩全其美。

Code helps us get you to something that feels real quicker, but

程式碼能幫助我們更快地實現真實感，但

Canvas helps you explore and choose direction and really decide what's worth building.

Canvas 則能讓你探索、選擇方向，並真正決定什麼值得開發。

We've had a great time building code to Canvas and we're so excited to see what you end up building with it.

我們很高興能將程式碼與 Canvas 結合，也非常期待看到你們用它來創造出什麼。

字幕列表影片播放

Claude 程式碼轉 Figma 超神技巧！ (Claude Code to Figma)

ultimately

context

figure

engage