Hướng dẫn Figma - Menu đa cấp với Variant và Autolayout - Figma designer Việt Nam

[@HopOnLuu]

Chào mọi người, Xem video trên xong thấy sao, hay ho hem? hữu ích hem? Bên cạnh chuỗi hướng dẫn này, mình có thêm một khóa học về figma kéo dài 8 buổi và đi sâu vào nền tảng, bạn nào quan tâm có thể vào link này: bit.ly/khoa-hoc-figma-offline

[@HerrTuanh]

Quá hay a ơi

[@HerrTuanh]

E mong a làm 1 video tạo portfolio để các bạn mới ra trường hay trái ngành có thể tự tin đi xin việc

[@sangtruong9829]

Mong anh ra thêm nhiều video mới ạ

[@HopOnLuu]

@@HerrTuanh Về portfolio thì khối lượng việc nó như là thực hiện một cái website luôn rồi nên sẽ hơi phức tạp và ko thể gói gọn trong một video :D. Chắc mình sẽ lên kế hoạch cho một video hỗ trợ các bạn xài figma để làm CV, làm slide, làm mockup ... thì nó gọn gàng hơn ha :D

[@huyenphan3004]

Cảm ơn chia sẻ của anh ạ, anh giảng rất hay...

[@Tyong-sk7vt]

Figma là công cụ dành cho thiết kế hê thống . Bởi vậy cần phải nắm chắc những cái như auto layout , variant , color style , font style , component thì sẽ giúp cho việc design trở nên nhẹ nhàng hơn rất nhiều ...tiết kiệm thời gian , tăng năng suất nên rất nhiều . Do đó designer sẽ có nhiều thời gian forcus vào sáng tạo bản thiết kế đẹp hơn . Giai đoạn đầu có thể mất nhiều thời gian để hiểu cách sử dụng chúng nhưng về lâu dài sẽ giúp tiết kiệm thời gian rất là nhiều . Video rất tuyệt vời . Thanks Nhân Lưu nhé .

[@hoanghailong9592]

Cảm ơn anh, em mất hơn 1 ngày mắc ở cái này mà giờ xem được video này mới được thông não! @@ Đa tạ anh nhiều!

[@annale3873]

Cảm ơn Nhân Lưu, ngàn like gửi tác giả chia sẻ đến cộng đồng Figma

[@trinhbui8289]

video qua hay luon a

[@nhoxdeiu3933]

Coi clip của anh nghe giọng hài ghê, làm clip sinh động hơn hẳn kkkk

[@dangminhtuankgvn]

Cảm ơn giảng viên!

[@ThanhHuynh-bd7hi]

Mới biết kênh của a, video hay hữu ich quá.Để mô phỏng một hoạt động của menu đa cấp cần nhiều layout quá vậy nhờ a chủ kênh hướng dẫn cách nào tận dụng tốt variant mà số layout ko bị phát sinh nhiều như vậy ko ah?

[@t.tienphan2756]

Video hay quá anh Cảm ơn anh nhiều

[@n2cmusic]

Cho em hỏi, em học IT nhưng thích làm về mảng design hơn, em có biết về figma và pts, như thế có thể đi xin việc chưa ạ, hay cần trang bị thêm nữa mới được ạ? Em cảm ơn!

[@HopOnLuu]

như bạn liệt kê thì cái bạn đang nắm là công cụ. Nếu được bạn hãy tìm hiểu thêm về chuyên môn của lĩnh vực để nắm được các yêu đầu để cho ra các sản phẩm đạt tiêu chuẩn của công việc. Biết sử dụng công cụ là tiền đề, nhưng sẽ cần thêm để bước vào nghề á. Nếu bạn quan tâm thì bên mình có khoá học để hỗ trợ bạn các nhóm kiến thức đó

[@fuyuinverno]

Thích anh quá 🥰

[@michaelng1990]

rất hữu ích, like nhé anh.

[@chuyencuaandy]

Bài này hay quá ạ

[@TrangTran-ur1vj]

Video giá trị quá ạ, em thấy trên figma help có hướng dẫn làm button bao gồm: button large and small, primary and secondary, default and pressed... mà không biết làm như thế nào để có thể sắp xếp và đặt tên cho đúng với varients ạ, anh có thể ra video này được không ạ

