FIGMA LÀ GÌ

     

Ra mắt vào năm 2015, Figma được nghe biết như là công cụ xây đắp giao diện người tiêu dùng UI (Interface User) đến website với ứng dụng. Ngày càng các doanh nghiệp lựa chọn áp dụng Figma vày sự một thể lợi, hãy cùng mình khám phá những hào kiệt và cách sử dụng cơ bản của Figma nhé. 


Nội dung bài viết:

Figma là gì? Những ưu điểm tuyệt vời khi áp dụng FigmaHướng dẫn cách sử dụng Figma (cơ bản)Chia sẻ khóa đào tạo và huấn luyện Figma xây cất UI/UX miễn phí

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

*
Figma là công cụ xây dựng UI/UX hàng đầu hiện nay.

Bạn đang xem: Figma là gì

Figma là một trong những công cụ prototype, biên tập/chỉnh sửa giao diện vector dựa vào đám mây được sử dụng để xây đắp giao diện người dùng với tài năng cộng tác làm việc từ xa thừa trội.

Figma tất cả giao diện kiến thiết trực quan, thân thiện với tín đồ dùng. Nếu bạn đã không còn xa lạ 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í các bạn sẽ cảm thấy làm việc trên Figma đơn giản và dễ dùng hơn. 

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

Khi những công ty, các Designer bắt buộc đưa ra đưa ra quyết định họ yêu cầu lựa chọn công cụ xây đắp nào. Bởi vì sao yêu cầu lựa lựa chọn Figma? 

*
Ví dụ cho biết Figma giúp bớt đáng kể việc sử dụng đa số mềm chuyên sử dụng và dễ dàng và đơn giản quy trình thiết kế.

✅ Khi gởi file theo phong cách truyền thống, nhiều khi file bao gồm lỗi nhưng trong cả Designer và fan nhận ko phát hiện ra, dẫn tới những sai sót ko đáng. Figma cho phép nhiều bạn dùng thao tác làm việc cùng một lúc trên 1 phiên bản thiết kế. Figma rất có thể sử dụng dưới ngẫu nhiên hệ quản lý và trình chú tâm 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 vậy nhiều người thao tác trên cùng 1 file thiết kế. Tuy nhiên hiệu suất vẫn không thay đổi khi con số công cụ thực hiện và nấc độ chỉnh sửa tăng lên. 

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

✅ và còn tương đối nhiều tính năng khác.

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

Figma tất cả giao diện gần gũi với tín đồ 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ọa của Figma như sau:

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

Biểu tượng chiếc chuông góc bên trên bên buộc phải là phần Notifications, bạn dễ dàng theo dõi những sửa đổi của file xây cất thông qua Notifications.

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

*
Figma downloads

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

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

Công cố gắng Move, Pan với Zoom 

Sau khi lựa chọn tạo xây cất mới, Figma vẫn hiển thị giao diện như sau. 

*
Tạo xây cất mới – “New kiến thiết file” bên trên Figma

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

*
Quick actions

Sau lúc click vào biểu tượng hình tam giác để vẽ 2 bề ngoài bất kỳ. Mình sử dụng công vắt Move (phím tắt V) để dịch chuyển từng hình. Ví như muốn dịch rời cả 2 hình, mình sẽ sử dụng Hand tool (phím tắt H). 

*
Hand tool

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

*
Điều chỉnh Zoom – Figma

Công thế Frame 

Vì Figma là áp dụng để xây cất giao diện UI đề nghị sẽ có không hề thiếu các nhiều loại Frame cùng với sẵn kích cỡ để bạn thiết kế. Tuy nhiên phần Social truyền thông thì Figma không cập nhật kích thước bắt đầu nhất, nên bạn phải kiểm tra kỹ lại kích thước và chỉnh sửa nếu bắt buộc nhé. 

*
Công nỗ lực Frame trên Figma

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

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

Công ráng Groups, Lock cùng Hide Layers 

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

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

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

