Hướng dẫn figma cơ bản

Ngày nay, có rất nhiều nền tảng hay phần mềm hỗ trợ cho người dùng thiết kế website hoặc các nền tảng ứng dụng. Figma là nền tảng cho phép người sử dụng chỉnh sửa đồ hoạ, thiết kế giao diện cho các website hoặc ứng dụng. Vậy việc học Figma có khó khăn hay không? Hãy cùng TELOS tìm hiểu sâu về nền tảng Figma.

Bài viết liên quan:

• Tổng hợp 6 case study xịn sò từ khóa học Figma tại TELOS
• Thiết kế Fintech khó khăn? Hãy thử ngay 12 Figma UI Kit
• Figma – Công cụ “Prototype” và xây dựng app ấn tượng

Học Figma sẽ hỗ trợ người dùng thiết kế website và giao diện trên các nền tảng ứng dụng.

1. Tại sao nên sử dụng Figma?

1.1. Khả năng tương thích cao

Nói về tính tương thích cao thì Figma hoàn toàn gây ấn tượng bởi sở hữu khả năng sử dụng được trên các hệ điều hành có trình duyệt web như Macs, Linux, Windows hay Chromebooks. Chỉ cần hệ điều hành có trình duyệt web thì người dùng có thể mở, chỉnh sửa hay chia sẻ file Figma bất kỳ.

Một số ví dụ cho khả năng tương tích của Figma là designer sử dụng hệ điều hành Linux để thiết kế nhưng developer lại sử dụng Macs. Trong trường hợp đó, Figma là nền tảng giúp quá trình làm việc hai bên trở nên dễ dàng hơn, không cần phải qua bước trung gian hay thống nhất một hệ điều hành chung.

Chỉ với một đường link, Figma giúp giảm thiểu và hỗ trợ việc chuyển các file hình ảnh dễ dàng hơn giữa các team design, account và với khách hàng. Với khả năng tương thích cao như trên cũng đủ làm cho các designer tìm hiểu và học Figma nhằm phục vụ cho công việc thiết kế của mình.

Nền tảng Figma tương thích được với các hệ điều hành có trình duyệt web.

1.2. Mang tính cộng tác/ làm việc nhóm cao

Figma là một nền tảng sử dụng trên website nên việc hoạt động giữa mọi người trong team diễn ra hoàn toàn dễ dàng như Google Excel, Google Docs,… Tương tự như Google Docs, Figma cho phép các thành viên xem, chỉnh sửa hay chia sẻ file và sẽ hiện tên, avatar của thành viên truy cập vào link file Figma.

Một chức năng khá hay trong Figma chính là khi click vào avatar bất kì thành viên nào trên thanh công cụ, người dùng có thể thấy được thành viên đó đang làm đến vị trí nào. Tính năng này giúp ích cho designer leader theo dõi và giám sát được tiến độ làm việc, đưa ra các quyết định chỉnh sửa phù hợp cho dự án đang thực hiện. Những người dùng mới đều có thể dùng thành thạo Figma sau khi được hướng dẫn sử dụng Figma.

1.3. Tạo được nhiều layout trong 1 dự án

Một số nền tảng thiết kế khi người dùng muốn tạo thêm một layout mới với kích thước khác thì cần tạo thêm một dự án mới. Với Figma thì designer hoàn toàn có thể sáng tạo trên một file dự án Figma nhiều layout khác nhau với các kích thước tùy ý chỉnh sửa do được tích hợp thêm tính năng Artboard.

Trên một file Figma có thể bao gồm những layout có kích thước khác nhau.

1.4. Đa dạng file xuất và hình ảnh luôn rõ nét

Sau khi đã học Figma, người sử dụng sẽ cảm thấy nền tảng Figma tương tự phần mềm Illustrator. Chất lượng hình ảnh khi chỉnh sửa, thay đổi kích thước ảnh và khi xuất ảnh không bị giảm đi do được thiết kế dưới dạng Vector. Và designer có thể tùy ý lựa chọn dạng file lưu như PNG, SVG, JPG thậm chí là cả PDF.

1.5. Hỗ trợ lưu trữ đám mây cho người dùng