[@HopOnLuu]

ý kiến này cũng hay nè. Việc làm button thường thì nó sẽ phục vụ đặc thù của từng loại hình công việc và từng dự án khác nhau. Để mình tìm hướng nào đó có thể làm 1 cái chung để mọi người có thể cùng xài đc như một cái gợi ý đầu tiên, sau này thì sẽ tự phát triển lên thêm he.

[@TrangTran-ur1vj]

@@HopOnLuu cảm ơn anh hen

[@khanhlinhnguyen2966]

Giờ a hướng dẫn làm lại menu đa cấp như này được k ạ, giờ chắc figma cập nhật dễ làm hơn rồi đúng k ạ

[@HopOnLuu]

hiện tại cũng vẫn trên các nguyên tắc này thôi nè. Mình chưa có kế hoạch sẽ cập nhật lại hướng dẫn á :D, nêu có gì cần hỏi trong video bạn cứ comment nha

[@tramdiep8093]

Ở đoạn 4’47 tạo thêm 1 autolayout bên ngoài để làm gì vậy ạ? mình bị ko hiểu chỗ đó 🥲

[@HopOnLuu]

cái phần menu chính nó là 1 cái item. Và nó theo trục ngang. cái phần các sub-menu bên dưới là các item khác, và tất cả từ menu chính + các item phụ đó sẽ tạo thành thêm 1 hệ autolayout trục dọc nữa.

[@tramdiep8093]

Dạ cám ơn ạ

[@thosandat]

Cảm ơn bạn

[@duyhuynh6816]

có video hướng dẫn phần này cho new update figmachua7 bạn?

[@HopOnLuu]

new update từ tháng 5/2022 mình có 1 video để hướng dẫn rồi ạ. Bạn có thể xem tại đây: kzbin.info/www/bejne/lYmqYYB5aKmce5Y

[@minhtuan4643]

Anh ơi anh có thể hướng dẫn cách tư duy chọn màu, chọn font chữ, cũng như cách trình bày một dự án thì sẽ có những phần bố cục nào ( cách đặt tên cho các layer, sắp xếp các frame bên trái như thế nào cho chuẩn,...) được không ạ? Em cảm ơn anh.

[@HopOnLuu]

cái này thì nó là nguyên một khóa học luôn rồi ạ =)))

[@Tyong-sk7vt]

bỏ tiền thôi .

[@oannguyen5511]

Anh ơi cho em hỏi? em kéo "Sub level 2" vào "Sub level 1" nhưng tại MENU ITEM thì Sub level 1 không tự dãn ra chừa chỗ cho Sub level 2 nên nó bị chồng lên nhau. Chỉ có thể điều chỉnh lại bằng thủ công, cái này là bị sao z ạ?

[@HopOnLuu]

bạn hãy để cái phần autolayout, và chọn "hug contents" theo chiều dọc, khi đó nó mới giãn và đẩy các thành phần ra.

[@tranminhtam6255]

ở 4:47 làm sao để tạo thêm auto layout bên ngoài vậy mọi người

[@HopOnLuu]

bấm "shift+A" nha bạn :D

[@nguyenhongbaothang8386]

anh ơi nếu mình muốn prototype dropdown thêm những cái trên như sale hay dashboard thì mình phải setup rồi copy ra nhiều màn khác rồi nối lại hả anh

[@HopOnLuu]

hiện tại figma nó ko hỗ trợ việc tự autolayout khi đang trong prototype nên tạm thời phải làm vậy á bạn. Tuy nhiên trong thực tế mình chỉ cần làm 1 cái để demo là đủ rồi nên cũng ko vấn đề lắm.

[@LongNguyen-tr5bf]

mình đã tạo auto layout nhưng khi mình nhấp vào text ko thấy hiện công cụ resizing , mong bạn chỉ dẫn giup mình

[@HopOnLuu]

bản update tháng 5 vừa cập nhật lại vị trí của resizing. Bạn select thành phần xong nhìn lên phía các thông tin về kích cỡ, sẽ thấy 2 menu về resizing trên đó.

[@LongNguyen-tr5bf]