Công chũm Opacity với Fill 

Lựa lựa chọn mức Opacity vào phần Layer > Pass through. Quanh đó tùy chọn Pass through thì Figma cũng đều có những tùy lựa chọn hòa trộn khác (Blending Modes) giống như như Photoshop. 

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

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

*
Figma cung ứng nhiều kỹ năng để bạn xây dựng sáng tạo hơn

Công cố Rulers với Layout 

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

*
Công cố Rulers và Layout

Khi kiến thiết giao diện giành riêng 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ể vào thiết kế. Các bạn không thể dùng tay bằng tay tạo từng Ruler được. Bởi vậy mà họ nên sử dụng Layout grid.

*
Layout grid

Sau khi chọn Frame thì trong phần Layout grid, mình sẽ chuyển đổi Size để sở hữu 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 vào độ sắc nét hoặc kích cỡ cụ thể. Cạnh bên đó, các bạn chỉ rất có thể áp dụng lưới ba cục cho một khung. 

*
Layout Grid dùng nhiều trong xây dựng giao diện.

Công thay History

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

*
Công thế History bên trên Figma

Vẽ hình Shape 

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

*
Shape Tools

Điểm tốt của Figma chính là khi click vào Shape thì sẽ hiện ra chấm tròn ở những góc. Bạn dễ dàng đổi khác góc nhọn > góc tròn. Với hình tròn bạn cũng 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 áp dụng công nuố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 hy vọng muốn. Stroke nhằm tô viền bên trong hoặc bên phía ngoài cho Shape. Phần Effects bao gồm đổ láng Shadow và làm cho mờ Blur. 

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

Công cầm cố Alignment cùng Distribution

Để chỉnh sửa 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 sắc đỏ). Nếu còn muốn điều chỉnh lại vị trí của các layer, các bạn sẽ chọn Distribution vào phần xe hơi 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 chỉnh cả chiều ngang cùng chiều dọc. 

*
Công cố gắng Alignment với Distribution

Chèn hình và chữ 

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

Figma hỗ trợ đầy đủ khả năng ở menu bên tay phải đặt bạn sửa đổi chữ.

*
Chèn hình với chữ

Xuất file 

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

*
Export images với PDFs

Minh họa xây đắp banner cùng với Figma | chỉ dẫn cách thực hiện Figma bỏ ra tiết

Sau khi các bạn đã thân quen với những biện pháp và tài năng cơ bạn dạng của Figma mà lại mình vừa trình làng ở bên trên thì việc xây dựng banner vẫn trở bắt buộc thú vị hơn. Mình đã hướng dẫn chúng ta 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 cách chọn Frame > Social Media. Do mình nên banner khổ dọc, kích thước 900x1200px cần trong phần W cùng H (phần sơn vàng) mình đã kiểm soát và điều chỉnh lại kích thước. 

*
Minh họa thi công banner cùng với Figma

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

Để hút màu trên hình bao gồm sẵn thì các bạn sẽ đặt hình hình ảnh vào trong trình thiết kế bằng cách chọn menu Figma > tệp tin > Place Image… tiếp đến click vào biểu tượng cây hút màu với rê chuột cho vị trí màu phải hút. Vì chưng mình cài đặt về color palette đến dịp lễ giáng sinh nên sẽ sở hữu được sẵn bảng màu, bạ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 không còn nha. 

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

Nếu cần điều chỉnh sắc độ thì các 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 áp dụng Figma cụ thể (tiếp theo)

Mình vẽ tiếp hình chữ nhật vào Frame. Khi sử dụng chuột dịch rời hình chữ nhật thì Figma sẽ hiển thị ngay phần căn chỉnh bằng đường màu đỏ, để các bạn căn hình chữ nhật đã phẳng phiu với Frame tuyệt chưa. 

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

