Figma Make: Biến văn bản thành thiết kế chỉ trong vài giây

Tìm hiểu khả năng thực sự, những hạn chế trung thực của Figma Make, và các kỹ thuật hướng dẫn giúp tạo ra kết quả hữu ích thay vì những rắc rối khi phải dọn dẹp.

Công cụ mà mọi người đều có ý kiến

Figma Make ra mắt và cộng đồng mạng đã có nhiều ý kiến ​​trái chiều. Một số nhà thiết kế gọi nó là công cụ thay đổi cuộc chơi. Những người khác lại cho rằng họ dành nhiều thời gian hơn để dọn dẹp kết quả đầu ra của AI so với việc thiết kế từ đầu.

Cả hai phía đều đúng. Họ chỉ đang sử dụng nó cho những mục đích khác nhau.

Make thực sự hữu ích - khi bạn hiểu nó thực sự dùng để làm gì. Bài học này sẽ cung cấp cho bạn sự hiểu biết đó, cùng với các kỹ thuật hướng dẫn giúp phân biệt kết quả đầu ra "tầm thường" với kết quả đầu ra "thực sự hữu ích".

Make thực sự làm gì?

Figma Make là công cụ thiết kế AI tích hợp trong ứng dụng. Quy trình làm việc rất đơn giản:

1. Chọn một khung (hoặc tạo một khung trống)

2. Mô tả những gì bạn muốn bằng văn bản thuần túy

3. Figma sẽ tạo ra nó - các layer, thành phần, văn bản, hình ảnh

Chỉ vậy thôi! Không cần code. Không cần plugin. Không cần thiết lập. Bạn gõ, nó sẽ tạo ra kết quả.

Make sử dụng các mô hình AI riêng của Figma được đào tạo dựa trên các mẫu thiết kế. Nó hiểu các quy ước giao diện người dùng phổ biến - thanh điều hướng, phần chính, lưới thẻ, bố cục biểu mẫu. Nó tạo ra các layer Figma thực tế với Auto Layout, chứ không phải hình ảnh phẳng.

Kết quả đầu ra là thiết kế thực tế, có thể chỉnh sửa. Bạn có thể chọn các phần tử riêng lẻ, thay đổi văn bản, điều chỉnh khoảng cách, hoán đổi màu sắc. Nó không phải là ảnh chụp màn hình hoặc ảnh bitmap bị làm phẳng.

✅ Kiểm tra nhanh: Figma Make xuất ra gì - hình ảnh phẳng hay các layer Figma có thể chỉnh sửa?

Đáp án: Các layer có thể chỉnh sửa với Auto Layout. Bạn có thể chọn, sửa đổi và định kiểu lại mọi phần tử mà Make tạo ra.

Điểm mạnh của Make

Make chứng tỏ giá trị của nó trong ba trường hợp:

1. Khám phá nhanh chóng

Bạn đang trong một cuộc họp. Ai đó nói "nếu chúng ta có một phần đánh giá khách hàng với các thẻ thì sao?" Thay vì phác thảo trên bảng trắng, bạn nhập nó vào Make và có một thứ gì đó trực quan trong 15 giây.

Đây là điểm mạnh của Make. Khám phá nhanh chóng, ít tốn công sức. Bạn không xây dựng màn hình sản xuất - bạn đang tạo ra những ý tưởng khởi đầu cuộc trò chuyện.

2. Các phương án bố cục khác nhau

Bí ý tưởng bố cục? Hãy cung cấp cho Make cùng một mô tả nội dung ba lần. Bạn sẽ nhận được ba cách bố trí khác nhau. Không cách nào hoàn hảo, nhưng một trong số đó có thể gợi ra một ý tưởng mà bạn chưa từng nghĩ đến.

Hãy sử dụng nó như một công cụ động não, chứ không phải là một công cụ sản xuất.

3. Bản mô phỏng nội dung

Cần cho bên liên quan thấy trang trông như thế nào với nội dung thực tế thay vì văn bản giả? Hãy mô tả trang với nội dung thực tế trong prompt của bạn. Make sẽ tạo nội dung nhanh hơn bạn sao chép và dán.

Những điểm yếu của Make

Đây là nơi mà sự trung thực quan trọng hơn sự cường điệu.

Bố cục phức tạp. Các trang nhiều phần với điều hướng lồng nhau, trạng thái có điều kiện và những yếu tố đáp ứng? Make có thể tạo ra sản phẩm, nhưng thường thiếu tính phân cấp. Trọng tâm hình ảnh bị lệch. Các phần cần nổi bật lại được xử lý giống như những yếu tố phụ.

