[figma] Layout components / Primitives

[Nicktho]

We've been playing around with the figma file and our own solutions to try and implement the ideas from components such as https://mui.com/components/stack/ and the system in general.

We haven't quite nailed it yet, and would love to see an example or two of a complete layout using the figma components that somehow adheres to the system so that designers and developers can align on the design tokens and their settings, especially when it comes to spacing.

[oliviertassinari]

I don't get it, the React Stack component is meant to replicate this feature:

of Figma.

[oliviertassinari]

@Nicktho Did you find a solution to your problem?

[Nicktho]

Hey @oliviertassinari, sorry to just close this on you. Auto Layout does implement the main features of Stack that we were looking for, albeit due to limitations of figma we can't force the use of spacing tokens.

In my ideal workflow I would have a Stack figma-component, with spacing set as variants, but it appears that components cannot accept generic children, so you end up needing to detach the frame from the component anyway.

Similar problems arise with Box, you just have to be super careful in figma to only use agreed upon design tokens that are shared between the system and mui / code, as you can't seem to make a generic Box component and rely on variants for it, due to the same problem above with generic children in figma components.

So TLDR, yes we solved it with manual process rather than tooling.

[oliviertassinari]

we can't force the use of spacing tokens

@Nicktho This is a great point. Maybe we could expose a Space component like done in https://uxdesign.cc/how-to-manage-space-in-figma-using-tokens-8d0ebd99ee1b as a workaround for the lack of the Stack component. We actually have the same discussion for React: mui/material-ui#30506.

[Nicktho]

Interesting article. And also interesting you are discussing for react too. In my mind, I modeled this in react using Stacks rather than a component purely for space.

So, to achieve something like

<Typography>Hello World</Typography>
<Space y={1} />
<Typography>A New Line</Typography>
<Space y={2} />
<Typography>Another Line</Typography>

You would use stacks

<Stack spacing={1}>
  <Typography>Hello World</Typography>
  <Stack spacing={2}>
    <Typography>A New Line</Typography>
    <Typography>Another Line</Typography>
  </Stack>
</Stack>

But yeah, until figma supports generic children in components something like this isn't possible with their variants. Adding a spacing component could help though!

I think overall an example of a few fleshed out screens using auto layout and the current mui design system in figma would go a long way.

[adrianmanea]

Interesting suggestion, @Nicktho having a component Spacing which has different levels of widths that acts as spacing (8, 16, 24, etc) that users can use in their Grids. Alternatively, we tried to communicate the spacings to users through a Layout component, https://www.figma.com/file/n7JwXE0hDtjetTmTZ8oaRL/?node-id=7556%3A51279

[adrianmanea]

Solved this in the v5.9.0 updates!