Figma là gì? Hướng dẫn cách sử dụng Figma chi tiết

Ra mắt vào năm 2015, Figma được biết đến như là công cụ thiết kế giao diện người dùng UI (Interface User) cho website và ứng dụng hàng đầu hiện nay.

Figma là gì? 

Figma là một công cụ prototype, biên tập/chỉnh sửa đồ họa vector dựa trên đám mây được sử dụng để thiết kế giao diện người dùng với khả năng cộng tác làm việc từ xa vượt trội.

Ngày càng nhiều doanh nghiệp lựa chọn sử dụng Figma vì sự tiện lợi. Trong bài viết này hãy cùng mình tìm hiểu những tính năng và cách sử dụng Figma.

✔ Cập nhật 15/9/2022: Adobe xác nhận chính thức, sẽ mua lại Figma với giá 20 tỷ đôla, hứa hẹn mở ra một kỷ nguyên hợp tác sáng tạo mới. Nguồn: Adobe.com

Có khá nhiều đánh giá về Figma với những ưu điểm tuyệt vời như: Figma có giao diện thiết kế trực quan, thân thiện với người dùng. Nếu bạn đã quen thuộc với Photoshop thì việc làm quen với Figma thật sự không mất nhiều thời gian, thậm chí bạn sẽ cảm thấy thao tác trên Figma đơn giản và dễ dùng hơn. Bạn có thể sử dụng Figma miễn phí, tuy nhiên, nếu muốn sử dụng đầy đủ tính năng của Figma, đặc biệt là tính năng cộng tác thiết kế bạn sẽ cần nâng cấp lên gói Figma Pro.

Những ưu điểm tuyệt vời khi sử dụng Figma

Khi các công ty, các Designer phải đưa ra quyết định họ nên lựa chọn công cụ thiết kế nào. Vì sao nên lựa chọn Figma? 

✅ Khi gửi file theo cách truyền thống, đôi khi file có lỗi nhưng ngay cả Designer và người nhận không phát hiện ra, dẫn đến những sai sót không đáng. Figma cho phép nhiều người dùng làm việc cùng một lúc trên 1 bản thiết kế. Figma có thể sử dụng dưới bất kỳ hệ điều hành và trình duyệt nào. Tất cả thành viên đều có thể truy cập vào file để xem trạng thái thiết kế hiện tại theo thời gian thực. 

✅ Mặc dù nhiều người làm việc trên cùng 1 file thiết kế. Tuy nhiên hiệu suất vẫn không thay đổi khi số lượng công cụ sử dụng và mức độ chỉnh sửa tăng lên. 

✅ Khi làm việc với khách hàng, nếu sử dụng Photoshop bạn phải xuất cả file cho khách hàng xem. Với Figma, bạn có thể xuất từng yếu tố trong file, cả file, hoặc xuất bản nháp để khách hàng xem và feedback nhanh hơn. Từ đó tăng tiến độ và năng suất làm việc của dự án. 

✅ Và còn rất nhiều tính năng khác.

• Xem thêm: Figma vs. Sketch vs. Adobe XD: Công cụ thiết kế nào tốt hơn?

Giao diện thiết kế Figma 

Figma có giao diện thân thiện với người dùng. Sau khi tạo tài khoản và đăng nhập, bạn sẽ thấy giao diện của Figma như sau:

• New design file: Tạo thiết kế mới.
• New FigJam file: FigJam được gọi là “bảng trắng” của Figma. Khi các Designer cùng làm việc trên 1 file thiết kế, họ cần một nơi để thảo luận ý tưởng và thống nhất quy trình, nên Figma đã bổ sung FigJam. 
• Import file: Tải file từ máy tính. 

Trong phần Explore FigJam templates > chọn See all để xem thêm nhiều mẫu template phù hợp khác. Trước khi bạn và đồng đội bắt tay vào việc thiết kế bất kỳ sản phẩm nào, bạn sẽ cần dùng đến FigJam. 

Biểu tượng cái chuông góc phía trên bên phải là phần Notifications, bạn dễ dàng theo dõi những chỉnh sửa của file thiết kế thông qua Notifications.

Bạn có thể sử dụng Figma trên trình duyệt Browser và ứng dụng Figma App. Tuy nhiên, sử dụng Figma trên trình duyệt sẽ thuận tiện hơn khá nhiều so với dùng trên App. 

