Comments (7)
I don't get it, the React Stack component is meant to replicate this feature:
of Figma.
from mui-design-kits.
@Nicktho Did you find a solution to your problem?
from mui-design-kits.
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.
from mui-design-kits.
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.
from mui-design-kits.
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.
from mui-design-kits.
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
from mui-design-kits.
Solved this in the v5.9.0 updates!
from mui-design-kits.
Related Issues (20)
- You have a new comment on Material UI for Figma (and MUI X) by Raymond
- You have a new comment on Material UI for Figma (and MUI X) by Raymond HOT 1
- [question] The Sync Plugin for the Community Figma file does not recognize changes to Switch component
- [question] HOT 2
- You have a new comment on Material UI for Figma (and MUI X) by Fraser HOT 1
- You have a new comment on Material UI for Figma (and MUI X) by Raymond
- Theme variables for MUI5 differ in Figma compared to what is in the package HOT 4
- [question] Select component dropdown/menu items HOT 1
- You have a new comment on Material UI for Figma (and MUI X) by Juan Cruz Hernandez HOT 1
- I can't import MUI .fig file into Figma. "Unsupported file format" [question] HOT 10
- Component of Text area: Comment box not in Figma HOT 1
- [sync] theme contrast instead of contrastText when exported using Material UI Sync
- Material UI Sync Stuck on "Generating Theme"
- [Material UI][Icons] Different shapes in the same icons (rotate_90_degrees_ccw and rotate_90_degrees_cw) HOT 4
- You have a new comment on Material UI for Figma (and MUI X) by Anthony HOT 1
- [sync] `_states` does not exist in type `PaletteColorOptions & Partial<PaletteColorChannel>` HOT 4
- You have a new comment on Material UI for Figma (and MUI X) by Javier HOT 1
- You have a new comment on Material UI for Figma (and MUI X) by Samson Eriksen HOT 1
- You have a new comment on Material UI for Figma (and MUI X) by Samson Eriksen HOT 1
- How to resize pie chart? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-design-kits.