Pain points for designers in 2018?

5 years ago from John Low, Developer BBA

  • Thomas Lowry, 5 years ago

    Check out the data table I created with nested components in Figma as part of this Material design resource:

    https://www.figma.com/file/NMeZfmwo9Nhqi72S0bw3Tn/Android-UI-Kit/duplicate

    (the data grids are on the far right arboard).

    Usually what I like to do is assemble a basic table using nested components. I try to keep it as modular as possible. For most standard tables, I find its useful to have the columns as components, and the rows as a repeating separate component. If you make the columns as part of your row, its harder to customize since you need to detach and break the component to modify the contents. You can sort of make your own repeat grids.

    Take a component (one row for example). Then make a new component with that row duplicated 20-30x. Then turn that grid into a component. Set the constraints to those nested rows to be Left and Right + Top. There is a feature in Figma called “clip content”. If you enable this, you can resize the component, and it will crop the repeat grid. So when you want more, you just drag it down to expand the size and reveal more rows.

    Once I have all the setup, I package them up all assembled in a component to create a sample table. When I need a table, I drop in the sample table from our shared library, break it apart, and configure all the nested components how I want them.

    Posted a bit about it here: https://twitter.com/negativespaceca/status/1002635034505850880

    2 points