Hướng dẫn cách sử dụng Figma (cơ bản)

Trước hết mình sẽ tạo thiết kế mới – “New design file” và sau đó sẽ minh họa các thao tác sử dụng cơ bản của Figma.

Công cụ Move, Pan và Zoom 

Sau khi chọn tạo thiết kế mới, Figma sẽ hiển thị giao diện như sau. 

Phần góc bên trái phía trên là nơi hiển thị các công cụ của Figma. Bạn sẽ click vào từng biểu tượng để lựa chọn công cụ bạn muốn. Ưu điểm của Figma chính là nếu bạn không nhớ công cụ đó nằm ở đâu, nhưng chỉ cần bạn nhớ tên công cụ, thì chắc chắn bạn sẽ tìm được nhờ gõ tên công cụ đó vào Quick actions. 

Sau khi click vào biểu tượng hình tam giác để vẽ 2 hình dạng bất kỳ. Mình sử dụng công cụ Move (phím tắt V) để di chuyển từng hình. Nếu muốn di chuyển cả 2 hình, mình sẽ sử dụng Hand tool (phím tắt H). 

Phần góc bên phải để bạn Zoom file theo ý thích. 

Công cụ Frame 

Vì Figma là ứng dụng để thiết kế giao diện UI nên sẽ có đầy đủ các loại Frame với sẵn kích thước để bạn thiết kế. Tuy nhiên phần Social Media thì Figma không cập nhật kích thước mới nhất, nên bạn cần kiểm tra kỹ lại kích thước và chỉnh sửa nếu cần nhé. 

Nếu muốn chỉnh sửa kích thước, bạn chỉ cần thay đổi W và H ở góc bên phải. 

Công cụ Groups, Lock và Hide Layers 

Từng layer trong Figma sẽ hiển thị tương tự như Photoshop. Bạn dễ dàng dùng chuột để di chuyển thứ tự các layer. Biểu tượng ổ khóa dùng để khóa layer, và biểu tượng con mắt để ẩn layer đó. 

Khi cần nhóm các layer lại với nhau, bạn click chọn những layer cần nhóm và chọn Ctrl + G. Nếu muốn bỏ nhóm các layer, bạn chọn Ctrl + Shift + G. 

Công cụ Opacity và Fill 

Lựa chọn mức Opacity trong phần Layer > Pass through. Ngoài tùy chọn Pass through thì Figma cũng có những tùy chọn hòa trộn khác (Blending Modes) tương tự như Photoshop. 

Figma cung cấp nhiều tính năng để bạn thiết kế sáng tạo hơn. Fill để đổ màu cho hình và bạn cũng có thể điều chỉnh mức Opacity của background/ hình đó. Để tạo được background dạng Gradient Color thì trong phần mũi tên mình tô vàng có nhiều lựa chọn cho bạn: Solid, Linear, Radial, Angular, Diamond, Image. Riêng Image dùng để chèn hình vào trong Shape đó. Hãy luyện tập thường xuyên để tạo được màu bạn yêu thích nha. 

Công cụ Rulers và Layout 

Trong ô tìm kiếm Quick actions… mình gõ Ruler thì lập tức hiển thị tùy chọn Show rulers. Sau đó mình chỉ việc nắm và kéo thước đặt vào thiết kế mà thôi. 

Khi thiết kế giao diện dành cho điện thoại, bạn sẽ cần rất nhiều Ruler để căn chỉnh vị trí các vật thể trong thiết kế. Bạn không thể dùng tay thủ công tạo từng Ruler được. Vì vậy mà chúng ta nên dùng Layout grid.

Sau khi chọn Frame thì trong phần Layout grid, mình sẽ thay đổi Size để có mức lưới phù hợp. Lưới bố cục không phụ thuộc vào lưới pixel. Điều này có nghĩa là Layout grid không phụ thuộc vào độ phân giải hoặc kích thước cụ thể. Bên cạnh đó, bạn chỉ có thể áp dụng lưới bố cục cho 1 khung. 

Công cụ History

Để xem lại lịch sử các phiên bản, trong phần Drafts/ Untitled, bạn chọn Show version history. Phần History của Figma hoạt động khá giống Drive, chỉ cần click vào là sẽ quay lại phiên bản cũ. 

