Mar 20, 2024

Cách tạo nguyên mẫu trên Figma

Các nhà thiết kế có thể tạo và cộng tác thiết kế trên một nền tảng duy nhất với sự trợ giúp của công cụ thiết kế nổi tiếng Figma. Khả năng tạo mẫu là một trong những tính năng chính của Figma đó là chúng cho phép các nhà thiết kế tạo ra các thiết kế tương tác mô phỏng trải nghiệm người dùng. Tạo mẫu trong Figma là quá trình thêm các tương tác và hoạt ảnh vào thiết kế của bạn. Nhà thiết kế phải thêm các tương tác vào thiết kế của họ và mở tùy chọn nguyên mẫu ở thanh bên phải để bắt đầu tạo nguyên mẫu trong Figma. Những cú nhấp chuột đơn giản vào các hoạt ảnh và chuyển tiếp phức tạp hơn đều có thể được coi là tương tác. Để tăng thêm tính hiện thực và tương tác cho ý tưởng của mình, các nhà thiết kế cũng có thể áp dụng hoạt ảnh và tạo chi tiết tương tác.

Nhà thiết kế có thể đánh giá thiết kế của họ và sửa đổi cài đặt nguyên mẫu sau khi triển khai hoạt ảnh và tương tác. Để xem trước và thiết lập khung bắt đầu của nguyên mẫu, họ cũng có thể chọn kiểu máy và thiết bị. Các nhà thiết kế có thể thử nghiệm ý tưởng của mình trước khi chúng được phát triển và xây dựng các thiết kế tương tác mô phỏng trải nghiệm người dùng bằng các tính năng tạo nguyên mẫu của Figma.

1. Bắt đầu với Figma

Bước đầu tiên trong việc sử dụng Figma để tạo nguyên mẫu là bắt đầu một dự án mới. Người dùng phải truy cập trang tổng quan bằng cách đăng nhập vào tài khoản Figma của họ. Sau đó, họ có thể bắt đầu một dự án mới bằng cách nhấp vào nút "Tạo tệp mới".

1.1. Tạo một dự án mới

Người dùng có thể bắt đầu tạo thiết kế giao diện của mình ngay khi dự án mới được khởi chạy. Artboards, cho phép người dùng sắp xếp bản vẽ của họ thành các trang riêng biệt, chỉ là một trong nhiều công cụ và tính năng mà Figma cung cấp để hỗ trợ người dùng tạo ra tác phẩm của họ. Ngoài ra, người dùng có thể định vị các công cụ và chức năng cụ thể trong ứng dụng bằng cách sử dụng menu thả xuống và biểu tượng tìm kiếm.

1.2. Tìm hiểu giao diện Figma

Với nhiều công cụ và chức năng dễ truy cập, giao diện Figma được thiết kế vừa đơn giản vừa thân thiện với người dùng. Giao diện chính được chia thành nhiều phần, bao gồm thanh công cụ, khung vẽ và bảng điều khiển lớp.

Các công cụ vẽ, văn bản và hình dạng chỉ là một số khả năng và công cụ có thể truy cập được thông qua thanh công cụ. Trong khi bảng điều khiển lớp cho phép người dùng quản lý và sắp xếp các lớp của họ thì canvas là nơi người dùng tạo và thay đổi thiết kế của họ.

Figma là một công cụ hiệu quả để tạo và tạo mẫu các giao diện xung quanh. Figma cung cấp một loạt công cụ và tính năng để hỗ trợ người dùng tạo giao diện lý tưởng cho dự án của họ, bất kể mức độ kinh nghiệm thiết kế của họ.

2. Cách tạo nguyên mẫu trong Figma: Những điều cơ bản

2.1. Nguyên mẫu là gì?

Trước khi phiên bản cuối cùng được tạo ra, nguyên mẫu là dạng ban đầu của một thiết kế hoặc sản phẩm có thể được thử nghiệm và phản hồi. Để phát hiện các vấn đề có thể xảy ra và thực hiện các chỉnh sửa cần thiết trước khi dành một lượng thời gian và tiền bạc đáng kể cho thành phẩm, tạo nguyên mẫu là một bước quan trọng trong quá trình thiết kế.

Khi nói đến thiết kế trực tuyến hoặc ứng dụng, nguyên mẫu là phiên bản tương tác của dự án cho phép người dùng xem thiết kế đang hoạt động. Để bắt chước chức năng của sản phẩm hoàn chỉnh, nguyên mẫu có thể có nhiều tương tác, trình kích hoạt và hoạt ảnh khác nhau.

