Cách Sử Dụng Figma

  -  

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) đến website và ứng dụng. Ngày càng các doanh nghiệp lựa chọn áp dụng Figma vày sự tiện thể lợi, hãy thuộc mình mày mò những kỹ năng và cách thực hiện cơ bản của Figma nhé. 

Figma là gì? Những ưu thế tuyệt vời khi áp dụng Figma

*
Figma là công cụ xây cất UI/UX số 1 hiện nay.

Bạn đang xem: Cách sử dụng figma

Figma là 1 trong những công thay prototype, biên tập/chỉnh sửa bối cảnh vector dựa vào đám mây được thực hiện để kiến tạo giao diện người tiêu dùng với khả năng cộng tác thao tác từ xa thừa trội.

Figma bao gồm giao diện xây dựng trực quan, thân thiện với fan dùng. Nếu khách hàng đã thân thuộc với Photoshop thì việc làm quen với Figma thiệ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ễ cần sử dụng hơn. 

Những ưu điểm tuyệt vời khi thực hiện Figma

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

*
Ví dụ cho thấy thêm Figma giúp giảm đáng kể bài toán sử dụng nhiều phần mềm chuyên sử dụng và đơn giản quy trình thiết kế.

✅ Khi gởi file theo cách truyền thống, đôi khi file gồm lỗi nhưng trong cả Designer và fan nhận không phát hiện tại ra, dẫn đến các sai sót không đáng. Figma chất nhận được nhiều fan dùng thao tác làm việc cùng một thời điểm trên 1 bản thiết kế. Figma có thể sử dụng dưới ngẫu nhiên hệ quản lý và điều hành và trình để ý nào. Tất cả thành viên đều hoàn toàn có thể truy cập vào file giúp thấy trạng thái thiết kế hiện trên theo thời hạn thực. 

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

✅ Khi thao tác với khách hàng hàng, nếu thực hiện Photoshop các bạn phải xuất cả tệp tin cho người tiêu dùng xem. Với Figma, bạn cũng có thể xuất từng nguyên tố trong file, cả file, hoặc xuất phiên bản nháp để người sử dụng xem và feedback nhanh hơn. Từ kia tăng quá trình và năng suất thao tác của dự án. 

✅ và còn không ít tính năng khác.

Giao diện kiến thiết Figma | review

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

New kiến thiết file: Tạo kiến tạo mới.New FigJam file: FigJam được điện thoại tư vấn là “bảng trắng” của Figma. Khi các Designer cùng thao tác làm việc trên 1 tệp tin thiết kế, họ yêu cầu một nơi để đàm luận ý tưởng và thống độc nhất quy trình, bắt buộc Figma đã bổ sung cập nhật FigJam. Import file: cài đặt file từ trang bị tính. 
*
Giao diện bạn sẽ gặp khi ban đầu sử dụng Figma
*
FigJam

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

Bạn hoàn toàn có thể sử dụng Figma bên trên trình trông nom Browser và áp dụng Figma App. Tuy nhiên, áp dụng Figma trên trình săn sóc sẽ thuận tiện hơn không ít so với cần sử dụng trên App. 

*
Figma downloads

Hướng dẫn cách thực hiện Figma (cơ bản)

Trước không còn mình đang tạo kiến thiết mới – “New thiết kế file” và tiếp đến sẽ minh họa các thao tác sử dụng cơ phiên bản của Figma.

Công nạm Move, Pan và Zoom 

Sau khi chọn tạo xây dựng mới, Figma vẫn hiển thị hình ảnh như sau. 

*
Tạo xây dựng mới – “New kiến thiết file” trên Figma

Phần góc mặt trái phía bên trên là chỗ hiển thị những công gắng của Figma. Các bạn sẽ click vào từng hình tượng để gạn lọc công cụ các bạn muốn. Ưu điểm của Figma đó là nếu chúng ta không nhớ pháp luật đó nằm ở đâu, nhưng chỉ việc bạn nhớ tên công cụ, thì kiên cố chắn bạn sẽ tìm được nhờ vào gõ tên luật đó vào Quick actions. 

