Name: Claude Code sang Figma (Claude Code to Figma)
Uploaded: 2026-03-06T04:47:44.000Z
Duration: 3 min 20 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

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

Tôi là giám đốc thiết kế của đội AI tại Figma.

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

Còn tôi là Alex, một kỹ sư đã làm việc trên tính năng mà chúng tôi giới thiệu với bạn hôm nay.

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

Tôi rất hào hứng được giới thiệu với bạn quy trình làm việc mà chúng tôi đã thực hiện.

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

Ý tưởng ngày nay có thể đến từ bất cứ đâu, từ bản phác thảo cho đến mã nguồn, và

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

mã nguồn thực sự thú vị vì nó có thể đưa bạn đến một kết quả thực tế rất nhanh,

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

nhưng nó cũng tiềm ẩn rủi ro là sa lầy và bỏ lỡ giai đoạn khám phá.

Exploring in code really means changing code.

Khám phá trong mã nguồn thực sự có nghĩa là thay đổi mã nguồn.

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

Nó cũng có nghĩa là tạo nhánh git mới, cờ tính năng, luồng biến và trạng thái, dữ liệu qua tất cả các đường dẫn mã nguồn khác nhau.

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

Cuối cùng, các phiên bản mà bạn có, chúng thực sự chỉ tồn tại trên máy tính xách tay của bạn.

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

Chúng không phải là thứ bạn có thể dễ dàng chia sẻ, cộng tác và hiển thị cho người khác.

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

Và vì vậy, thông thường tôi thấy phản hồi thường được chia sẻ dưới dạng ảnh chụp màn hình và bản ghi video, những thứ tương tự.

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

Các quyết định bạn đưa ra trong mã nguồn thường cũng cuối cùng chỉ là một tệp duy nhất.

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

Chúng phải xảy ra theo một thứ tự nhất định và điều đó phần nào hạn chế khả năng khám phá theo chiều ngang và suy nghĩ về bức tranh lớn.

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

Và vì vậy, đối với chúng tôi, canvas là chìa khóa cho rất nhiều quy trình làm việc của chúng tôi.

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

Việc tương tác với tư cách là một nhóm trở nên dễ dàng hơn, bạn có thể thấy sự khác biệt ngay lập tức giữa các phiên bản, và

exploration just feels cheaper and more carefree.

việc khám phá cảm thấy rẻ hơn và thoải mái hơn.

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

Hôm nay chúng tôi ra mắt Claude code cho Figma, một tính năng mới trong máy chủ Figma MCP.

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

Nó có thể chụp bất kỳ giao diện người dùng nào đang chạy, trạng thái trình duyệt của bạn và dán chúng dưới dạng các khung Figma có thể chỉnh sửa ngay trên canvas.

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.

Tôi có một đoạn mã đang hoạt động mà tôi thực sự muốn khám phá, vì vậy tôi sẽ khởi động Claude và yêu cầu nó khởi động một máy chủ dev.

Vậy đây là điểm bắt đầu của chúng ta.

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

Trông khá hay đấy, nhưng chúng ta có thể làm cho nó hoạt động hiệu quả hơn một chút.

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.

Vì vậy, tôi sẽ quay lại Claude code và yêu cầu nó gửi trang My Pantry đến Figma.

Vậy là giờ chúng ta đã có nó trong Figma.

I also wanted to capture a small detail here.

Tôi cũng muốn ghi lại một chi tiết nhỏ ở đây.

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

Tôi có thể chọn một phần tử và chọn một trong những thẻ này mà tôi nghĩ có thể được khám phá tốt hơn.

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

Chỉ cần nhấp vào đó, nó đã gửi đến Figma, tôi có thể mở tệp của mình và nó ở đó.

Vậy là giờ nó đã có trên canvas.

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

Giờ tôi có thể mời toàn bộ đội thiết kế của mình đến và chúng ta có thể bắt đầu khám phá các biến thể của những thiết kế này.

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

Đối với chúng tôi, vấn đề không thực sự là sự trau chuốt, mà là sự khám phá.

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

Chúng tôi muốn thử nghiệm càng nhiều biến thể càng tốt cho đến khi chúng tôi đạt được điều gì đó mà chúng tôi thực sự hào hứng.

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.

Vì vậy, chúng tôi đã làm việc với đội về vấn đề này và chúng tôi đã đưa ra bốn giải pháp khác nhau, tất cả đều giải quyết vấn đề theo những cách khá khác nhau.

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.

Với tư cách là một kỹ sư, tôi cũng có cái nhìn tổng quan tuyệt vời về tất cả các đánh đổi khác nhau và có thể đưa ra các cân nhắc về phạm vi kỹ thuật rõ ràng dựa trên điều này.

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.

Bằng cách đó, không lãng phí thời gian vào các chi tiết triển khai để tìm hiểu cách thực hiện từng ý tưởng này trước khi chúng ta sẵn sàng cam kết về hướng đi mình muốn.

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.

Và cuối cùng, sau khi chúng tôi đã chọn một trong những ý tưởng đó, tôi có thể dễ dàng sử dụng máy chủ MCP Figma để đưa các khung đó trở lại trình chỉnh sửa mã của mình và giúp chúng tôi tiến lên với tư cách là một đội.

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

Điều thực sự tuyệt vời về điều này là nó tận dụng những gì tốt nhất của cả hai thế giới.

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

Mã nguồn giúp chúng ta nhanh chóng đi đến thứ gì đó có cảm giác chân thực, nhưng

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

Canvas giúp bạn khám phá, chọn hướng đi và thực sự quyết định điều gì đáng để xây dựng.

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

Chúng tôi đã có khoảng thời gian tuyệt vời khi xây dựng code to Canvas và rất hào hứng chờ xem bạn sẽ xây dựng gì với nó.

Subtitles ListPlay Video

Claude Code sang Figma (Claude Code to Figma)

ultimately

context

figure

engage