Vẽ hình Shape 

Trên Menu, bạn sẽ lựa chọn hình bạn muốn vẽ. Nếu muốn vẽ hình vuông, hình tròn thì khi vẽ bạn chỉ cần nhấn và giữ phím Shift. 

Điểm hay của Figma chính là khi click vào Shape thì sẽ hiện ra chấm tròn ở các góc. Bạn dễ dàng thay đổi góc nhọn > góc tròn. Với hình tròn bạn có thể điều chỉnh lại góc như hình mẫu bên dưới. 

Ngoài ra bên góc phải, bạn cũng có thể điều chỉnh 3 thông số mình tô màu vàng để ra được hình bạn mong muốn. Stroke để tô viền bên trong hoặc bên ngoài cho Shape. Phần Effects bao gồm đổ bóng Shadow và làm mờ Blur. 

Công cụ Alignment và Distribution

Để căn chỉnh vị trí của các layer, bạn chỉ cần chọn các layer đó và chọn Alignment (phần tô màu đỏ). Nếu muốn điều chỉnh lại vị trí của các layer, bạn sẽ chọn Distribution trong phần ô tô màu vàng. Tidy up thường dùng để sắp xếp vị trí các biểu tượng trên điện thoại, canh chỉnh cả chiều ngang và chiều dọc. 

Chèn hình và chữ 

Để chèn hình ảnh vào trong thiết kế, bạn có thể kéo – thả trực tiếp file hình từ desktop vào file Figma hoặc chọn File > Place Image để chèn hình. 

Figma cung cấp đầy đủ tính năng ở menu bên tay phải để bạn chỉnh sửa chữ.

Xuất file 

Ưu điểm của Figma chính là bạn có thể export/download từng yếu tố riêng lẻ trong bản thiết kế. Ví dụ như mình đã tải về máy file hình chữ nhật có đuôi PNG. 

Hướng dẫn cách sử dụng Figma chi tiết

(Thông qua minh họa Thiết kế banner với Figma)

Sau khi các bạn đã quen với những công cụ và tính năng cơ bản của Figma mà mình vừa giới thiệu ở trên thì việc thiết kế banner sẽ trở nên thú vị hơn. Mình sẽ hướng dẫn các bạn thiết kế 1 banner đơn giản cho dịp Giáng Sinh nha. 

Đầu tiên, các bạn sẽ tạo Frame bằng cách chọn Frame > Social Media. Vì mình cần banner khổ dọc, kích thước 900x1200px nên trong phần W và H (phần tô vàng) mình đã điều chỉnh lại kích thước. 

Tiếp theo, mình sẽ tô màu background. Bạn lựa chọn màu bằng cách rê chuột đến khi chọn được màu ưng ý, nhập thông số màu, hoặc sử dụng cây hút màu (phần mình tô màu vàng). 

Để hút màu trên hình có sẵn thì bạn sẽ đặt hình ảnh vào trong trình thiết kế bằng cách chọn Menu Figma > File > Place Image… Sau đó click vào biểu tượng cây hút màu và rê chuột đến vị trí màu cần hút. Do mình tải về color palette cho dịp Giáng Sinh nên sẽ có sẵn bảng màu, bạn hoàn toàn có thể hút màu từ bất kỳ hình ảnh nào cũng đều được hết nha. 

Nếu cần điều chỉnh sắc độ thì bạn sẽ chọn Linear, sau đó chọn màu thích hợp ở từng phần mình tô đỏ. 

Mình vẽ tiếp hình chữ nhật trong Frame. Khi dùng chuột di chuyển hình chữ nhật thì Figma sẽ hiển thị ngay phần căn chỉnh bằng đường màu đỏ, để bạn căn hình chữ nhật đã cân đối với Frame hay chưa. 

Mình chọn tiếp Text. Bạn dễ dàng chỉnh sửa font chữ, size, căn chỉnh vị trí. Ngoài ra mình có thêm phần Stroke để chữ trông nổi bật hơn. 

Để thêm hình vào Frame thì mình cũng chọn Menu Figma > File > Place Image… 

Thanh menu phía trên có biểu tượng Crop (phần được tô vàng). Mình sẽ dùng Crop để cắt hình cho phù hợp với khung màu xanh. Nếu bạn muốn hình vừa khít vào hình chữ nhật màu xanh thì chỉ cần di chuyển hình vào khung là được. 