*
Quick actions

Sau lúc click vào biểu tượng hình tam giác nhằm 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 như muốn dịch chuyển cả 2 hình, mình sẽ áp dụng Hand tool (phím tắt H). 

*
Hand tool

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

*
Điều chỉnh Zoom – Figma

Công cầm Frame 

Vì Figma là vận dụng để thi công giao diện UI buộc phải sẽ có khá đầy đủ các các loại Frame cùng với sẵn size để chúng ta thiết kế. Tuy nhiên phần Social media thì Figma không update kích thước bắt đầu nhất, nên bạn cần kiểm tra kỹ lại form size và sửa đổi nếu phải nhé. 

*
Công cố Frame bên trên Figma

Nếu muốn chỉnh sửa kích thước, các bạn chỉ cần biến hóa W cùng H ở góc cạnh bên phải. 

*
Cách thực hiện Công núm Frame bên trên Figma

Công nạm Groups, Lock với Hide Layers 

Từng layer trong Figma đã hiển thị tương tự như Photoshop. Bạn tiện lợi dùng loài chuột để dịch 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 đó. 

*
Cách sử dụng những Công nỗ lực Groups, Lock cùng Hide Layers trên Figma

Khi buộc phải nhóm các layer lại cùng với nhau, các bạn click chọn đa số layer đề nghị nhóm và chọn Ctrl + G. Nếu muốn bỏ nhóm các layer, chúng ta chọn Ctrl + Shift + G. 

Công rứa Opacity cùng Fill 

Lựa lựa chọn mức Opacity trong phần Layer > Pass through. Xung quanh 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ư như Photoshop. 

*
Cách thực hiện Công nỗ lực Opacity với Fill bên trên Figma

Figma hỗ trợ nhiều kỹ năng để bạn xây dựng sáng tạo thành hơn. Fill nhằm đổ màu mang đến hình và bạn cũng có thể điều chỉnh nấc Opacity của background/ hình đó. Để tạo được background dạng Gradient màu sắc thì trong phần mũi tên mình tô vàng có không ít lựa chọn đến bạn: Solid, Linear, Radial, Angular, Diamond, Image. Riêng biệt Image dùng để chèn hình vào trong Shape đó. Hãy luyện tập liên tiếp để tạo nên màu bạn mến mộ nha. 

*
Figma hỗ trợ nhiều kỹ năng để bạn kiến tạo sáng tạo nên hơn

Công cố kỉnh Rulers cùng Layout 

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

*
Công vắt Rulers với Layout

Khi xây đắp giao diện giành riêng cho điện thoại, bạn sẽ cần không hề ít Ruler để chỉnh sửa vị trí các vật thể trong thiết kế. Chúng ta không thể sử dụng tay bằng tay tạo từng Ruler được. Vì vậy mà họ nên cần sử dụng Layout grid.

*
Layout grid

Sau khi chọn Frame thì vào phần Layout grid, bản thân sẽ biến đổi Size để có mức lưới phù hợp. Lưới bố cục tổng quan 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 size cụ thể. Lân cận đó, bạn chỉ hoàn toàn có thể áp dụng lưới tía cục cho một khung. 

*
Layout Grid dùng những trong xây đắp giao diện.

Công cầm cố History

Để xem lại lịch sử vẻ vang các phiên bản, trong phần Drafts/ Untitled, chúng ta chọn Show version history. Phần History của Figma vận động khá kiểu như Drive, chỉ cần click vào là sẽ quay lại phiên bản cũ. 

*
Công cầm History trên Figma

Vẽ hình Shape 

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

*
Shape Tools

Điểm tốt của Figma đó là khi click vào Shape thì sẽ hiển thị chấm tròn ở những góc. Bạn dễ dàng biến hóa 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 mặt dưới. 

*
Vẽ Vectơ vẽ Shape
*
Cách sử dụng công nắm Shape