Tuân thủ hệ thống thiết kế. Make không biết về hệ thống thiết kế của bạn. Nó tạo ra các thành phần chung chung - không phải nút của bạn, không phải kiểu thẻ của bạn, không phải token khoảng cách của bạn. Mỗi phần tử cần được thay thế bằng các thành phần thực tế của bạn sau đó.

Tính nhất quán giữa các màn hình. Nếu bạn tạo trang cài đặt và trang profile riêng biệt, chúng sẽ trông như được thiết kế bởi những người khác nhau. Make không có bộ nhớ giữa các lần tạo. Nó không thể duy trì một luồng hình ảnh nhất quán.

Chi phí dọn dẹp. Đây là lời phàn nàn bạn sẽ nghe thấy nhiều nhất: "Tôi dành nhiều thời gian sửa lỗi đầu ra của Make hơn là thiết kế từ đầu". Đối với các bố cục đơn giản, điều đó thường không đúng. Đối với những bố cục phức tạp, điều đó thường đúng.

Các báo cáo từ cộng đồng cũng phản ánh điều này. Các nhà thiết kế đã thử nghiệm Make rộng rãi mô tả nó là hữu ích trong 30% đầu tiên của quá trình thiết kế - giai đoạn từ canvas trống đến cấu trúc thô. Sau đó, công việc thủ công sẽ chiếm ưu thế.

✅ Kiểm tra nhanh: Kể tên hai điều Make làm tốt và hai điều nó gặp khó khăn.

Đáp án: Make làm tốt: khám phá nhanh, các lựa chọn bố cục thay thế. Make gặp khó khăn: bố cục phức tạp, tính nhất quán của hệ thống thiết kế.

Các kỹ thuật tạo prompt thực sự hiệu quả

Chất lượng đầu ra của Make phụ thuộc rất nhiều vào prompt của bạn. Dưới đây là những yếu tố phân biệt kết quả hữu ích với kết quả chung chung.

Hãy nêu cụ thể về các yếu tố

Yếu: "Tạo một trang đích"

Mạnh: "Một phần chính của trang đích với tiêu đề ở bên trái, ảnh chụp màn hình sản phẩm ở bên phải, phụ đề bên dưới tiêu đề và hai nút - một nút màu xanh chính có nội dung 'Start Free Trial' và một nút viền phụ có nội dung 'Watch Demo'"

Bạn càng cụ thể về các yếu tố cần có và vị trí của chúng, Make càng hoạt động tốt hơn.

Bao gồm chi tiết trực quan

Yếu: "Một bảng giá"

Mạnh: "Một bảng giá ba cột. Mỗi cột có tên gói, giá hàng tháng bằng chữ lớn, danh sách 5 tính năng có dấu tích và nút CTA. Cột giữa nên cao hơn và được làm nổi bật là 'Most Popular'"

Make phản hồi ngôn ngữ không gian - "trái," "phải," "trên," "dưới," "lớn hơn," "được làm nổi bật."

Đặt tên cho màu sắc và kích thước thẻ

Yếu: "Một thẻ tối màu"

Mạnh: "Một thẻ có nền màu xám đậm (#1F2937), chữ trắng, khoảng cách lề 16px và các góc tròn. Bao gồm một avatar nhỏ ở góc trên bên trái, tên in đậm và mô tả hai dòng bên dưới".

Mã hex, giá trị pixel và hướng dẫn kiểu chữ cụ thể cải thiện đáng kể kết quả.

Mô tả cấu trúc, không phải khái niệm

Yếu: "Một phần về giá trị của nhóm chúng tôi"

Mạnh: "Ba thẻ xếp liền nhau. Mỗi thẻ có một biểu tượng ở trên cùng, tiêu đề in đậm như 'Transparency', mô tả hai câu và liên kết 'Learn More' ở cuối".

Hãy diễn đạt theo nghĩa đen. Mô tả khái niệm và hệ thống sẽ đoán. Mô tả cấu trúc và hệ thống sẽ cung cấp kết quả.

Ví dụ minh họa: Biểu mẫu đăng ký

Đây là prompt:

