Figma Make x Claude — Biến prompt thành prototype: Dân design không code cũng làm được

Video chính thức từ kênh Anthropic — "How Figma Make uses Claude to turn prompts into prototypes" (1 phút 17 giây).

Figma Make là gì và tại sao nó quan trọng?

Figma là công cụ thiết kế giao diện (UI/UX) được dùng nhiều nhất thế giới — hầu hết các ứng dụng bạn dùng hàng ngày đều được thiết kế trong Figma trước khi được xây dựng. Nhưng lâu nay, Figma chỉ là công cụ cho designer và một số developer — người có ý tưởng nhưng không có kỹ năng thiết kế thường phải nhờ người khác "dịch" ý tưởng của mình thành design.

Figma Make là sản phẩm mới thay đổi điều đó. Với Figma Make được hỗ trợ bởi Claude, bạn mô tả những gì bạn muốn bằng ngôn ngữ tự nhiên — và Claude tạo ra prototype thực sự, có thể click được, chạy được, trực tiếp trong Figma. Không cần biết code. Không cần biết thiết kế chuyên nghiệp.

Triết lý cốt lõi: Design là về cảm xúc, không phải kỹ thuật

Đội ngũ Figma có một quan điểm sắc bén về bản chất của thiết kế: "The act of design — trying to convey a feeling. Only humans can do that."

Thiết kế thực sự — hành động thiết kế — là cố gắng truyền tải một cảm xúc. Chỉ con người mới làm được điều đó. AI không thiết kế; AI thực thi.

Đây là một phân biệt quan trọng và thành thật đáng ngạc nhiên từ một công ty đang tích hợp AI vào sản phẩm của mình. Figma không nói Claude sẽ thay thế designer — họ nói Claude là công cụ cho phép người có taste (cảm quan thẩm mỹ) thực hiện ý tưởng của mình dễ dàng hơn.

Logic là: mọi người đều có khả năng nhận biết design tốt và tệ — đó là "taste". Nhưng không phải ai cũng có khả năng kỹ thuật để tạo ra design tốt. Figma Make + Claude kết nối taste với execution — bạn mang taste, Claude mang technical execution.

Thách thức kỹ thuật mà Figma phải giải quyết

Để hiểu tại sao Figma cần Claude, cần hiểu bài toán kỹ thuật mà Figma đã giải quyết:

Figma hoạt động trên canvas — một hệ tọa độ 2D nơi mỗi element có vị trí, kích thước, màu sắc, và các thuộc tính chính xác được định nghĩa. Khi bạn thiết kế trong Figma, bạn đang tạo ra một hệ thống pixel-perfect.

Nhưng khi developer xây dựng sản phẩm thực sự, họ viết code — HTML, CSS, JavaScript, React, v.v. Code không hoạt động theo tọa độ pixel; nó hoạt động theo logic, component, và responsive design.

Bài toán: làm thế nào để dịch canvas Figma thành code thực sự — không phải code được generate ra rồi bỏ, mà code developer thực sự muốn dùng?

Figma đã thử nhiều cách khác nhau trong nhiều năm và mô tả đây là thứ họ "spent ton of time figuring out". Không phải vì thiếu kỹ thuật — mà vì độ phức tạp của bài toán dịch thuật giữa hai hệ thống tư duy hoàn toàn khác nhau.

Tại sao Claude là "the right partner"?

Figma thẳng thắn về lý do chọn Claude: "Claude clearly knows code better than most models, produces code developers would actually want to write."

Đây là một tuyên bố kỹ thuật có thể kiểm chứng được. Code mà AI generate thường rơi vào một trong hai vấn đề:

1. Code chạy được nhưng xấu: Hoạt động về mặt kỹ thuật nhưng không theo best practices, khó bảo trì, không đọc được
2. Code "clean" nhưng không hoạt động: Trông đẹp nhưng thiếu edge cases, không handle được real-world scenarios