2.2. Tại sao nên sử dụng Figma để tạo mẫu?

Figma cho phép các nhà thiết kế tạo và thử nghiệm các nguyên mẫu tương tác một cách nhanh chóng và dễ dàng mà không cần thêm phần mềm hoặc plugin. Sau đây là một số ưu điểm của việc sử dụng Figma để tạo mẫu:

Tương tác trơn tru với quá trình thiết kế
Giao diện dễ sử dụng để tạo hoạt ảnh và tương tác
Các tính năng hỗ trợ cộng tác để trao đổi và nhận phản hồi
Khả năng tạo và tái sử dụng các bộ phận để tạo mẫu nhanh hơn

2.3. Cách tạo nguyên mẫu trong Figma

Trong Figma, tạo một tệp mới hoặc mở tệp thiết kế đã có sẵn.
Để vào chế độ Nguyên mẫu, hãy sử dụng tab "Nguyên mẫu" nằm ở thanh bên phải.
Bấm vào khung trong file thiết kế để chọn khung bắt đầu của nguyên mẫu.
Bằng cách nhấp vào khung ban đầu và chọn trình kích hoạt cũng như hành động cho mỗi lần tương tác, bạn có thể thêm các tương tác vào nguyên mẫu.
Chọn loại và độ dài của hoạt ảnh để thêm vào tương tác.
Nhấp vào nút "Xem trước" trên thanh bên phải để xem bản xem trước của nguyên mẫu.
Thực hiện các điều chỉnh cần thiết đối với cài đặt của nguyên mẫu, chẳng hạn như chọn thiết bị và kiểu máy xem trước cũng như tùy chỉnh màu nền.
Phân phối nguyên mẫu cho người khác để nhận xét và hợp tác.

3. Kỹ thuật tạo mẫu nâng cao

3.1. Thêm tương tác

Khả năng kết hợp tính tương tác vào nguyên mẫu của bạn là một trong những tính năng chính của Figma. Bạn có thể thiết kế các phần tử tương tác với các tương tác phản ứng với thông tin đầu vào của người dùng. Nút, liên kết và các thành phần tương tác khác có thể được thêm vào các tương tác trong thiết kế của bạn.

Chỉ cần chọn thành phần mà bạn muốn thêm tương tác, sau đó nhấp vào tab "Prototype" nằm ở thanh bên phải. Sau đó, bạn có thể chọn trình kích hoạt tương tác, chẳng hạn như "Khi nhấp chuột", "Khi di chuột" hoặc "Khi kéo". Ngoài ra, bạn có thể chỉ định đích đến của tương tác, có thể là URL bên ngoài hoặc khung khác trong thiết kế của bạn.

3.2. Tạo các luồng phức tạp

Bạn có thể thiết kế các luồng người dùng phức tạp bằng Figma mô phỏng các tương tác trong thế giới thực. Để xây dựng một nguyên mẫu hoàn chỉnh hơn, bạn có thể thiết kế một số luồng được kết nối với nhau. Điều này hữu ích khi thử nghiệm các lộ trình và tình huống khác nhau của người dùng.

Một luồng phức tạp có thể được tạo bằng cách kết nối nhiều khung với nhau bằng tính năng "Tạo kết nối". Đối với mỗi liên kết, bạn cũng có thể điều chỉnh hướng và thời lượng của luồng. Kết quả là bạn sẽ có thể tạo ra trải nghiệm người dùng hấp dẫn và thực tế hơn.

3.3. Sử dụng hoạt ảnh thông minh

Bạn có thể tạo hoạt ảnh mượt và hoàn hảo giữa các khung hình trong Figma với sự trợ giúp của Smart Animate, một công cụ hoạt hình mạnh mẽ. Điều này giúp tạo ra nguyên mẫu quyến rũ và sống động hơn.

Chỉ cần chọn thành phần bạn muốn tạo hiệu ứng, sau đó tạo một bản sao của khung để sử dụng Smart Animate. Hoạt ảnh giữa hai khung hình sau đó sẽ được Figma tự động tạo khi bạn di chuyển phần tử đến vị trí mới.

3.4. Tạo lớp phủ

Với Figma, lớp phủ là một công cụ hữu ích cho phép bạn tạo các chế độ, cửa sổ bật lên và các tính năng tương tác khác. Lớp phủ có thể được kích hoạt bằng một nút hoặc liên kết và chúng có thể bao gồm bất kỳ loại nội dung nào.

