Cách tạo và thêm Mockups vào thiết kế Figma của bạn bằng plugin

Nếu bạn là một nhà thiết kế thích giới thiệu các thiết kế của mình bằng cách sử dụng các mô hình, bạn có thể dễ dàng tạo chúng trong Figma.

Thay vì lưu thiết kế Figma của bạn và chuyển sang chương trình khác để tạo mô hình giả, bạn có thể dễ dàng tải xuống các phần bổ trợ mô hình trong Figma. Có nhiều tùy chọn plugin theo nhiều kiểu khác nhau, nhưng chúng đều đơn giản để sử dụng và tích hợp vào các thiết kế lớn hơn.

Cách tìm và tải xuống các plugin Figma

Việc tải xuống và cài đặt plugin trong Figma giống nhau cho dù bạn đang sử dụng ứng dụng hay phiên bản trình duyệt. Từ trang chủ trình duyệt của Figma, hãy nhấp vào Cộng đồng> Plugin và Widgetvà tìm kiếm trong danh sách hoặc sử dụng thanh tìm kiếm.

Từ ứng dụng của Figma, trang chủ sẽ cung cấp tùy chọn tương tự như trình duyệt để truy cập trang cộng đồng. Nhưng nếu bạn đang ở trên một trang thiết kế, bạn có thể nhấp vào biểu tượng Figma, sau đó bổ sung. Nếu bạn đã cài đặt các plugin, bạn sẽ thấy chúng được liệt kê ở đây.

Để tìm thêm, hãy chọn Duyệt qua các plugin trong cộng đồng. Thao tác này sẽ đưa bạn đến trang cộng đồng trong ứng dụng nơi bạn có thể tìm kiếm các plugin khác.

Trên trang cộng đồng, bạn sẽ tìm thấy một thông tin nhỏ cho mỗi plugin, ngày cập nhật lần cuối và tần suất từng plugin được tải xuống. Để biết thêm thông tin về từng plugin — chẳng hạn như nhận xét từ người dùng và hướng dẫn sử dụng — nhấp vào tên của plugin sẽ đưa bạn đến trang thông tin của plugin đó.

Khi bạn đã tìm thấy một plugin mà bạn muốn tải xuống, hãy nhấp vào màu xanh lam Cài đặt cái nút.

Nếu bạn không biết phải tìm kiếm gì, đây là năm plugin mockup yêu thích hàng đầu của chúng tôi. Còn nhiều thứ khác nữa, nhưng thật tốt nếu bạn nên bắt đầu từ đâu đó.

Cách sử dụng plugin Mockup trong Figma

Quá trình cài đặt plugin giống nhau bất kể loại plugin bạn đang sử dụng, nhưng có thể có một số khác biệt về cách chúng được sử dụng. Đó là lý do tại sao tốt nhất bạn nên đọc trang cộng đồng của từng plugin để biết thêm chi tiết.

Trong Figma, bạn có thể chọn kích thước khung làm sẵn cho các màn hình cụ thể, như iPhone 13 hoặc Android lớn hoặc nhỏ. Bạn nên tạo thiết kế của mình cho kích thước thiết bị dự định của nó thay vì cố gắng thay đổi kích thước thiết kế sau đó để phù hợp với mô hình của bạn, nhưng một số mô hình sẽ cho phép các kích thước khác nhau một chút mà không bị biến dạng.

Bạn thậm chí có thể sử dụng ảnh chụp màn hình từ thiết bị của mình, ảnh này sẽ có kích thước hoàn hảo cho một mô hình của cùng một thiết bị.

Mockup thường dành cho các thiết kế màn hình tĩnh, mặc dù bạn có thể tạo một mockup video trong Photoshop. Chúng tôi sẽ tập trung vào mô hình Figma dành cho thiết bị cầm tay, nhưng bạn có thể tạo mô hình giả từ đầu trong Photoshop cho các thiết bị khác. Với thiết kế màn hình của bạn đã hoàn thành, bạn có thể chuyển sang tạo mô hình sản phẩm.

Chúng tôi sẽ hướng dẫn bạn cách sử dụng ba trong số các plugin được đề xuất của chúng tôi: Clay Mockups 3D, Angle Mockups và Vectory 3D Elements. Hãy bắt tay ngay vào.

Mô hình đất sét 3D

Khi thiết kế của bạn đang mở, hãy chọn khung và sau đó đi tới bổ sung và lựa chọn Mô hình đất sét 3D. Thao tác này sẽ mở ra một cửa sổ nơi bạn có thể chọn thiết bị cho mô hình. Thiết kế của bạn sẽ hiển thị trên màn hình của mô hình trong cửa sổ này.

Bạn có thể thay đổi góc của mô hình cũng như màu sắc trong cửa sổ này. Khi bạn hài lòng với giao diện của nó, hãy nhấp vào Lưu dưới dạng hình ảnh.

