I want to dynamically set the width of a component instance based on other instances.
So I have a column based table, and cell heights in the columns may vary. So all cells that belong in the same row must be automatically set to one height based on a single cell - can that be possible?
Another scenario with the same table component is that I have a frame with columns that scrolls horizontally and one column that doesn’t scroll which is fixed to the right edge of the scrollable frame with absolute position (not part of auto layout) but this fixed column could be of variable widths. The right padding of the frame must be linked to the width of the fixed column so that when a different variant of the column is selected, the padding can match exactly the new width of the fixed column and no content from the scrollable frame is lost
In your first case, the cell height depends on the content. Typically, cell content is text or numbers. If you set up the “truncate text” option within text properties, you can manage the height depending on the content. You can choose the maximum number of lines and set the width to auto.
After setting up the cell, you need to group a few cells using auto layout.
Then you should set the height for all auto layouts and make it “hug contents.”
Note: You can set up dynamically only by axis: width for columns and height for rows.
Test. Add real content and test your setup.
I hope my explanation was clear and helpful for you.
Hi Andrii.
Thankyou for your response. It was very clear. I think you are talking about row based tables, correct me if I am wrong
What I mean by row based is that first you are framing some cells horizontally with auto-layout and then duplicating that row multiple times to form the table.
I mentioned in my question that we are using column-based tables. In column-based tables all cells along with the associated header cell are framed vertically with auto-layout and then the column is duplicated multiple times to form the table. In this scenario all my cells in the same column will be of consistent width but the cells that align as row will not be of the same height because we could have content that goes up-to 8 lines of text in some cells
The reason I chose the column-based table building approach is due to the problem of widely varying widths of the columns in our requirement.
When I have a row-based table component, how would my designer change the width of the cells so that all cells that align into a column are aligned with the header cell. Header cell width is based on the content in the header.
Parallelly, the column-based table is now having the problem of aligning cells in rows
I am not sure how else to put this.
The content in out tables poses a challenge as well because it is not simple numbers and words. We could have cell content that goes up to 8 lines of text.
I am finding it difficult to optimize with these constrains. I am not sure what else to do
Unfortunately, Figma has limits in this case.
You can control only one axis.
Another option is to adjust the minimum and maximum size of the cell, but even then, there are limitations. You’ll need to decide on an average cell size.
That’s all I know.