Một biểu mẫu đăng ký được căn giữa trang. Thẻ màu trắng trên nền xám nhạt. Thẻ có tiêu đề 'Create Your Account', trường nhập email, trường nhập mật khẩu với biểu tượng bật/tắt hiển thị, nút 'Sign Up' màu xanh lam toàn chiều rộng và liên kết 'Already have an account? Log in' bên dưới nút. Khoảng cách lề 24px bên trong thẻ, khoảng cách giữa các trường là 8px.

Những gì Make thường tạo ra:

• Bố cục thẻ được căn giữa — chính xác

• Tiêu đề, trường email, trường mật khẩu, nút — chính xác

• Biểu tượng bật/tắt hiển thị — đôi khi có, đôi khi không

• Khoảng cách gần với yêu cầu của bạn — thường trong khoảng 4-8px

• Kiểu dáng chung chung thay vì hệ thống thiết kế của bạn

Kết quả đạt được 70-80%. Bạn vẫn cần:

• Thay thế nút chung chung bằng thành phần nút thực tế của bạn

• Điều chỉnh khoảng cách cho phù hợp với lưới của bạn

• Áp dụng tỷ lệ kiểu chữ của bạn

• Thêm trạng thái tiêu điểm và mẫu xác thực

Bạn muốn có một bản mô phỏng nhanh để trình bày cho người quản lý dự án? Make giúp tiết kiệm thời gian thực sự. Đối với màn hình sản phẩm gửi cho nhà phát triển? Bạn vẫn còn việc phải làm.

✅ Kiểm tra nhanh: Bạn đã sử dụng Make để tạo biểu mẫu đăng ký. Bố cục đúng nhưng nút không khớp với hệ thống thiết kế của bạn. Đây có phải là cách sử dụng Make hiệu quả?

Đáp án: Có - Make đã nhanh chóng tạo đúng cấu trúc. Việc thay thế thành phần nút thực tế của bạn chỉ mất vài giây. Make đã tiết kiệm thời gian từ việc tạo canvas trống đến bố cục thô.

Khi nào nên sử dụng Make? Khi nào nên sử dụng MCP?

Đây là framework quyết định bạn sẽ sử dụng xuyên suốt khóa học này:

Tóm lại: Make dành cho tốc độ. MCP dành cho tính nhất quán.

Make giúp bạn tạo ra sản phẩm hoàn chỉnh chỉ trong vài giây. MCP giúp bạn đạt được chất lượng sản phẩm cuối cùng. Bắt đầu từ Bài học 3, bạn sẽ thiết lập MCP và tự mình thấy sự khác biệt.

Thực hành: Thử thách với lệnh Make

Hãy thử hai prompt này trong Figma Make. Sau mỗi lệnh, hãy ghi lại những gì hoạt động và những gì không:

Prompt 1 (Đơn giản):

Một banner thông báo ở đầu trang. Nền vàng, chữ tối màu, biểu tượng cảnh báo ở bên trái, thông báo ở giữa và nút đóng hình chữ X ở bên phải.

Prompt 2 (Phức tạp):

Một thanh bên trang cài đặt với 8 mục menu bao gồm các biểu tượng. Mỗi mục có một biểu tượng ở bên trái và một nhãn. Mục đang hoạt động có nền xanh lam. Nhóm các mục thành hai phần: 'Tài khoản' (4 mục) và 'Tùy chọn' (4 mục) với tiêu đề phần.

Hãy để ý cách kết quả của bạn thay đổi khi độ phức tạp tăng lên. Khoảng cách đó chính xác là những gì các MCP agent giải quyết.

Thử ngay: Hoàn thiện prompt Figma Make cho một màn hình thực tế

Mở ChatGPT, Claude hoặc Gemini (chuẩn bị sẵn Figma Make để dán kết quả):

Đóng vai trò là kỹ sư thiết kế prompt Figma Make của tôi. Biến ý tưởng màn hình mơ hồ của TÔI thành một prompt Figma Make CỤ THỂ tạo ra kết quả có thể sử dụng được 70-80% ngay từ lần thử đầu tiên, cộng thêm danh sách kiểm tra để hoàn thiện 20-30% còn lại.