Cuối cùng mình sẽ thêm những phụ kiện Giáng Sinh khác từ Freepik và PNGtree để banner sống động hơn. Để di chuyển các layer lên phía trước hoặc lùi xuống phía sau, ngoài di chuyển thứ tự bên menu layer phía tay trái, bạn có thể click chuột phải chọn Bring to font hoặc Sent to back. 

Cuối cùng thì mình cũng đã hoàn thành banner Giáng Sinh và export với đuôi PNG rồi. Với sự sáng tạo và sử dụng thành thục các công cụ của Figma thì chắc chắn các bạn sẽ thiết kế banner đẹp hơn banner này nhiều nữa ^^ 

FigJam for iPad: dễ dàng phác thảo và chia sẻ ý tưởng

✅ Figma vừa mới ra mắt FigJam cho iPad ngày hôm qua 15/3, với đầy đủ các tính năng cộng tác nhóm theo thời gian thực, chỉnh sửa trực tiếp FigJam file trên iPad (trước đó phiên bản dành iOS chỉ có thể xem thiết kế mà thôi) hay cùng nhau “brainstorm” lên ý tưởng thiết kế ngay từ đầu.

Có thể hình dùng FigJam trên iPad giống như một “online whiteboard“.

Xem thêm: Top ứng dụng bảng trắng online & Đăng ký Whiteboard lifetime

Điểm mạnh của phiên bản FigJam dành cho iPad không chỉ giúp người dùng được trải nghiệm đầy đủ các tính năng như phiên bản Figma trên web (sử dụng trên máy tính) mà điều đặc biệt hữu ích hơn nữa ở FigJam for iPad là hỗ trợ đầy đủ Apple Pencil – với khả năng ghi chú trực tiếp lên thiết kế và Magic Keyboard.

Tính năng đồng bộ theo thời gian thực và cộng tác thiết kế vẫn là một trong các điểm mạnh của Figma mà ít có công cụ thiết kế UX ,UI nào có thể cạnh tranh được.

✅ Một số tính năng nổi bật khác của phiên bản FigJam trên iPad
– [ ] Design in low-fidelity
– [ ] Annotate designs
– [ ] Sketch flows and diagram
– [ ] Hand-write notes
– [ ] Jot down idease.

Nguồn: https://www.figma.com/blog/introducing-figjam-for-ipad/

Có nên đăng ký mua tài khoản Figma Pro?

Trong bài so sánh: “Figma vs. Sketch vs. Adobe XD: Công cụ thiết kế nào tốt hơn?” mình đã chia sẻ với các bạn rằng Figma là công cụ rất tốt khi bạn mới bắt đầu học thiết kế giao diện người dùng.

Và nếu bạn có một đội/nhóm thiết kế thì Figma có thể coi là công cụ phù hợp hơn cả vì khả năng cộng tác thiết kế đa nền tảng (Windows, Mac, Android, iOS,…) rất tuyệt vời.

Sau những tất cả những ưu điểm trên thì mình cho rằng, nâng cấp lên tài khoản Figma Pro là một sự lựa chọn đáng “đồng tiền bát gạo”.

Thông qua bài viết này, các bạn đã có thể đã làm quen và sử dụng những công cụ, tính năng trong Figma. Bên cạnh đó, thiết kế banner cho mạng xã hội bằng cách sử dụng Figma cũng đã trở nên dễ dàng hơn. Để ứng dụng Figma vào thiết kế website, thiết kế giao diện cho ứng dụng hoặc điện thoại cần nhiều sự luyện tập hơn nữa. Chúc các bạn thành công!

Chia sẻ tài khoản Figma Pro miễn phí

Cập nhật 10/2/2022: Hiện tại blog chiasepremium chia sẻ 03 slots (từ 10/2 – 17/2/2022) tài khoản Figma Pro miễn phí (team member | editor | không giới hạn), nếu bạn cần sử dụng hãy đăng yêu cầu kèm địa chỉ email của bạn trong Group Facebook ChiasePremiumdotcom nhé: https://www.facebook.com/groups/chiasepremiumdotcom

➤ Xem thêm: Dịch vụ tài khoản Figma Pro

