Group: Add setup state to allow picking a variant (default/row/stack) #43433
Comments
jasmussen
added
[Type] Enhancement
|
The plan here is to show this setup on all variations(group. stack, row) or just expose the |
|
This setup should mainly (only probably) show on the Group variation, and only when it's empty. It's a good layout starting point.
If you just click "Group" in the flow illustrated, you should get the group as it exists today, i.e. with the inserter. If you then don't add any blocks inside and deselect, we can revert back to the setup state as shown. Does that make sense? In most flows, I would expect the group (and row/stack variations) to mainly enter your content from from a pattern, or by selecting a few blocks and clicking the group toolbar button. In that light, when you explicitly choose to insert an empty group block, it can be considere an intent to "build layouts". In that light, I could see us adding additional shortcut buttons to this state, to let you create layout primiteves such as flex based columns and otherwise. These would almost be wireframe pattern shortcuts. But this would be something to explore in the future: just sharing as context for why the empty group is special in this regard. |
javierarce
added
the
Needs Figma Update
|
See also #43496 which is some initial work to address this issue. |
|
Resolved by #43496 |
The Row and Stack blocks are variants of the group block. The group is for standard flow based content, Row flexes horizontally, Stack flexes vertically. You can transform between the variants in the inspector, and transform into one of these variations when selecting multiple blocks:
In most flows, you will arguably encounter the trio of container blocks having entered your content from from a pattern, or by selecting a few blocks and clicking the group toolbar button. In that light, when you explicitly choose to insert an empty group block from the inserter, it can be considered an intent to "build layouts". We can build on that intent and offer them in a basic Group block setup state:
Picking one would lead to the setup state we have today:
There's also an opportunity here to offer additional layout wireframes as shortcuts, such as a column-layout based on Stack blocks inside a Row. But this is someting to explore separately, and for the initial version, Group, Row and Stack variations would be sufficient.
SVG graphics for the shortcuts
No need to add the following illustrations to the icon library, these can exist just for the Group, for example in a
variations.jsfile.Stack:
Row:
Group:
Figma.
Issue updated Sep. 28.
Initial proposal
The Row and Stack blocks are variants of the group block. The group is for standard flow based content, row flexes horizontally, stack flexes vertically. These three blocks come with setup states to subtly indicate their direction:You can transform between the variants in the inspector:
And you can transform into one of these variations when selecting multiple blocks:
Despite these affordances, it may still not be entirely clear what to do with an empty group, stack, or row. It might make sense to have a first step of that setup state be a basic picker allowing you to choose the layout in a more visual way:
Picking one would lead to the setup state we have today:
Such an initual setup state we should also follow up on with more concrete layouts in the future, like different width of columns once we support that.
The text was updated successfully, but these errors were encountered: