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

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ต.ค. 2024

ความคิดเห็น • 65

  • @HopOnLuu
    @HopOnLuu  3 ปีที่แล้ว +4

    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
      @HerrTuanh 3 ปีที่แล้ว

      Quá hay a ơi

    • @HerrTuanh
      @HerrTuanh 3 ปีที่แล้ว +2

      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
      @sangtruong9829 3 ปีที่แล้ว

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

    • @HopOnLuu
      @HopOnLuu  3 ปีที่แล้ว +3

      @@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
      @huyenphan3004 3 ปีที่แล้ว

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

  • @Tyong-sk7vt
    @Tyong-sk7vt 3 ปีที่แล้ว +6

    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é .

  • @annale3873
    @annale3873 2 ปีที่แล้ว

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

  • @trinhbui8289
    @trinhbui8289 ปีที่แล้ว +1

    video qua hay luon a

  • @hoanghailong9592
    @hoanghailong9592 3 ปีที่แล้ว

    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!

  • @dangminhtuankgvn
    @dangminhtuankgvn 3 ปีที่แล้ว

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

  • @nhoxdeiu3933
    @nhoxdeiu3933 3 ปีที่แล้ว

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

  • @chuyencuaandy
    @chuyencuaandy 3 ปีที่แล้ว

    Bài này hay quá ạ

  • @ThanhHuynh-bd7hi
    @ThanhHuynh-bd7hi 2 ปีที่แล้ว

    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?

  • @fuyuinverno
    @fuyuinverno 3 ปีที่แล้ว

    Thích anh quá 🥰

  • @t.tienphan2756
    @t.tienphan2756 3 ปีที่แล้ว

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

  • @michaelng1990
    @michaelng1990 3 ปีที่แล้ว

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

  • @thanhnienxungkich
    @thanhnienxungkich หลายเดือนก่อน

    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
      @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 đó

  • @thosandat
    @thosandat 2 ปีที่แล้ว

    Cảm ơn bạn

  • @khanhlinhnguyen2966
    @khanhlinhnguyen2966 5 หลายเดือนก่อน

    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
      @HopOnLuu  5 หลายเดือนก่อน

      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

  • @duyhuynh6816
    @duyhuynh6816 ปีที่แล้ว

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

    • @HopOnLuu
      @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:
      th-cam.com/video/_XG0MC3DiE4/w-d-xo.html

  • @TrangTran-ur1vj
    @TrangTran-ur1vj 2 ปีที่แล้ว

    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
      @HopOnLuu  2 ปีที่แล้ว +1

      ý 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
      @TrangTran-ur1vj 2 ปีที่แล้ว

      @@HopOnLuu cảm ơn anh hen

  • @minhtuan4643
    @minhtuan4643 3 ปีที่แล้ว

    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
      @HopOnLuu  3 ปีที่แล้ว

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

    • @Tyong-sk7vt
      @Tyong-sk7vt 3 ปีที่แล้ว

      bỏ tiền thôi .

  • @tramdiep8093
    @tramdiep8093 5 หลายเดือนก่อน

    Ở đ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
      @HopOnLuu  5 หลายเดือนก่อน

      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
      @tramdiep8093 5 หลายเดือนก่อน

      Dạ cám ơn ạ

  • @oannguyen5511
    @oannguyen5511 2 ปีที่แล้ว +1

    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
      @HopOnLuu  2 ปีที่แล้ว

      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.

  • @nhoxdeiu3933
    @nhoxdeiu3933 3 ปีที่แล้ว

    Làm bottom app bar đi anh

    • @HopOnLuu
      @HopOnLuu  3 ปีที่แล้ว

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

  • @nguyenhongbaothang8386
    @nguyenhongbaothang8386 2 ปีที่แล้ว

    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
      @HopOnLuu  2 ปีที่แล้ว

      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.

  • @tranminhtam6255
    @tranminhtam6255 ปีที่แล้ว

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

    • @HopOnLuu
      @HopOnLuu  ปีที่แล้ว

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

  • @LongNguyen-tr5bf
    @LongNguyen-tr5bf 2 ปีที่แล้ว

    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
      @HopOnLuu  2 ปีที่แล้ว +1

      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
      @LongNguyen-tr5bf 2 ปีที่แล้ว

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

    • @LongNguyen-tr5bf
      @LongNguyen-tr5bf 2 ปีที่แล้ว

      @@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
      @HopOnLuu  2 ปีที่แล้ว

      @@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.

  • @lihaitoan7489
    @lihaitoan7489 2 ปีที่แล้ว

    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
      @HopOnLuu  2 ปีที่แล้ว +1

      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

  • @mabelnguyen145
    @mabelnguyen145 3 ปีที่แล้ว

    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
      @HopOnLuu  3 ปีที่แล้ว +1

      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
      @mabelnguyen145 3 ปีที่แล้ว

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

  • @truonginh5553
    @truonginh5553 2 ปีที่แล้ว

    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
      @HopOnLuu  2 ปีที่แล้ว

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

    • @truonginh5553
      @truonginh5553 2 ปีที่แล้ว

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

    • @HopOnLuu
      @HopOnLuu  2 ปีที่แล้ว

      @@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
      @truonginh5553 2 ปีที่แล้ว

      @@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
      @truonginh5553 2 ปีที่แล้ว

      @@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 ạ

  • @huypham3118
    @huypham3118 3 ปีที่แล้ว

    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
      @HopOnLuu  3 ปีที่แล้ว +1

      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
      @huypham3118 3 ปีที่แล้ว

      Dạ cảm ơn anh

  • @sangtruong9829
    @sangtruong9829 3 ปีที่แล้ว

  • @t.tienphan2756
    @t.tienphan2756 3 ปีที่แล้ว

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

    • @HopOnLuu
      @HopOnLuu  3 ปีที่แล้ว

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