N.L.Chi

Khóa học Figma thiết kế UI/UX

Dưới đây mình sẽ cập nhật và chia sẻ đăng ký miễn phí sử dụng các khóa học hay về Figma. Sau khi đăng ký bạn có thể truy cập sử dụng khóa học này vĩnh viễn. Thời gian miễn phí trong 24h và chỉ áp dụng cho 120 người đăng ký đầu tiên (theo quy định mới của Udemy), do đó, mình vừa đăng thông tin ở blog và đồng thời đăng trên Fan Page, Group, Telegram,… để các bạn tiện cập nhật và đăng ký sử dụng (Đây là các khóa học Figma rất hay và hoàn toàn miễn phí lifetime các bạn nhé).

• Cập nhật tháng 3/2023: Mình có tạo một post riêng, chỉ để chia sẻ link đăng ký các khóa học Figma thiết UX/UI. Link truy cập ngay dưới đây:

Có thể bạn quan tâm: Khóa học Figma thiết kế UI/UX – Đăng ký, download miễn phí

Chia sẻ khóa học Figma từ cơ bản đến nâng cao

Ultimate Guide to Product Design

Design Thinking Approach – Uncover the secrets of successful products for outstanding user experience. Design your unique product that users love. Source: udemy.com

2 hours on-demand video
4 articles
Free | Full lifetime access

Giới thiệu khóa học (lược dịch)

Thế giới cuối cùng cũng hiểu được vai trò thiết yếu của thiết kế. Sản phẩm trông đẹp hơn bao giờ hết, giao diện trực quan và các công ty đang thuê các nhà thiết kế với tỷ lệ ngày càng tăng. Tuy nhiên, vai trò của nhà thiết kế đã thay đổi trong vài năm qua. Nó không còn đủ để lặp lại và hiểu người dùng của bạn, thay vào đó trong thế giới ngày nay, các nhà thiết kế có thể làm cả hai – xác định vấn đề và xây dựng giải pháp, điều này sẽ tăng giá trị của họ lên ít nhất 10 lần cho bất kỳ công ty nào. Khi bạn có thể làm cả hai, bạn có thể làm những điều mà không ai khác có thể làm và bạn sẽ là tài sản độc nhất của công ty mình.

Có một sự thay đổi đang diễn ra trong các tổ chức lớn, một sự thay đổi đưa thiết kế đến gần hơn với trung tâm của doanh nghiệp. Nhưng sự thay đổi không phải là về thẩm mỹ. Đó là về việc áp dụng các nguyên tắc thiết kế để có trải nghiệm người dùng tốt hơn. Cách tiếp cận mới này phần lớn là một phản ứng đối với sự phức tạp ngày càng tăng của công nghệ hiện đại và kinh doanh hiện đại.  

Hầu hết mọi người không nghĩ về các tương tác hàng ngày được thiết kế kém như thế nào cho đến khi họ học được các nguyên tắc của thiết kế tốt và trải nghiệm người dùng, nhiều nguyên tắc trong số đó không trực quan. Bạn không cần phải sinh ra đã nghĩ về những thứ này để trở thành một nhà thiết kế thành công, đó là một kỹ năng có thể được phát triển giống như bất kỳ thứ gì khác. Niềm đam mê thường đi sau kiến ​​thức và chuyên môn.   

Trong khóa học này, tôi đã giải thích toàn bộ quy trình thiết kế mà khi được tích hợp vào sản phẩm của bạn có thể tạo ra trải nghiệm người dùng tuyệt vời. Bạn cũng sẽ học cách tiếp cận vấn đề một cách có hệ thống. Làm việc theo chuỗi là giai đoạn quan trọng nhất của quá trình thiết kế. Khả năng thử nghiệm, đánh giá cao và học hỏi từ những sai lầm, và xây dựng dựa trên kinh nghiệm đạt được là dấu hiệu của một cá nhân thực sự thành công và sáng tạo, bất kể lĩnh vực nào. Source: udemy.com 

Khóa học này dành cho ai:

• Khóa học này dành cho các Doanh nhân, Chủ doanh nghiệp và Nhà quản lý, những người sẵn sàng làm việc để tạo ra một sản phẩm yêu thích của khách hàng
• Nếu bạn đang tìm kiếm một lối đi tắt, khóa học này KHÔNG dành cho bạn
• Nếu bạn không sẵn sàng làm việc không ngừng để có kết quả mong muốn, khóa học này KHÔNG dành cho bạn

