Complete Guide to Creating Dynamic Table Components on Figma

Ғылым және технология

In this quick tip, unlock the true potential of Figma for designing flexible and adaptive table components.
Tables are a fundamental part of any interface. We will walk you through the step-by-step process of building dynamic tables that effortlessly adapt to different content lengths, screen sizes, and user interactions.
Throughout the tutorial, we will explore best practices for designing customizable table components. You will learn how to create fluid layouts, implement responsive behavior, and handle dynamic data effectively.
Whether you are a beginner looking to grasp the basics or an experienced designer seeking to elevate your table design skills, this tutorial has something for everyone. By the end, you'll have the confidence and knowledge to create visually appealing and highly interactive table components that excel in both form and function.
#FigmaTutorial #TableDesign #FlexibleTables #DynamicComponents #ResponsiveDesign #DataVisualization #UXDesign #UIDesign #InteractiveTables #FigmaDesign #DesignTutorial #WebDesign #DataTables #TableLayouts #FigmaTips #FigmaTricks

Пікірлер: 38

  • @skeche
    @skeche4 ай бұрын

    dude this was perfect no bullshit and only 5min

  • @user-rd8wu5zp5c
    @user-rd8wu5zp5c5 ай бұрын

    you saved me! thanks you because It's all that I need in a simple and clear video, best!

  • @Kaze70707
    @Kaze7070717 күн бұрын

    This is much better explanation than my mentor in bootcamp 😢.

  • @mindesigning5468

    @mindesigning5468

    15 күн бұрын

    Glad to help! Share it away

  • @JohnRodrigues.
    @JohnRodrigues.4 ай бұрын

    Thank you, this is very helpful

  • @raphaelnogueira4412
    @raphaelnogueira44129 ай бұрын

    You helped a lot, thanks

  • @gooddeslex
    @gooddeslex3 ай бұрын

    Great way! Thnx a lot!

  • @uifry
    @uifry9 ай бұрын

    Bravo !!

  • @iCosmictube
    @iCosmictube11 ай бұрын

    MY RESPECT BRO!!!!

  • @yishmael
    @yishmael8 ай бұрын

    Dude, I really liked your teaching style! This guide helped me a lot, thank you! I would love to see in the future some Figma courses from you, I would definitely buy it

  • @mindesigning5468

    @mindesigning5468

    7 ай бұрын

    Thank you! Happy to help!

  • @EricCRO
    @EricCRO Жыл бұрын

    amazing

  • @leylamusazade97
    @leylamusazade9717 күн бұрын

    Thank u very much, you explained it very easy but i cant add this video to my playlist, why?

  • @naveen_bm
    @naveen_bm Жыл бұрын

    ❤❤

  • @tapakbkmz
    @tapakbkmz Жыл бұрын

    Nice dude, love it❤

  • @mindesigning5468

    @mindesigning5468

    Жыл бұрын

    Thanks 🔥

  • @unapizcadefran
    @unapizcadefranАй бұрын

    Hi, thanks for the tutorial! I have a question, is it possible to add more rows? without adding them to the original column component?

  • @mindesigning5468

    @mindesigning5468

    Ай бұрын

    You can never add content to a component , just remove them. What you can do is add to the original and set the visibility (eye icon) to off. So You can turn on just when you need them. Hope this helps

  • @mohammadsaeed4511
    @mohammadsaeed451111 ай бұрын

    That's Great, But my question is, can we add rows in the table from the panel in the right to setup properties for instance???

  • @mindesigning5468

    @mindesigning5468

    10 ай бұрын

    Yes, you can create variants for you table component with different numbers of rows, so they will be available in a dropdown such as the other paramethers. But, to be honest, I think it's not worth it, I prefer creating one table with a buch of rows and simply delete them in the instance if not needed. Remeber, you can always hide content of a intance but you can never add anything

  • @RichardPascual-sn4qn
    @RichardPascual-sn4qn3 ай бұрын

    Thank you for this video. How would you vary the amount of line items in the final component created?

  • @mindesigning5468

    @mindesigning5468

    3 ай бұрын

    You can't add elements to a component, only remove them. So I suggest the columns with all the cells you need and just delete them when not needed

  • @palanimathi4493
    @palanimathi44933 ай бұрын

    Great, I have one question could you please explain, is this possible to give a hover effect for the entire row?

  • @mindesigning5468

    @mindesigning5468

    3 ай бұрын

    Will do

  • @parasmistry1346
    @parasmistry13463 ай бұрын

    Can I use overlay animation for dropdown however I also want to showcase the selected option.

  • @mindesigning5468

    @mindesigning5468

    3 ай бұрын

    Not sure I get your question, you want to click the select element, show the dropdown menu, and make the selection reflect on the table, is that it? You can do that with variables

  • @elainewang3605
    @elainewang36058 ай бұрын

    How does this work if you need a hover effect to highlight a row?

  • @rafaappl

    @rafaappl

    7 ай бұрын

    In my opinion there is a missing step. You can do all steps as shown, but I'd create a row component and define all other elements with transparent background. Then I'd define the background color only on the row. BUUUUUT componentizing a row, may create an extra work to define the number of columns, anyway, I still think this is a better way, because in fact, actions are made in rows.

  • @fernandopaiva4100
    @fernandopaiva41004 ай бұрын

    Great!! but how can i put a horizontal scroll and keep the table responsive? Can you show how to do? Thank you !!

  • @mindesigning5468

    @mindesigning5468

    4 ай бұрын

    Can you elaborate on that? Not sure I got it.

  • @fernandopaiva4100
    @fernandopaiva41004 ай бұрын

    Can you can put this component to download please? IT'S possível?

  • @peopleinc9468
    @peopleinc9468 Жыл бұрын

    Please also give access to file ❤

  • @rodolfolorote9059
    @rodolfolorote905926 күн бұрын

    Are you Brazilian?

  • @CharlBrazle
    @CharlBrazle5 ай бұрын

    This totally fails when texts grow on multiple rows. Then all other columns/rows will be misaligned :(

  • @jkdubb

    @jkdubb

    4 ай бұрын

    That seems to be the unsolvable problem. Hope someone figures this out. Maybe a future figma update specifically for tables.

  • @mindesigning5468

    @mindesigning5468

    4 ай бұрын

    You can create a variation of the basic components with the height set to “fill” or “hug” and change them accordingly. Set your text column to a block formatting. Hope it helps!

  • @user-lq7kv2er8z
    @user-lq7kv2er8z8 ай бұрын

    name font?????

  • @H4KV
    @H4KV8 ай бұрын

    Wt are u Brazilian???

Келесі