Tất cả những gì bạn phải làm để tạo lớp phủ là tạo một khung mới và đặt "Hành vi tràn" thành "Lớp phủ". Sau đó, bạn có thể thêm bất kỳ nội dung nào bạn muốn vào lớp phủ, bao gồm văn bản, hình ảnh và biểu mẫu. Độ giãn và thời lượng của hoạt ảnh lớp phủ cũng có thể được điều chỉnh.

Với Figma, bạn có thể tạo ra các nguyên mẫu thực tế và hấp dẫn hơn bằng cách sử dụng các phương pháp tạo nguyên mẫu phức tạp này. Kết quả là bạn sẽ có thể giải thích các khái niệm thiết kế của mình cho các nhà phát triển, các bên liên quan và các thành viên khác trong nhóm một cách hiệu quả hơn.

4. Cách tạo nguyên mẫu trong Figma: Hợp tác và chia sẻ

4.1. Chia sẻ nguyên mẫu của bạn

Thật dễ dàng để chia sẻ nguyên mẫu của bạn trong Figma. Sau khi tạo nguyên mẫu của bạn, hãy nhấp vào nút "Chia sẻ" trên thanh công cụ để chia sẻ nó với người khác. Sau đó, bạn có thể quản lý những người có thể xem, nhận xét và thay đổi nguyên mẫu của bạn.

Ngoài ra, bạn có thể nhúng nguyên mẫu của mình vào công cụ đã chọn hoặc chia sẻ liên kết tới tệp Figma của bạn. Bằng cách này, bạn có thể nhận được thông tin đầu vào từ các thành viên trong nhóm và các bên liên quan mà không cần sử dụng một số công nghệ.

4.2. Thu thập phản hồi

Điều quan trọng là nhận được phản hồi về nguyên mẫu của bạn nếu bạn muốn cải tiến thiết kế. Bằng cách thực hiện các chỉnh sửa đối với nguyên mẫu của bạn, Figma giúp bạn dễ dàng nhận được ý kiến đóng góp từ các bên liên quan và các thành viên khác trong nhóm.

Chỉ cần nhấp vào phần nguyên mẫu mà bạn muốn nhận xét và nhập suy nghĩ của mình để để lại nhận xét. Ngoài ra, bạn có thể gắn thẻ các thành viên nhóm cụ thể bằng biểu tượng "@" để nhận phản hồi của họ về thiết kế của bạn.

4.3. Làm việc với nhà phát triển

Một bước quan trọng trong quá trình thiết kế là cộng tác với các nhà phát triển. Với Figma, bạn có thể dễ dàng cộng tác với các nhà phát triển bằng cách chia sẻ các tệp thiết kế và nguyên mẫu của mình.

Bạn có thể xuất thiết kế và nội dung của mình ở một số định dạng, chẳng hạn như CSS, iOS và Android, bằng cách sử dụng chức năng chuyển giao cho nhà phát triển của Figma. Điều này tạo điều kiện cho các nhà phát triển truy cập vào dữ liệu họ yêu cầu để xây dựng thiết kế của bạn.

Một khía cạnh khác của Figma tạo điều kiện thuận lợi cho việc làm việc với các nhà phát triển là các thành phần được liên kết. Bạn có thể tạo thành phần chính và liên kết nó với các thành phần khác trong thiết kế của mình bằng cách sử dụng các thành phần được liên kết. Điều này đảm bảo tính đồng nhất và tạo điều kiện cập nhật thiết kế đơn giản khi cần thiết.

Tóm lại, Figma là một công cụ thiết kế hiệu quả cho phép người dùng tạo ra các nguyên mẫu giao diện người dùng tương tác. Trước khi chi tiền cho sản phẩm cuối cùng, các nhà thiết kế có thể thử nghiệm và kiểm tra nhiều khái niệm, luồng người dùng và tương tác khác nhau thông qua nguyên mẫu Figma. Hy vọng rằng những chia sẻ của BAC sẽ giúp ích cho bạn. Đừng quên đón đọc các bài viết mới nhất được cập nhật tại BAC's Blog bạn nhé.

Nguồn tham khảo:
https://figmafy.com/

Nhu cầu đào tạo doanh nghiệp

BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.

CÁC KHOÁ HỌC BUSINESS ANALYST BACs.VN DÀNH CHO BẠN

Khoá học Online:

Khoá học Offline:

Tại Tp.HCM:

Tại Hà Nội:

Tham khảo lịch khai giảng TẤT CẢ các khóa học mới nhất

Ban biên tập nội dung - BAC

Click để đọc tiếp