→ Link đăng ký miễn phí vĩnh viễn, cập nhật ngày 04/9/2022 (áp dụng cho 300 slot đăng ký đầu tiên) mời bạn xem ở link sau, (nếu bạn cần hãy nhanh tay đăng ký nhé trước ưu đãi miễn phí này hết hạn).

https://www.udemy.com/course/design-engaging-products-using-design-thinking/?couponCode=SEP2022FREE1

Figma Design Course 2022 Start to Finish

Link đăng ký vĩnh viễn (for 150 enrolls), cập nhật 29/10/2022:

https://www.udemy.com/course/figma-practical-design/?couponCode=FIGMACONTEST

Figma Mega Course Complete Web App UI/UX

In this course you will learn how to design web app UI/UX using Figma.Prototyping with figma and animation. UI/UX Design. Source: udemy.com

• “You will design 3 real world web app UI/UX project
• Figma UI/UX Design
• How to design a complete web app using figma
• Prototyping with animation in Figma
• Different sort of tools and uses of those tools in Figma
• Learn to use the best design technique
• Learn to use plugin in Figma” (Source: udemy.com)

Link đăng ký vĩnh viễn (150 enrolls):

https://www.udemy.com/course/figma-uiux-design-a-complete-web-app-project-base/?couponCode=F2388E3B059293966B61

Figma UI/UX Projects course

What you’ll learn

Understand UIUX fundamentals
Design a News App UI
Design mobile UIs of a contact page
Apply acquired knowledge to various UI’s. source: udemy.com

“User interface design(UI) and user experience design(UX) is a very crucial parts of determining the final output of software, applications, or process. User interface design and user experience design(UI/UX) has lots of benefits since they have a greater impact on influencing how users might use or uninstall an app or the retention rate of an app or software and the like. Welcome to this course future designers, in this course, we will be learning to design Interfaces using Figma as the primary design tool. You’ll be introduced to some useful resources/ links to help you thrive in an ever-changing world. Figma makes it fun and easier to get your designs up to speed with positive outcomes especially when you use a creative approach to doing what you love doing best. In this lesson, you’ll learn to use shapes(components) and tools to create stunning user interfaces. Some fundamental design principles would be taught and demonstrated in the course. The main course projects includes several steps to learning to build or design a contact app user interface. The course is for anybody who would like to get started with User interface design. This course is in collaboration with Jacqueline Asare Dartey a UI/UX expert in using Figma and Adobe XD”. source: udemy.com

Link đăng ký miễn phí vĩnh viễn (150 enrolls today): https://www.udemy.com/course/figma-uiux-projects/?couponCode=UXUIFORANYBODY

The Complete Mobile App Design Course – UI/UX

Create E-commerce Mobile Application from A to Z. Source: udemy.com

Khóa học này có cách tiếp cận vừa học vừa làm . Sẽ không có nhiều lý thuyết, tất cả chỉ hướng dẫn bạn cách thiết kế một sản phẩm di động trong thế giới thực và cho bạn thấy toàn bộ tiềm năng của Adobe XD.

Khi kết thúc khóa học, bạn sẽ có một bức tranh rất rõ ràng về cách Adobe XD hoạt động và bạn sẽ có thể áp dụng các kỹ thuật thiết kế, mẹo năng suất và tất cả các kỹ năng bạn đã học được vào các dự án thiết kế trong tương lai của mình.

Khóa học có phần hướng dẫn thực hành giúp bạn từng bước thực hiện các quy trình làm việc của một nhà thiết kế ứng dụng chuyên nghiệp. Từ sơ đồ luồng người dùng đến wireframing đến mô hình và nguyên mẫu. source: udemy.com 

Link đăng ký miễn phí vĩnh viễn, dành cho 120 người đăng ký đầu tiên trong hôm nay 06/3/2023 (120 enrolls today): https://www.udemy.com/course/the-complete-mobile-app-design-course-uiux/?couponCode=F8449D1DB7E48529B295

➤ Xem thêm: Cách tạo tài khoản Udemy có hàng nghìn khóa học miễn phí