How to Build Figma’s Auto Layout Tables in Bubble’s Responsive Engine
Building our own designs is a superpower 🦸🏻♀️
This is from me to all those awesome people out there bubbling away and making people’s dreams happen :)
I will be using this table as an example. This was designed in Figma and implemented in Bubble (by yours truly 😚). All cells are actually input fields directly editable on click.
The Difference: Think Rows, Not Columns
Normally in most design systems built using Figma’s auto-layout, columns are used as the building unit for a table because in a table; column’s cells must all have the same width. So we use a vertical auto-layout where the column has a fixed width (or fills the container if you need it to) and cells width fill the container.
But in Bubble, info tables are horizontal Repeating Groups of data: Rows are the main unit of table. Therefore, column titles row will not be a part of the repeating group.
The trick here is to customize each column title cell to exactly match the RG cell beneath it.
Matching Cell Layout
For example, let’s build the Entry description column as it shows in the screenshot above:
Column title cell
It is a group with Row layout. This group contains a checkbox for selecting all rows, and the column title text.
Row Cell
Width must match the column title cell width, regardless of this cell’s layout. So this cell can be a column layout for example but width, horizontal padding and margins must be the same as the column title.
Do not make cells fit to content width, every cell will be different if you do.
Make Content Play Nice (2 Options)
1. Show Full Cell Content
Wrap text up to a certain height and make all the other row cells fit to to the longest cell’s height. My table does not require that, but it depends on your product.
See? it looks awkward with so many different row heights. To do that:
- you must use a multiline input instead of a regular input field. Regular inputs can only be a single line.
- Make sure that the Multiline fits height to content.
- adjust the all other cells in the row (group) to have a fixed height of 100%.
- make the row group itself fit height to content.
2. Cut Content to Protect Cell Height
I prefer this method because it gives me the hint I need to remember what I need on the overview screen. I can visit the project page for details. It looks more visually balanced as well.
To make this happen:
- Use a regular text input for the cell. Make the height fixed (you choose what suits you, mine is 50px.
- Make all cells in the row have the same fixed height. So for me all cells have a fixed height fo 50px.
- Set the row group to fit to content.
I hope this helps makers even a little. Keep building, may you never stop being awesome 😎. If you need any specific tutorial please let me know.
‘till next time. Lots of love! of #keepdesigning