Có thể nhiều designer đã gặp trường hợp một dự án mình đang làm gần xong thì gặp sự cố tự thoát khỏi môi trường thiết kế hiện tại hay sập nguồn máy và khi bật lên thì những chỉnh sửa đều mất hết. Cảm giác thật sự khá khó chịu. Nhưng sau khi học Figma xong, bạn sẽ thấy hoàn toàn có thể khắc phục những trường hợp như thế.

Figma lưu các dự án của người dùng trên cloud nên việc mất mạng, hay hư hỏng máy,.. giúp hạn chế sự ảnh hưởng đến tiến độ thiết kế hay chỉnh sửa đồ họa trên Figma. Không những thế, bạn còn có thể tạo, chia thành nhiều page trong một file và sắp xếp file theo từng project theo nhu cầu dự án để dễ quản lý. Với người dùng đã học Figma thì không quá khó để sử dụng tính năng này.

Figma hỗ trợ chia file thành nhiều page và có thể quản lý các file theo từng project theo yêu cầu.

1.6. Tính năng feedback thuận tiện

Trong quá trình sử dụng Figma, các designer leader sẽ dùng tính năng feedback để góp ý cho các thành viên trong nhóm khi thực hiện thiết kế. Dù người dùng đang dùng Figma trên app hay chế độ prototyping, design thì đều có thể bình luận được. Và có thể theo dõi các bình luận qua Slack hay email.

Nếu bạn đã biết được thao tác trên nền tảng Figma cơ bản, bạn có thể tối ưu tính năng feedback này trong việc ghi chú những góp ý khi thảo luận và sửa file ngay trong cuộc họp. Bạn sẽ tiết kiệm được khá nhiều thời gian chờ đợi được gửi file ghi chú trong cuộc họp hay chờ cuộc họp diễn ra xong mới có thể chỉnh sửa.

1.7. Kho plugin phong phú

Những ngày đầu khi mới ra mắt, kho plugin của Figma chưa được đa dạng và phong phú như Sketch. Nhưng vào những năm 2019, Figma đã có bước đột phá khi trình làng kho plugin của riêng mình. Và điều làm cho Figma nổi bật hơn là khi sử dụng plugin ít xảy ra các lỗi hơn so với các nền tảng, ứng dụng khác.

Khi trải nghiệm sử dụng kho plugin của Figma, có rất nhiều người đã cảm thấy bất ngờ và đánh giá trải nghiệm sử dụng plugin trên Figma thật tuyệt vời. Bước tiến này khiến cho người dùng khó từ chối việc học Figma để được trải nghiệm những tính năng hấp dẫn trên nền tảng này.

Plugin của Figma tạo được ấn tượng tốt hơn bởi sự đa dạng cũng như ít gặp lỗi hơn so với các nền tảng, phần mềm khác.

1.8. File versioning

Chức năng cho phép người sử dụng có thể lưu trữ file designer bất kỳ lúc nào là chức năng file versioning được tích hợp trong Figma. Chức năng này giải quyết vấn đề tracking các version khi các thành viên designer trong team chỉnh sửa file.

Nhưng với người dùng miễn phí thì chức năng này đang bị hạn chế, chỉ có thể xem lại lịch sử chỉnh sửa file trong khoảng 30 ngày gần nhất. Tính năng này không yêu cầu người dùng phải học Figma trước khi sử dụng, do tính năng này đã được tích hợp mặc định trên nền tảng.

Nếu các designer cảm thấy tính năng này bị hạn chế, người dùng có thể tạo một trang riêng để chỉnh sửa file designer cũ. Khi muốn xem lại các version cũ, người sử dụng chỉ cần chuyển đổi các trang cũ và tất nhiên sẽ không tiện lợi bằng tính năng file versioning được tích hợp sẵn trong Figma.

1.9. Prototype tích hợp sẵn

Trước đây khi muốn chuyển file thiết kế đến các bộ phận liên quan thì cần đến các nền tảng, ứng dụng hỗ trợ prototype như Invision, Marvel hoặc xuất ra file hình sau đó mới có thể chuyển thiết kế đi. Sau khi đã học Figma thì việc sử dụng Prototype được tích hợp sẵn trên nền tảng trở nên dễ dàng hơn.

