Nhập vào Figma: Buddy biến Hình ảnh, HTML, thiết kế Claude, nguyên mẫu Claude và Trang web thành Lớp16 min read

Công việc thiết kế không còn bắt đầu ở một nơi nữa.

Đôi khi ý tưởng đầu tiên là nguyên mẫu Claude Design. Đôi khi nó là một hiện vật của Claude. Đôi khi đó là thử nghiệm HTML, ảnh chụp màn hình, trang đích mà bạn yêu thích hoặc trang web trực tiếp mà nhóm của bạn muốn học hỏi.

Vấn đề không phải là khiến AI hay web tạo ra thứ gì đó thú vị. Vấn đề là đưa ý tưởng đó trở lại nơi thực sự diễn ra thiết kế sản phẩm: Figma.

Buddy cho phép bạn nhập hầu hết mọi thứ vào Figma và biến nó thành các lớp thiết kế có thể chỉnh sửa trên khung vẽ. Không phải là một ảnh chụp màn hình phẳng. Không phải là hình ảnh tham chiếu tĩnh. Các lớp thực mà bạn có thể chỉnh sửa, sắp xếp, tinh chỉnh và chuyển giao.

Nhập mọi thứ vào Figma bằng Buddy, sau đó tiếp tục thiết kế trong Figma

Buddy là tác nhân thiết kế AI Figma của Anima. Nó nằm bên trong Figma, đọc canvas của bạn và giúp bạn tạo, chỉnh sửa và sắp xếp các thiết kế thông qua trò chuyện.

Giờ đây Buddy còn đóng vai trò là cầu nối giữa nguồn cảm hứng bên ngoài và quy trình làm việc Figma của bạn. Dán tạo phẩm, hình ảnh, ảnh chụp màn hình, HTML hoặc URL và Buddy biến nó thành các lớp Figma có thể chỉnh sửa để bạn có thể tiếp tục quá trình thiết kế mà không cần phải xây dựng lại từng khung theo cách thủ công.

Điều đó có nghĩa là bạn có thể bắt đầu từ:

• Hiện vật Claude Design, khi bạn muốn đưa giao diện do AI tạo vào Figma.
• hiện vật Claude, khi một nguyên mẫu, màn hình hoặc ý tưởng tương tác được tạo ra ở Claude.
• Hiện vật HTML, khi thiết kế bắt đầu từ HTML được tạo hoặc một mô hình được mã hóa.
• Hình ảnh và ảnh chụp màn hình, khi bạn muốn dán một tham chiếu trực quan và nhận các lớp Figma có thể chỉnh sửa.
• Trang web URLs, khi bạn muốn sao chép một trang web công cộng vào Figma làm thiết kế, bạn có thể kiểm tra và phối lại.

Quy trình làm việc rất đơn giản: đưa nguồn vào Buddy, để Anima diễn giải cấu trúc trực quan, sau đó tiếp tục thiết kế trực tiếp trên canvas Figma.

Tại sao điều này lại quan trọng: AI cung cấp cho bạn bản nháp đầu tiên, Figma cung cấp cho bạn quyền kiểm soát

Các công cụ AI rất giỏi trong việc tạo ra những bản nháp đầu tiên. Họ có thể tạo khái niệm ứng dụng, trang đích, trang tổng quan, quy trình giới thiệu, trang định giá, công cụ nội bộ và thử nghiệm sản phẩm trong vài phút.

Nhưng công việc thiết kế chuyên nghiệp không chỉ dừng lại ở bản thảo đầu tiên. Nó thường bắt đầu ở đó.

Các nhóm vẫn cần chỉnh sửa bản sao, sửa thứ bậc, áp dụng thương hiệu, căn chỉnh khoảng cách, sử dụng các thành phần, xem xét các trường hợp biên và chuẩn bị một tệp mà các nhà thiết kế, Thủ tướng và kỹ sư khác thực sự có thể làm việc cùng.

Đó là lý do tại sao nhập khẩu lại quan trọng. Nếu một ý tưởng do AI tạo ra vẫn bị khóa trong cửa sổ trò chuyện, trình xem tạo tác, ảnh chụp màn hình hoặc tab trình duyệt thì khó có thể biến thành quy trình thiết kế sản phẩm thực sự.

Buddy đưa công việc đó trở lại Figma dưới dạng các lớp có thể chỉnh sửa, do đó, đầu ra AI trở thành thứ mà nhóm của bạn có thể định hình.

Nhập các tạo phẩm Claude Design vào Figma