Mình lựa chọn tiếp Text. Bạn thuận lợi chỉnh sửa phông chữ, size, chỉnh sửa vị trí. Bên cạnh đó mình có thêm phần Stroke nhằm chữ trông nổi bật hơn. 

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

Để thêm hình vào Frame thì mình cũng chọn thực đơn Figma > file > Place Image… 

*
thêm hình vào Frame

Thanh menu bên trên có hình tượng Crop (phần được đánh vàng). Bản thân sẽ sử dụng Crop để giảm hình cho phù hợp 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 blue color thì chỉ việc di đưa hình vào size là được. 

Cuối thuộc mình vẫn thêm đa số phụ kiện ngày lễ noel khác trường đoản cú Freepik cùng 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 vùng dưới sau, ngoài di chuyển thứ tự mặt menu layer phía tay trái, bạn có thể bấm vào phải lựa chọn Bring to font hoặc Sent khổng lồ back. 

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

Cuối cùng thì mình cũng đã chấm dứt banner Giáng Sinh và export cùng 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 nuốm của Figma thì chắc chắn rằng các các bạn sẽ thiết kế banner đẹp hẳn lên banner này những nữa ^^ 

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

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

✅ Figma vừa mới trình làng FigJam mang lại iPad ngày trong ngày hôm qua 15/3, với không hề thiếu các kỹ năng cộng tác team theo thời hạn thực, chỉnh sửa trực tiếp FigJam file trên ipad (trước đó phiên phiên bản dành tiện ích ios chỉ có thể xem kiến tạo mà thôi) hay cùng nhau “brainstorm” lên ý tưởng thi công ngay trường đoản cú đầu.

Xem thêm: Xem Tử Vi Ngày 11 Tháng 12 Năm 2021 : Tuổi Tỵ Tình Duyên Thuận Lợi

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

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

*
FigJam for iPad

Tính năng đồng nhất theo thời hạn thực và cùng tác thiết kế vẫn là một trong những trong các điểm mạnh của Figma cơ mà ít có công cụ thiết kế UX ,UI nào bao gồm thể tuyên chiến và cạnh tranh được.

✅ một số trong những tính năng khá nổi bật khác của phiên bạn dạng FigJam bên trên iPad– < > thiết kế 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 xích so sánh: “Figma vs. Sketch vs. Adobe XD: Công cụ kiến tạo nào tốt hơn?” bản thân đã share với các bạn rằng Figma là công cụ tốt nhất khi chúng ta mới ban đầu học kiến thiết giao diện người dùng.

Và nếu khách hàng có một đội/nhóm xây dựng thì Figma hoàn toàn có thể coi là công cụ cân xứng hơn cả vì tài năng cộng tác xây đắp đa căn cơ (Windows, Mac, Android, iOS,…) khôn cùng tuyệt vời.

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

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

Thông qua bài viết này, các bạn đã có thể đã làm cho quen và sử dụng những công cụ, tuấn kiệt trong Figma. ở bên cạnh đó, thi công banner mang đến mạng làng mạc hội bằng cách sử dụng Figma cũng đã trở nên tiện lợi hơn. Để áp dụng Figma vào thiết kế website, thi công giao diện cho áp dụng hoặc điện thoại thông minh cần nhiều sự luyện tập hơn nữa. Chúc chúng ta 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ý kết Figma Pro với tầm phí ưu đãi khá rẻ, gói đăng thông tin tài khoản Figma Pro 1 năm, tài khoản riêng chúng ta sử dụng, rất có thể thêm các thành viên vào nhóm, nếu như bạn cần áp dụng hãy contact với mình qua fanpage facebook tubepphuonghai.com nhé).

Xem thêm: Làm Việc Độc Lập Tiếng Anh Là Gì, Làm Việc Độc Lập Bằng Tiếng Anh

N.L.Chi

Chia sẻ khóa đào tạo và huấn luyện Figma xây đắp UI/UX miễn phí

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

Danh sách khóa học Figma miễn giá tiền vĩnh viễn

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