Các thành viên trong nhóm design có thể truy cập, xem và lấy các component có sẵn để tái sử dụng cho các dự án tương tự. Và có một lưu ý cho tính năng này là trên tất cả các file, component đã được chỉnh sửa sẽ tự động cập nhật khi có người thực hiện thay đổi.

Với tính năng Prototype, người dùng có thể tái sử dụng những component đã được thiết kế trước đó cho các dự án khác.

2. Thuận tiện khi sử dụng các phiên bản Figma

Figma có hai phiên bản là phiên bản phần mềm trên máy tính và phiên bản website. Tùy theo nhu cầu mà người dùng có thể sử dụng một trong hai phiên bản khi bắt đầu học Figma.

2.1. Bản phần mềm

Sau khi đã tải phần mềm về máy, thì người dùng tiến hàng tạo một tài khoản Figma cho mình và đăng nhập vào phần mềm. Tiếp theo phần mềm sẽ chuyển hướng người sử dụng đến giao diện các project, và bắt đầu sử dụng.Có tích hợp cho người dùng những phím tắt tiện lợi, dễ dàng thay đổi tên của hàng loạt các layer đơn giản, nhanh chóng.

Người dùng có thể dán ảnh, video trực tiếp vào shape. Xem trước thiết kế trên phần mềm điện thoại. Người dùng có thể tự tìm hiểu và học Figma qua việc trải nghiệm thực hiện các dự án đầu tiên trên Figma.

Bạn có thể tải bản phần mềm Figma tại đây: https://www.figma.com/downloads/

2.2. Bản web

Các tiện ích tương tự như trên phần mềm nhưng các designer không cần phải tốn thời gian và công sức tải về máy tính mà có thể thao tác trực tiếp trên website Figma. Sau khi truy cập vào website, người dùng đăng nhập vào tài khoản của mình và bắt đầu thiết kế các project.

Trên bản web, Figma không bị ảnh hưởng khi thay đổi kích thước ban đầu của trang web. Trong trường hợp designer đã biết cách dùng Figma thì tất cả các tính năng đều được thể hiện trên thanh công cụ, người dùng chỉ cần nhấp vào và sử dụng.

Bên cạnh đó, designer có thể đồng bộ thiết kế của mình trên web nhờ tính năng “Nudge” mặc định. Người dùng cũng có thể cùng một lúc chọn, chỉnh sửa, thay đổi các đối tượng cùng thuộc tính.

Tính năng “Nudge” mặc định giúp cho designer có thể đồng bộ các thiết kế của mình.

3. Khóa học Figma

Nếu bạn là designer muốn tìm hiểu về các khóa học Figma thì TELOS có gợi ý khóa học tham khảo cho bạn. “Khóa học thiết kế giao diện với Figma” dưới sự hướng dẫn của của giảng viên Lưu Trọng Nhân.

Với khóa học này, một số kiến thức nổi bật được giảng dạy là cách thiết kế giao diện UI/UX, tối ưu việc sử dụng Figma, các mẹo vặt và tư duy theo khối lập trình, cải thiện mối quan hệ kết hợp ăn ý giữa Designer – Developer để tạo ra những sản phẩm chất lượng.

Bạn có thể tham khảo khóa học Figma tại TELOS của giảng viên Lưu Trọng Nhân.

Qua bài viết trên, việc học Figma và sử dụng nền tảng này trong quá trình thiết kế website là một điều nên được cân nhắc. Figma với nhiều tính năng như hỗ trợ việc làm nhóm, chia sẻ file, chỉnh sửa, cùng với tính năng Prototype, kho Plugin và File versioning được tích hợp sẵn trên nền tảng sẽ giúp cải thiện thời gian và công sức cho các designer trong quá trình thiết kế.

Và TELOS đã cung cấp cho mọi người những thông tin về nền tảng Figma. Mong là những thông tin trên giúp ích cho các bạn nói chung và designer nói riêng đang tìm hiểu về Figma. Chúc bạn có một ngày tốt lành.