Bạn có thể quay lại và thay đổi màu sắc hoặc các khía cạnh khác bất kỳ lúc nào bằng cách nhấp vào Chỉnh sửa mô hình Dưới Cắm vào trong menu bên phải. Giờ đây, bạn có thể thêm plugin của mình vào các thiết kế lớn hơn như bản trình bày hoặc danh mục đầu tư của mình.

Mô hình góc

Để sử dụng Angle Mockups, bạn cần tạo một tài khoản Angle để tải xuống thư viện mockup từ trang web của họ. Trên trang web của Angle, nhấp vào Đăng nhậpsẽ hiển thị một cửa sổ bật lên nơi bạn có thể nhấp vào Đăng ký và thêm thông tin chi tiết của bạn để tạo một tài khoản miễn phí.

Sau khi đăng nhập, để tải xuống các mô hình, hãy nhấp vào Mô phỏng> Tải xuống mẫu. Để có một bộ mô hình toàn diện hơn, bạn có thể trả tiền để có quyền truy cập cao cấp, nhưng mẫu được cung cấp với tài khoản miễn phí là đủ tốt.

Sau khi tải xuống, hãy giải nén tệp. Phần này chứa các mẫu bạn có thể sử dụng trong Figma, Sketch và Adobe XD, cũng như một số hình nền miễn phí. Mở Góc Figma. Bạn sẽ tìm thấy hai video để trợ giúp việc sử dụng các mô hình, cũng như bốn bộ tệp Figma với các mô hình khác nhau.

Để nhập các tệp vào tài khoản Figma của bạn, hãy truy cập trình duyệt Figma và nhấp vào hồ sơ của bạn. Bạn có thể truy cập điều này từ ứng dụng bằng cách đi tới Tệp> Mở trình duyệt tệp. Kéo và thả từng tệp Angle vào Figma. Sau đó, mở tệp Angle bằng cách nhấp đúp vào tệp từ trang trình duyệt Figma.

Tìm góc thiết bị bạn muốn sử dụng cho mô hình của mình và sao chép nó (Cmd + C cho Mac hoặc Ctrl + C cho cửa sổ). Dán nó (Cmd + V cho Mac hoặc Ctrl + V cho Windows) vào cùng một artboard với thiết kế chính của bạn.

Trong bảng lớp, hãy mở rộng các lớp của màn hình giả lập cho đến khi bạn thấy lớp có biểu tượng hình ảnh có tiêu đề Đặt Artboard ở đây. Chọn lớp đó. Sau đó đi đến Plugin> Angle Mockups và chọn thiết kế ban đầu của bạn trong cửa sổ bật lên.

Điều này sẽ hiển thị trong cửa sổ xem trước theo góc của mô hình của bạn, nhưng nó sẽ không hiển thị thiết bị của mô hình đó. Nhấp chuột Ứng dụng và màn hình của bạn bây giờ sẽ ở trên mô hình thiết bị ở góc chính xác.

Yếu tố 3D Vectary

Vectary 3D hoạt động tương tự như Clay Mockups 3D, mặc dù nó có ít tùy chọn hơn cho mô hình thiết bị vì nó cũng cung cấp nhiều nội dung 3D. Mở thiết kế của bạn, chọn khung và đi tới Plugin> Phần tử 3D Vectary.

Tìm mô hình mà bạn muốn sử dụng trong thư viện bật lên, sau đó nhấp vào Khung tải. Khi thiết kế của bạn đã xuất hiện trên màn hình của thiết bị, hãy nhấp vào Xuất hình ảnh.

Bây giờ bạn có một mô hình 3D về thiết kế của mình trên thiết bị bạn chọn. Bạn có thể thêm nó vào một thiết kế khác một cách dễ dàng.

Khi mô hình của bạn hoàn tất, bạn có thể lưu nó dưới dạng tệp PNG để dễ dàng sử dụng trong một thiết kế khác. Nhấp chuột Tệp> Xuất. Chọn hình ảnh bạn đã chọn để xuất, sau đó nhấp vào Xuất khẩu cho PNG cuối cùng của bạn.

Thêm chủ nghĩa hiện thực vào thiết kế của bạn với mô hình Figma Mockups

Có vô số cách sử dụng để tạo mô hình cho các thiết kế của bạn. Với các plugin Figma khác nhau, bạn có thể tìm thấy nhiều kiểu khác nhau để làm việc mà bạn có thể thêm vào bản trình bày, danh mục đầu tư của mình hoặc tạo chỉ để thể hiện tác phẩm thiết kế của mình một cách thú vị.

Với một vài điểm khác biệt trong ứng dụng, các plugin mockup Figma rất dễ truy cập và sử dụng, vậy tại sao bạn không thử?

Đọc tiếp