@@HopOnLuu xin cảm ơn rất nhiều ạ

[@LongNguyen-tr5bf]

@@HopOnLuu Bạn ơi cho mình hỏi khi mình cho sub menu đã tạo component vào menu chính thì mấy cái shape mình phải xoá hay để luôn ạ , nếu để luôn thì khoảng cách giữa các shape không bị mất đi giông như video hướng dẫn ạ

[@HopOnLuu]

@@LongNguyen-tr5bf mấy cái shape chỉ để minh họa giữ chỗ, bạn có thể xóa. Còn khoảng cách thì bạn chỉnh thông số trong phần section liên quan đến autolayout.

[@truonginh5553]

Anh ơi khi em bật mắt lên thì menu item k tự co giãn nên menu chữ của em chèn lên nhau thì sửa ntn a nhỉ

[@HopOnLuu]

cái này có thể đến từ việc bạn chưa tạo autolayout trong frame của bạn?

[@truonginh5553]

Ngoài ra còn lỗi gì k a nhỉ

[@HopOnLuu]

@@truonginh5553 cái này bạn tìm hiểu thêm 2 cụm từ khóa: autolayout và text auto-width để có thể xử lý cho các dạng thành phần xếp ngang nhau nha

[@truonginh5553]

@@HopOnLuu Em nhấn yes khi expanded thì nó hiện ra 4 SubMenu nhưng khi nhấn No nó chỉ thu vào có 3 SubMenu và vẫn hiện 1 Submenu thứ 2 là sao a nhỉ

[@truonginh5553]

@@HopOnLuu Với cả a có fb không ạ cho em xin link em có thắc mắc em có thể hỏi được k ạ

[@mabelnguyen145]

Anh ơi, em Crtl C copy SubMenu lev 2 sau đó bấm Ctrl V SubMenu lev 2 vào SubMenu lev 1 giống như anh nhưng nó lại không vào được, em kéo thả cho lev 2 vào lev 1 cũng không vào được, không biết là em làm sai ở đâu ạ :((

[@HopOnLuu]

Mình đoán là bạn cho nó vào ở instance? phải cho nó vào ở cái component gốc nha. Trường hợp bạn có nhiều cấp cho Sub-menu thì hãy chọn số lượng sub-menu nhiều nhất, sau đó khi cho instance vào thiết kế thì hãy ẩn bớt đi các sub-menu dư, chứ chúng ta ko thể thêm sub-menu vào instance.

[@mabelnguyen145]

@@HopOnLuu Cám ơn anh đã chỉ ạ, em đã sửa thành công.

[@lihaitoan7489]

anh ơi , em làm bấm vô MenuItern hiện ra MenuLevel1 nhưng bấm tiếp vô MenuLevel1 thì nó ko hiện ra MenuLevel2, em có làm variant giống như anh nhưng nó vẫn ko hiện ra , trừ khi tách MenuLevel1 ra rồi bấm thì nó mới hiện ra thôi ạ. Mong anh giải thích lỗi gì ạ?

[@HopOnLuu]

cái này mình chưa đoán ra đc ngay, nó có thể: 1. bạn xem lại cách làm autolayout, có thể chiều dọc nó ko có hug contents chính xác chưa 2. cái lỗi bật/tắt xong nó bị kẹt, cái này bạn chuột phải > reset all overrides rồi thử lại xem nha

[@huypham3118]

Tại sao khi em expanded được vài lần thì nó không đóng hết mấy cái submenu vậy ạ ? mong anh trả lời

[@HopOnLuu]

lý do của việc này là do figma nó lưu lại cái thay đổi của bạn trên cái instance menu item. Cách fix thì bạn có thể bấm chọn reset overide (để nó reset các tính chất mình thay đổi ở instance) ở vị trí gần cho swap instances.

[@huypham3118]

Dạ cảm ơn anh

[@nhoxdeiu3933]

Làm bottom app bar đi anh

[@HopOnLuu]

này hay nà, để nghiên cứu :))

[@sangtruong9829]

[@t.tienphan2756]

Giộng anh chuẩn đống cửa đi ngủ

[@HopOnLuu]

ý vậy là chuẩn hay hông chuẩn ạ :'(