How To Create A Table in Figma Easily With Auto-Layout. Simple Responsive Auto-Layout Table.

Поділитися
Вставка
  • Опубліковано 23 січ 2025

КОМЕНТАРІ • 69

  • @besim3916
    @besim3916 Рік тому +12

    Thanks so much. One recommendation: often times you use keyboard shortcuts without mentioning it. There are some screen recording software that automatically shows what keys you press so that you don't have to mention it. I'm still new in Figma so if those shortcuts would show up on the screen as you talk that would help a lot.

    • @femijohn
      @femijohn  11 місяців тому +3

      Thank you so much for this. I will be conscious of this next time I am making a video. I appreciate you.

  • @bashirmoruf4949
    @bashirmoruf4949 Рік тому +2

    This is beginner's friendly having watched various video on responsive table. Kudos!!

  • @hannahmaccamoo
    @hannahmaccamoo Рік тому +2

    Your tutorials are brilliant - so clear and easy to follow. Much better than any of the tutorials coming from Figma themselves. You've got me out of a couple of tricky situations, thank you! You should have sooooo many more likes :-)

    • @femijohn
      @femijohn  Рік тому

      Glad you like them! I am so happy to hear this. 😊

  • @ferdausalamsyah1600
    @ferdausalamsyah1600 2 місяці тому

    Wow this is very nice trick....
    creating Head and body component is nice.. i am doing manual all this time... and very effort when changing the style 😂
    Thanks for sharing

  • @elenamikhaylova5086
    @elenamikhaylova5086 8 місяців тому +1

    this is exactly what i needed, thank you! soooo informative and helpful. I'm new to Figma and I feel like i learned so much in this short video

    • @femijohn
      @femijohn  7 місяців тому

      Glad it was helpful!

  • @ademuyiwaoluwanifemi7273
    @ademuyiwaoluwanifemi7273 Рік тому +1

    Femi You are the man !!!.. Great tutorial. Thank you for doing this

  • @annisaautami
    @annisaautami 5 днів тому

    this is very helpful! thank you so much

  • @תמרתבור
    @תמרתבור Рік тому +2

    I couldn copy and paste the row as you did in 09:01.
    Even in your template i couldnt replexate what you did... it doesnt paste each cell under the frame i copied it from but puts them all outside of the frames in one level

    • @sheilaudobong3095
      @sheilaudobong3095 Рік тому

      exactly me too @thefemijohn

    • @vladislavkolpakov8066
      @vladislavkolpakov8066 Рік тому

      @thefemijohn yaeh, dude, how did you do that?

    • @MANUMS-ej5tn
      @MANUMS-ej5tn 7 місяців тому

      cmd + D would do the trick. As its auto layout, it would paste right below the row

  • @tomashudolin7197
    @tomashudolin7197 Рік тому +2

    What shortcut did you press at the begining before creating the component from table header? Because after that the padding was also set. Thank you.

  • @sunnytheys
    @sunnytheys Рік тому

    Hi there! Your video helped me out a lot!! Thank you so much!! :D
    Commenting to boost the algorithm!! :)

  • @taiwoakinkunmi3445
    @taiwoakinkunmi3445 Місяць тому

    Great Video,...Thank You !

  • @aniebietoluwa
    @aniebietoluwa Рік тому +1

    Impressive video! You made it look effortless. Inspired to try it out myself! Well done
    🙌

    • @femijohn
      @femijohn  Рік тому

      Thank. Please let me know if it was easy to implement

  • @vladislavkolpakov8066
    @vladislavkolpakov8066 Рік тому +2

    Mate, how did you paste the row in 09:01? I insert it somewhere into the table itself, and not exactly below. How did you do that?

    • @ratunahrisa4590
      @ratunahrisa4590 10 місяців тому

      I'm not sure, but perhaps ctrl+D (duplicate)? because it is inside auto layout so it is going underneath right away

  • @TheChefAine
    @TheChefAine Рік тому +1

    Thank you for this! I watched it to the end😊. Very helpful

  • @boby7616
    @boby7616 Місяць тому +1

    Thank you puja kamu sangat membantu

  • @PuspitaB-v9t
    @PuspitaB-v9t 4 місяці тому +1

    Thank you so much for the video..

    • @femijohn
      @femijohn  4 місяці тому

      You are most welcome

  • @PaulJaredBrooksTop50
    @PaulJaredBrooksTop50 Рік тому +1

    Great stuff, thanks so much!

  • @darrenjonathan3923
    @darrenjonathan3923 Рік тому +1

    when i copied the table head and put it outside the frame, why the cell style options doesnt appear?

  • @vermaankit429
    @vermaankit429 6 місяців тому +2

    How are you dragging the table head into a frame. I see some arrows are coming when you are pulling from some frame

  • @DeanWentzel
    @DeanWentzel 11 місяців тому

    You made my day, how easy was that to make, tx

    • @femijohn
      @femijohn  11 місяців тому

      You're welcome

  • @uiuxclinic
    @uiuxclinic Рік тому +1

    This was very helpful. thank you!

  • @kishorekumarseenivasan
    @kishorekumarseenivasan 7 місяців тому +1

    hey kudos to you bro 👏

  • @annak7905
    @annak7905 2 місяці тому +1

    Thank You!!!

    • @femijohn
      @femijohn  2 місяці тому

      You're welcome!

  • @jedrowe3943
    @jedrowe3943 6 місяців тому +1

    Great video :)

    • @femijohn
      @femijohn  6 місяців тому

      Glad you enjoyed it

  • @valuevolt
    @valuevolt 3 місяці тому

    Thank you for this video

  • @aarthypalanivelu6393
    @aarthypalanivelu6393 6 місяців тому

    Thanks It really helped, If we want to align both header and table data in a same imaginary line how can we do that? Rightnow data is centered, How can we make it left aligned with fill container setting?

  • @stepanbersin5516
    @stepanbersin5516 Рік тому

    Hey, nice work. But how you merge columns for one row and same to rows?

  • @umangapokharel0908
    @umangapokharel0908 8 місяців тому +1

    this is what i am looking for

  • @matthewolukoju1246
    @matthewolukoju1246 Рік тому +1

    This is an interesting approach, but how do you solve the interaction issue. Hover, pressing and selected state in this case.

    • @femijohn
      @femijohn  Рік тому +1

      Good question, I actually use a different approach when trying to achieve that. For this you only use the actual button

    • @_matthewola
      @_matthewola Рік тому

      Interesting! @@femijohn

  • @AS-sp7kx
    @AS-sp7kx 6 місяців тому +1

    Nice!

  • @zandyy277
    @zandyy277 11 місяців тому

    So good bro, can tou Tutorials make how to add user in then tablet, manage user

  • @MorayoEgbayelo
    @MorayoEgbayelo Рік тому +1

    How did you add the icons?

  • @hussnainraza4483
    @hussnainraza4483 3 місяці тому

    Bro ____ 💝

  • @TheRealHouji
    @TheRealHouji 11 місяців тому

    where's the link for the icon?

  • @catthepink5298
    @catthepink5298 4 місяці тому

    tks bro

  • @revihasbi682
    @revihasbi682 3 місяці тому +1

    its good, until you fill the table with longer text,

    • @femijohn
      @femijohn  3 місяці тому

      When you setup your first row or colums. set the width to hug content. that way it expands as the text grows. As set the entire table frame to hug content. 👍🏼

  • @dong3599
    @dong3599 Рік тому +1

    3:24 How to shot cut bring-in

    • @Prhaizze
      @Prhaizze 23 дні тому

      Hold the options/alt key and drag.

  • @bobbyaxelrod7983
    @bobbyaxelrod7983 Рік тому +3

    You use keyboard shortcuts but never mention

  • @ahmedmahdy9702
    @ahmedmahdy9702 Рік тому

    Thank you

  • @joyceshaba1104
    @joyceshaba1104 7 місяців тому +1

    Longtime femi 😁

    • @femijohn
      @femijohn  6 місяців тому

      😅 How’ve you been?

  • @Goguma-z
    @Goguma-z Рік тому +3

    this is quite difficult