Ngoài ra bên góc phải, chúng ta có thể điều chỉnh 3 thông số kỹ thuật mình tô màu quà để ra được hình bạn ước ao muốn. Stroke nhằm tô viền phía bên trong hoặc bên ngoài cho Shape. Phần Effects bao hàm đổ bóng Shadow và làm cho mờ Blur. 

*
Cách sử dụng công cầm cố Shape trên Figma

Công núm Alignment với Distribution

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

*
Công núm Alignment và Distribution

Chèn hình cùng chữ 

Để chèn hình hình ảnh vào vào thiết kế, chúng ta có thể kéo – thả trực tiếp tệp tin hình trường đoản cú desktop vào file Figma hoặc lựa chọn File > Place Image để chèn hình. 

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

*
Chèn hình và chữ

Xuất file 

Ưu điểm của Figma bao gồm là chúng ta cũng có thể export/download từng yếu tố trơ thổ địa trong bạn dạng thiết kế. ví như mình đã download về thứ file hình chữ nhật có đuôi PNG. 

*
Export images cùng PDFs

Minh họa kiến tạo banner với Figma | hướng dẫn cách thực hiện Figma đưa ra tiết

Sau khi chúng ta đã quen thuộc với những phép tắc và chức năng cơ phiên bản của Figma cơ mà mình vừa giới thiệu ở bên trên thì việc kiến tạo banner sẽ trở yêu cầu thú vị hơn. Mình đang hướng dẫn các bạn thiết kế 1 banner dễ dàng cho cơ hội Giáng Sinh nha. 

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

*
Minh họa kiến tạo banner với Figma

Tiếp theo, mình đang tô màu sắc background. Các bạn lựa lựa chọn màu bằng cách rê chuột cho đến lúc chọn làm nên màu ưng ý, nhập thông số kỹ thuật màu, hoặc áp dụng cây hút màu sắc (phần bản thân tô color vàng). 

Để hút color trên hình gồm sẵn thì bạn sẽ đặt hình ảnh vào trong trình thiết kế bằng cách chọn thực đơn Figma > file > Place Image… tiếp đến click vào biểu tượng cây hút màu và rê chuột đến vị trí màu buộc phải hút. Do mình download về màu sắc palette đến dịp noel nên sẽ sở hữu được sẵn bảng màu, bạn hoàn toàn hoàn toàn có thể hút màu từ ngẫu nhiên hình ảnh nào cũng hầu như được hết nha. 

*
Hướng dẫn cách thực hiện Figma cụ thể (tiếp theo)

Nếu cần điều chỉnh sắc độ thì bạn sẽ chọn Linear, kế tiếp chọn màu tương thích ở từng phần bản thân tô đỏ. 

*
Hướng dẫn cách sử dụng Figma cụ thể (tiếp theo)

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

*
Hướng dẫn cách thực hiện Figma cụ thể (tiếp theo)

Mình chọn tiếp Text. Bạn thuận tiện chỉnh sửa font chữ, size, căn chỉnh vị trí. Trong khi mình tất cả thêm phần Stroke nhằm chữ trông nổi bật hơn. 

*
Hướng dẫn cách sử dụng Figma để xây cất banner (tiếp theo)

Để thêm hình vào Frame thì tôi cũng chọn thực đơn Figma > tệp tin > Place Image… 

*
thêm hình vào Frame

Thanh menu phía bên trên có hình tượng Crop (phần được đánh vàng). Bản thân sẽ dùng Crop để cắt hình cho cân xứng với form màu xanh. Nếu bạn có nhu cầu hình vừa vặn vào hình chữ nhật màu xanh thì chỉ cần di đưa hình vào form là được. 

Cuối thuộc mình đang thêm phần đa phụ kiện lễ giáng sinh khác tự Freepik với PNGtree nhằm 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 dưới sau, ngoài dịch rời thứ tự mặt menu layer phía tay trái, chúng ta có thể click chuột phải chọn Bring to font hoặc Sent khổng lồ back. 

*
Hướng dẫn cách sử dụng Figma cụ thể (tiếp theo)

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