Developer không thể dùng loại code đầu tiên vì nó tạo technical debt — nợ kỹ thuật tích lũy theo thời gian. Developer không thể dùng loại code thứ hai vì nó đơn giản là không hoạt động.

Claude tạo ra code developer thực sự muốn dùng — đây là lý do Figma gọi Claude là "such an evidently good coding model" — một mô hình code xuất sắc một cách rõ ràng.

Demo thực tế: Từ prompt đến prototype

Quy trình với Figma Make hoạt động như sau:

Bước 1 — Mô tả bằng ngôn ngữ tự nhiên:

Bạn gõ (hoặc nói): "Tạo cho tôi một trang landing page cho ứng dụng fitness tracking với hero section, danh sách tính năng, và form đăng ký. Tone hiện đại, energetic, màu chủ đạo xanh lá."

Bước 2 — Claude phân tích và generate:

Claude hiểu intent (ý định) của bạn, áp dụng kiến thức về design patterns, UX best practices, và Figma's component system để tạo ra layout.

Bước 3 — Prototype sẵn sàng trong Figma:

Trong vài giây, bạn có một prototype có thể click được trong Figma — không phải mockup tĩnh, mà là interface tương tác thực sự.

Bước 4 — Tinh chỉnh theo taste của bạn:

"Di chuyển CTA button xuống dưới. Làm phần testimonials to hơn. Thêm animation khi scroll." Claude điều chỉnh theo từng yêu cầu.

Toàn bộ quy trình này trước đây đòi hỏi ít nhất một designer có kinh nghiệm và vài giờ làm việc. Với Figma Make + Claude, người không biết design cũng có thể đạt được kết quả tương đương trong vài phút.

Tác động với những người không phải developer

Đây là điểm Figma nhấn mạnh nhiều nhất: "One of best innovations: non-coders can create things."

Trước đây, để có một prototype working — không phải wireframe, không phải mockup, mà prototype thực sự chạy được — bạn cần:

• Một designer có kinh nghiệm với Figma
• Một developer để viết code thực tế
• Ít nhất vài ngày qua lại giữa hai người

Với Figma Make + Claude, product manager, founder, marketer, hay bất kỳ ai có ý tưởng rõ ràng đều có thể tự tạo prototype trong một buổi chiều. Vòng lặp phản hồi được rút ngắn từ ngày xuống giờ, từ giờ xuống phút.

Tầm nhìn lớn hơn: Design sẽ trở nên dân chủ hơn

Figma có một tầm nhìn rõ ràng về tương lai: "Design is going to be a much more accessible practice."

Thiết kế sẽ trở thành một kỹ năng accessible hơn nhiều — không phải vì nó trở nên dễ hơn, mà vì rào cản kỹ thuật được hạ xuống đủ để taste và ý tưởng trở thành yếu tố quyết định, không phải kỹ năng kỹ thuật.

Điều này có hàm ý sâu sắc cho ngành thiết kế:

• Designer chuyên nghiệp sẽ tập trung vào những vấn đề phức tạp hơn đòi hỏi judgment thực sự
• Người không phải designer có thể tham gia vào quá trình thiết kế sớm hơn trong vòng phát triển sản phẩm
• Khoảng cách giữa ý tưởng và sản phẩm thực tế ngắn lại đáng kể

Figma Make quan trọng với ai ở Việt Nam?

Với bối cảnh Việt Nam, Figma Make mở ra khả năng cụ thể cho:

• Startup founder: Validate ý tưởng bằng prototype thực sự trước khi tuyển dụng developer hay designer — tiết kiệm đáng kể chi phí và thời gian
• Product manager: Tự tạo wireframe và prototype để trình bày stakeholders mà không phụ thuộc vào designer
• Freelancer và agency nhỏ: Tăng tốc độ deliver cho khách hàng — prototype trong buổi họp đầu tiên thay vì sau 1-2 tuần
• Developer muốn học design: Tạo UI draft nhanh để test với user trước khi đầu tư thời gian code đầy đủ

Figma Make hiện đang trong giai đoạn beta — bạn có thể đăng ký tại figma.com/make.