Expand Layout and spacing to include layouts detected in other modes

[diehendrick]

Is your feature request related to a problem? Please describe.
Currently the plugin is not support variable mode, for documentation. Visibility issue for tech team to see the variable mode.

Describe the solution you'd like
my solution is provide information for variable mode. and able to show information in layout section between figma variable and also from tokens studio.

Additional context
here is for the example for my case.

[nathanacurtis]

@diehendrick I already have a branch open to add Modes, a fourth section that's a peer of Props and Layout and Spacing. However, my mindset has to date been to replace Props that are being exchanged for Variable Collections.

That said, I'll put some thought into how to also exhibit variation for Layout and Spacing based on Modes as well. Note that I don't yet show variation for Layout and Spacing based on Props, making your proposed challenge more complicated.

[nathanacurtis]

@diehendrick
Right now, I've developed a Modes section that shows relevant variation for any variable that changes its value across 2+ modes as a new section:

This would include layout properties like padding and item spacing. However, to incorporate moded variation across Layout and Spacing depictions, it'd need to show at every level of nesting where it's encountered (and thus show those visual annotation overlays for each mode). I could see that as a followup enhancement, but am inclined to release the Modes section as it more imminently. Thoughts?

[diehendrick]

Hi, @nathanacurtis . thanks! for the update. I think is good your idea. actually I have an idea about this too. what if you could make and simplify as part of layout and spacing section documentation. for example I have two options that I would like to purpose :

if in the component has multiple variables connected such as colors, we can make the same thing. is it doable to make it happen?

[nathanacurtis]

@diehendrick I really appreciate you putting together these exhibits. That helps me understand what you are looking for.

A few complicating factors:

• Layout is associated with a node (layer), not a component
• One node can vary across 2+ variable collections (such as a Space collection, a Shape collection, and a Color collection)

As a result, a Button (often with two layers: text + icon autolayout'ed in a containing layer) is an exceedingly simple case. Imagine a Card component with layers that go 5–6 levels deep, each node at each level of layer hierarchy having the potential to vary across 2+ nodes. The result could be a Layout and spacing (or Modes) set of exhibits that count in the 10s or even 100s. The plugin has to be ready for such ... diversity. :)

I do think in practice that "not that many layers" vary Space and Shape, even if this becomes less true over time as designers adapt to and exploit the space control we now have. As a result, I'm going to continue thinking about what can be done to solve for this issue, with my main focus being "As a designer, I want to see how spacing/padding varies by layer based on changes in props and/or modes, and display those variations in the Layout and spacing section." However, I'm not confident a change will be imminent given other plugin priorities.

Thanks again!

[nathanacurtis]

@diehendrick The plugin now automates detecting varying layouts across property variants. Across modes is something I'd still need to implement, but there's probably a more direct path to that now.