Claude Design là công cụ tuyệt vời để khám phá nhanh chóng các ý tưởng giao diện người dùng và khái niệm tương tác. Bạn có thể mô tả một sản phẩm, tính năng hoặc trang đích và nhanh chóng có được một sản phẩm tinh tế.

Nhưng nếu bước tiếp theo là đánh giá thiết kế, sàng lọc thương hiệu hoặc bàn giao, nhóm của bạn thường cần kết quả trong Figma.

Với Buddy, bạn có thể đưa tạo phẩm Claude Design vào Figma và tiếp tục từ đó. Buddy tái tạo giao diện dưới dạng các lớp có thể chỉnh sửa, do đó bạn có thể điều chỉnh bố cục, kiểu chữ, màu sắc, khoảng cách, biểu tượng và nội dung trên khung vẽ.

Điều này rất hữu ích khi người sáng lập, PM, nhà tiếp thị hoặc kỹ sư tạo ra nguyên mẫu AI trước, sau đó muốn một nhà thiết kế làm cho nó đạt chất lượng sản xuất.

Nhập các hiện vật Claude và nguyên mẫu AI

Hiện vật của Claude có thể bao gồm nhiều hơn một màn hình. Chúng có thể chứa các trạng thái, bảng điều khiển, menu, biểu mẫu, bảng, thẻ, trạng thái trống và các khái niệm giao diện người dùng đầy đủ.

Thay vì chụp ảnh màn hình và theo dõi thiết kế theo cách thủ công, hãy dán tạo phẩm vào Buddy. Anima biến nó thành một thiết kế Figma có cấu trúc mà nhóm của bạn có thể chỉnh sửa.

Khi nó ở trên canvas, bạn có thể:

• Tách màn hình thành các khung.
• Chỉnh sửa văn bản và bản sao sản phẩm.
• Tinh chỉnh khoảng cách và thứ bậc.
• Thay thế hình ảnh chung chung bằng tài sản thương hiệu.
• Áp dụng hệ thống thiết kế của bạn.
• Chuẩn bị thiết kế để xem xét hoặc bàn giao kỹ thuật.

Nguyên mẫu AI trở thành điểm khởi đầu chứ không phải là ngõ cụt.

Nhập tạo phẩm HTML vào Figma

Nhiều công cụ AI hiện tạo HTML làm đầu ra thiết kế của chúng. Điều đó có thể hữu ích cho việc xem trước nhanh, nhưng HTML không phải lúc nào cũng là nơi tốt nhất để đánh giá thiết kế sản phẩm.

Nhà thiết kế cần kiểm soát canvas. Họ cần di chuyển các lớp, so sánh các tùy chọn, kiểm tra thứ bậc và căn chỉnh công việc với hệ thống thiết kế.

Buddy hỗ trợ bằng cách đưa các tạo phẩm HTML trở lại Figma. Bạn có thể sử dụng đầu ra HTML làm nguồn, sau đó biến nó thành các lớp Figma có thể chỉnh sửa để dọn dẹp, sắp xếp lại và đánh bóng.

Điều này đặc biệt hữu ích cho các nhóm tạo nguyên mẫu mã trước, sau đó cần một tệp thiết kế phù hợp để cộng tác.

Dán hình ảnh hoặc ảnh chụp màn hình và nhận các lớp Figma có thể chỉnh sửa

Ảnh chụp màn hình có ở khắp mọi nơi trong sản phẩm.

Người dùng gửi ảnh chụp màn hình của quy trình họ thích. Một đồng đội chia sẻ một trang của đối thủ cạnh tranh. Một PM đưa ý tưởng giao diện người dùng thô vào Slack. Người sáng lập phác thảo trang đích bằng một công cụ AI khác.

Thông thường, ảnh chụp màn hình đó chỉ mang tính chất tham khảo. Bạn có thể đặt nó trong Figma, nhưng bạn vẫn phải xây dựng lại giao diện người dùng theo cách thủ công nếu muốn chỉnh sửa nó.

Với Buddy, bạn có thể dán hình ảnh hoặc ảnh chụp màn hình và biến nó thành các lớp Figma có thể chỉnh sửa. Văn bản, bố cục, cấu trúc hình ảnh và các thành phần giao diện người dùng trở thành những thứ bạn có thể làm việc trên canvas.

Điều đó giúp loại bỏ phần khó chịu nhất của quy trình: tạo lại những gì đã tồn tại chỉ để bạn có thể thực hiện các thay đổi.

Sao chép bất kỳ trang web nào bằng cách dán URL

Cảm hứng từ trang web là một trong những điểm khởi đầu phổ biến nhất cho công việc tiếp thị và sản phẩm mới.