Về màn hình tôi muốn:
- Mục đích của màn hình trong một câu: []
- Sản phẩm / bối cảnh (SaaS / ứng dụng người dùng / trang web tiếp thị / công cụ nội bộ / khác): []
- Kích thước canvas mục tiêu (desktop 1440x900 / thiết bị di động 375x812 / khác): []
- Loại khung (hero / cài đặt / bảng điều khiển / giá cả / biểu mẫu / cửa sổ pop-up / trạng thái trống / khác): []
- Các yếu tố tôi biết nó cần (liệt kê): []
- Màu sắc thương hiệu của tôi ở dạng hex (chính / phụ / trung tính / nhấn): []
- Kích thước phông chữ của tôi (kích thước tiêu đề px / kích thước nội dung px / tùy chọn chiều cao dòng): []
- Hệ thống khoảng cách (lưới 4px / 8px / thang Tailwind / tùy chỉnh): []
- Kiểu bo tròn góc (sắc nét / 4px / 8px / bo tròn hoàn toàn): []
- Giọng điệu / tâm trạng (chuyên nghiệp / thân thiện / tối giản / đậm / vui tươi): []

Cần nộp:
1. PROMPT MAKE — sẵn sàng để dán, được cấu trúc với các yếu tố / bố cục / màu sắc / khoảng cách / kiểu chữ / 
2. CÁC BIẾN THỂ PROMPT — 2 cấu trúc thay thế (cùng nội dung, bố cục khác nhau) mà tôi có thể thử để so sánh
3. KẾT QUẢ MONG ĐỢI — những gì Make có khả năng làm đúng so với những gì nó có thể làm sai cho màn hình của tôi
4. DANH SÁCH KIỂM TRA DỌN DẸP — danh sách có thứ tự gồm 5 điều tôi nên sửa SAU KHI tạo (hoán đổi thành phần / khoảng cách / thứ bậc / kiểu dáng thương hiệu)
5. KHI NÀO NÊN TỪ BỎ — 3 tín hiệu cho tôi biết màn hình này là việc của MCP, không phải việc của Make
6. NGÂN SÁCH THỜI GIAN — tôi nên dành bao nhiêu thời gian cho lần lặp Make này trước khi chuyển sang phương pháp khác
7. LƯU LẠI ĐỂ SỬ DỤNG SAU — các phần của prompt có thể tái sử dụng trên những màn hình trong tương lai trong dự án của tôi

QUY TẮC BẮT BUỘC:
- Make dành cho tốc độ, không phải cho sản xuất hàng loạt. Mục tiêu là 70-80%, không phải 100%.
- Cụ thể hơn thông minh. "Đệm 16px" hơn "khoảng cách đẹp." Mã hex hơn "hơi tối."
- Ngôn ngữ không gian (trái/phải/trên/dưới/được tô sáng) hoạt động tốt hơn ngôn ngữ khái niệm ("cảm giác cao cấp").
- Make không hiểu hệ thống thiết kế của tôi. Lên kế hoạch hoán đổi các thành phần trong danh sách dọn dẹp ngay từ đầu.
- Bố cục phức tạp với nhiều phần + trạng thái: hãy sử dụng MCP thay vì Make. Make gặp khó khăn khi xử lý quá 3 vùng riêng biệt.
- Lặp lại prompt, không phải đầu ra. Viết lại prompt 3 lần tốt hơn là sửa lỗi thủ công 30 lần.
- Lưu prompt. Prompt tốt có thể được sử dụng lại trên các màn hình tương tự.
- Đừng tin tưởng vào kiểu chữ hoặc lựa chọn màu sắc của Make. Kiểm tra lại với các mã thương hiệu mỗi lần.
- Khả năng truy cập: Make không xử lý tỷ lệ tương phản hoặc trạng thái lấy nét. Thêm chúng thủ công hoặc chuyển sang MCP.

Những điểm chính cần ghi nhớ

• Figma Make tạo ra các lớp Figma có thể chỉnh sửa từ mô tả văn bản — chứ không phải hình ảnh phẳng

• Make hoạt động tốt nhất cho việc khám phá nhanh, các phương án bố cục thay thế và bản phác thảo nội dung

• Các bố cục phức tạp thường yêu cầu nhiều thời gian chỉnh sửa hơn so với thiết kế thủ công — hãy thành thật về thời điểm Make hữu ích và thời điểm không

• Các prompt cụ thể với tên phần tử, màu sắc, giá trị khoảng cách và ngôn ngữ không gian sẽ tạo ra kết quả tốt hơn đáng kể

• Make không nhận biết hệ thống thiết kế của bạn — nó tạo ra các thành phần chung chung mỗi lần

• Sử dụng Make để có tốc độ, sử dụng các MCP agent để có tính nhất quán. Bắt đầu từ bài học tiếp theo, bạn sẽ thiết lập MCP.