*
Hướng dẫn cách sử dụng Figma cụ thể (tiếp theo và hết)

FigJam for iPad: tiện lợi phác thảo và share ý tưởng

✅ Figma vừa mới giới thiệu FigJam cho iPad ngày ngày qua 15/3, với khá đầy đủ các hào kiệt cộng tác nhóm theo thời hạn thực, sửa đổi trực tiếp FigJam tệp tin trên ipad (trước kia phiên bản dành tiện ích ios chỉ hoàn toàn có thể xem thi công mà thôi) hay cùng nhau “brainstorm” lên ý tưởng xây dựng ngay từ bỏ đầu.

Xem thêm: 2 Cách Nấu Chè Hạt Sen Thơm Ngon Đơn Giản Tại Nhà, Cách Nấu Chè Hạt Sen Đơn Giản

Có thể hình cần sử dụng FigJam trên iPad hệt như một “online whiteboard“.

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

*
FigJam for iPad

Tính năng đồng hóa theo thời gian thực và cùng tác xây cất vẫn là 1 trong các điểm mạnh của Figma nhưng mà ít có công cụ thi công UX ,UI nào gồm thể tuyên chiến đối đầu được.

✅ một trong những tính năng trông rất nổi bật khác của phiên phiên bản FigJam trên iPad– < > kiến thiết in low-fidelity– < > Annotate designs– < > Sketch flows & diagram– < > Hand-write notes– < > Jot down idease.

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ụ xây dựng nào xuất sắc hơn?” bản thân đã chia sẻ với các bạn rằng Figma là công cụ rất tốt khi chúng ta mới bắt đầu học xây đắp giao diện bạn dùng.

Và nếu khách hàng có một đội/nhóm thiết kế thì Figma hoàn toàn có thể coi là công cụ cân xứng hơn cả vì kĩ năng cộng tác kiến tạo đa căn cơ (Windows, Mac, Android, iOS,…) siêu tuyệt vời.

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

*
Bạn hoàn toàn có thể nâng cấp, đk tài khoản Figma Pro khá dễ dàng (với một mức phí không thực sự đắt)

Thông qua nội dung bài viết này, các bạn đã có thể đã làm cho quen và áp dụng những công cụ, tuấn kiệt trong Figma. Bên cạnh đó, xây cất banner đến mạng xã hội bằng phương pháp sử dụng Figma cũng đã trở nên dễ dàng hơn. Để ứng dụng Figma vào xây cất website, xây cất giao diện cho ứng dụng hoặc điện thoại cảm ứng thông minh 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ẻ thông tin tài khoản Figma Pro miễn phí

(*Ngoài ra, mình có cung ứng đăng ký Figma Pro với tầm phí ưu tiên khá rẻ, gói đăng thông tin tài khoản Figma Pro 1 năm, tài khoản riêng bạn sử dụng, hoàn toàn có thể thêm nhiều thành viên vào nhóm, nếu như khách hàng cần áp dụng hãy contact với mình qua fanpage facebook sucmanhngoibut.com.vn nhé).

Xem thêm: Hướng Dẫn Cách Thu Nhỏ Màn Hình Khi Chơi Đế Chế Và Ngược Lại

N.L.Chi

Chia sẻ khóa học thiết kế UI/UX với Figma

Dưới phía trên mình sẽ cập nhật và share đăng cam kết miễn mức giá sử dụng các khóa học giỏi về Figma. Sau khoản thời gian đăng ký chúng ta có thể truy cập sử dụng khóa học này vĩnh viễn. Thời hạn miễn phí trong 24h và chỉ áp dụng cho 1000 tín đồ đăng ký thứ nhất (theo quy định bắt đầu của Udemy), bởi vì đó, mình vừa đăng thông tin ở blog và đồng thời đăng trên tín đồ 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 giá tiền lifetime chúng ta nhé).

“UI/UX design With Figma: 5+ Real World Projects – Become a Designer in 2022! Learn how khổng lồ use Figma to design beautiful mobile & web apps Learn-by-doing approach” (Source:Udemy.com)