Có thể bạn thích cấu trúc của trang chủ SaaS. Có thể bạn muốn nghiên cứu một trang định giá. Có thể bạn cần chụp bố cục trang tổng quan, quy trình giới thiệu hoặc phần trang đích.

Với Buddy, bạn có thể dán trang web URL và đưa trang đó vào Figma dưới dạng thiết kế có thể chỉnh sửa. Thay vì lưu ảnh chụp màn hình, Buddy giúp bạn tạo lại cấu trúc trực quan dưới dạng các lớp trên khung vẽ.

Sử dụng nó để học hỏi từ các mẫu, khám phá các lựa chọn thay thế, xây dựng bảng tâm trạng hoặc tăng tốc phiên bản đầu tiên của trang mới. Sau đó, biến nó thành của bạn với bản sao, thành phần, thương hiệu và câu chuyện sản phẩm của bạn.

Những gì bạn nhận được trên canvas Figma

Sự khác biệt chính là khả năng chỉnh sửa.

Buddy không chỉ đặt một bitmap lên khung vẽ. Mục tiêu là cung cấp cho bạn một thiết kế Figma khả thi, có thể chỉnh sửa, xem xét và cải tiến.

Sau khi nhập, bạn có thể tiếp tục công việc Figma bình thường:

• Chỉnh sửa văn bản trực tiếp.
• Di chuyển và thay đổi kích thước các lớp.
• Điều chỉnh màu sắc, phông chữ, khoảng cách và phân cấp.
• Tổ chức các khung và phần.
• Áp dụng Bố cục tự động khi cần thiết.
• Thay thế các phần tử thô bằng các phần tử thực.
• Căn chỉnh kết quả với hệ thống thiết kế của bạn.

Đó chính là quan điểm của Buddy: tốc độ mà không bị mất kiểm soát.

Quy trình làm việc tốt hơn cho thiết kế do AI tạo ra

Quy trình làm việc cũ trông như thế này:

1. Tạo ý tưởng trong công cụ AI.
2. Chụp ảnh màn hình.
3. Dán ảnh chụp màn hình vào Figma.
4. Xây dựng lại thiết kế theo cách thủ công từ đầu.
5. Bắt đầu công việc thiết kế thực tế.

Quy trình làm việc của Buddy ngắn hơn:

1. Tạo hoặc tìm nguồn: tạo phẩm, HTML, hình ảnh, ảnh chụp màn hình hoặc URL.
2. Dán nó vào Buddy.
3. Nhận các lớp Figma có thể chỉnh sửa.
4. Tiếp tục thiết kế trên canvas.

Điều này quan trọng vì ngày càng có nhiều nhóm bắt đầu từ cảm hứng về AI và web, nhưng họ vẫn cần quy trình thiết kế chuyên nghiệp. Buddy kết nối những thế giới đó.

Cái này dành cho ai?

Nhập mọi thứ vào Buddy rất hữu ích cho những ai cần di chuyển nhanh mà không làm mất quy trình làm việc của Figma.

• Nhà thiết kế có thể biến kết quả đầu ra và ảnh chụp màn hình AI thành điểm bắt đầu có thể chỉnh sửa.
• Thủ tướng có thể đưa các hiện vật của Claude hoặc tài liệu tham khảo trang web vào Figma để thảo luận về sản phẩm rõ ràng hơn.
• Người sáng lập có thể chuyển từ ý tưởng sang file thiết kế mà không cần phải xây dựng lại mọi thứ theo cách thủ công.
• Nhà tiếp thị có thể sao chép cảm hứng trang đích và điều chỉnh nó cho phù hợp với thương hiệu của họ.
• kỹ sư có thể tạo nguyên mẫu bằng các công cụ HTML hoặc AI, sau đó chuyển kết quả lại cho thiết kế.

Nó không phải là về việc thay thế thiết kế. Đó là về việc loại bỏ công việc tái thiết nhàm chán giữa một ý tưởng và một khung vẽ có thể chỉnh sửa được.

Hãy thử nhập ý tưởng tiếp theo của bạn vào Buddy

Màn hình sản phẩm tuyệt vời tiếp theo có thể bắt đầu bằng Claude Design, tạo phẩm Claude, nguyên mẫu HTML được tạo, ảnh chụp màn hình hoặc trang web URL.

Với Buddy, điểm bắt đầu đó có thể trở thành thiết kế Figma có thể chỉnh sửa trong quy trình làm việc hiện tại của bạn.

Dán nó vào Buddy, lấy các lớp trên khung vẽ và tiếp tục thiết kế.