Cách viết Prompt ChatGPT mang lại hiệu quả tối đa

Để có thể tận dụng tối đa sức mạnh từ các công cụ AI như ChatGPT, bạn cần học cách viết prompt. Bài viết này, BAC đã tổng hợp những cách viết Prompt ChatGPT hiệu quả mà ngay cả những người mới cũng có thể áp dụng, cùng tìm hiểu ngay nhé
8 Cách áp dụng API SaaS tăng doanh thu cho Business Analyst (Phần 2)

Một API trong mô hình SaaS có thể giúp gia tăng doanh thu bằng cách cung cấp cho khách hàng những tính năng bổ sung với mức giá hấp dẫn mà họ khó có thể từ chối. Trong bài viết này, BAC sẽ giúp các Business Analyst phân tích khái niệm “API được xem như là một sản phẩm độc lập” và chia sẻ một số ví dụ về các loại API trong SaaS có khả năng tạo ra doanh thu.
8 Cách áp dụng API SaaS tăng doanh thu cho Business Analyst (Phần 1)

Một API trong mô hình SaaS có thể giúp gia tăng doanh thu bằng cách cung cấp cho khách hàng những tính năng bổ sung với mức giá hấp dẫn mà họ khó có thể từ chối. Trong bài viết này, BAC sẽ giúp các Business Analyst phân tích khái niệm “API được xem như là một sản phẩm độc lập” và chia sẻ một số ví dụ về các loại API trong SaaS có khả năng tạo ra doanh thu.
Cách thúc đẩy khả năng giữ chân người dùng nhờ vào thiết kế UX SaaS

Thiết kế UX SaaS cho phép các Business Analysts tạo ra trải nghiệm người dùng hấp dẫn cho sản phẩm của mình. Nó giúp bạn giữ chân người dùng và chuyển đổi họ thành khách hàng trung thành. Nhờ đó, mà các BAers có thể giúp doanh nghiệp phát triển hơn trong từng dự án. Hãy cùng BAC tìm hiểu cách tiếp cận thiết kế UX SaaS một cách dễ dàng nhé!

Bình luận

Nguyễn Thị Mai Bình

Business Analyst

Với một người ngoại đạo như mình thì những chuyên đề về "kỹ thuật" của BA hết sức quan trọng. Ví dụ như sử dụng các diagram để mô hình hóa requirement, viết User Story/Use case, v...v..

Đến với khóa học Fundamental Business Analysis, mình đã được gặp thầy Lộc, một người người rất nhiệt tình và có tâm. Ngoài việc chia sẻ các kinh nghiệm thực tế trên lớp thì thầy còn dành thời gian ra để tư vấn, hỗ trợ, góp ý CV cho mình. Bên cạnh đó trung tâm và anh Phụng cũng hỗ trợ gửi CV, kết nối học viên tới mạng lưới các công ty đối tác chất lượng, điều này giúp học viên như mình tìm được công việc phù hợp nhất. Cảm ơn BAC.
Xem chi tiết +
Phạm Quế

Business Analyst

Khoá học Product Design của BAC đã cung cấp cho tôi nhiều kiến thức và nền tảng vô cùng hữu ích. Giảng viên giảng dạy rất nhiệt tình, truyền cho chúng tôi ngọn lửa đam mê và nhiệt huyết trong ngành. Đồng thời chia sẻ các kiến thức và kỹ năng cần thiết trong bài giảng một cách dễ hiểu hơn. Số lượng học viên không quá nhiều nên chất lượng giảng giạy vô cùng tốt. Giảng viên sửa bài tập 1-1 nên bài giảng sẽ chuyên sâu hơn.
Xem chi tiết +
Nguyễn Văn Long

Chuyên viên về chế độ kế toán & Giải pháp nghiệp vụ Tài chính kế toán trong ứng dụng CNTT - Tập đoàn Điện lực Việt Nam (EVN)

Tôi đã tham gia khóa Phân tích nghiệp vụ phần mềm cơ bản 3.0 tại BAC. Ở đây, tài liệu đào tạo cung cấp nhiều nội dung bổ ích và trình bày dễ hiểu. Giảng viên rất nhiệt tình, ngoài nội dung giảng dạy theo giáo trình còn chia sẻ nhiều kinh nghiệm thực tiễn, các câu hỏi của học viên đều được giải đáp ngay trên lớp và có minh họa từ các dự án trong thực tế. Sau tất cả, tôi cảm ơn BAC và Thầy giáo Thái Sơn.
Xem chi tiết +