search

mui / mui-design-kits

The public feature and bug tracker for the MUI Design kits and Connect Figma plugin.
https://mui.com/design-kits/
109 stars 16 forks source link

[RFC] Storybook #104

Open frassinier opened 2 years ago

frassinier commented 2 years ago

What's the problem? 🤔

MUI Design kits are a well-shaped Figma library, but there is no link to the codebase or at least a showcase version using MUI for real. If you want to implement a new MUI theme, you have to double down your efforts.

What are the requirements? ❓

Use this bug tracker to bootstrap an exhaustive showcase, using Storybook, that depends on a specific MUI major version.

What are our options? 💡

It could be nice to map each Figma frame to a story (using Storybook) that everyone can reuse out of the box to ensure that what you see (with Figma) is what you get (with React)!

Proposed solution 🟢

Using a 1:1 mapping between Figma and React components, you can ensure automated visual non-regression, on a daily basis.

What do you guys think?

Relevant resources/benchmarks 🔗

oliviertassinari commented 2 years ago

The pain point this RFC aims to solve seems to match with #44 The problem considered there is: How to empower designers more while saving time for engineers? It's about Figma as the source of truth to generate a theme for a design system.

The solution proposed feels a bit related to https://github.com/mui/material-ui/issues/21111.

automated visual non-regression

It could be done with https://www.argos-ci.com/ for almost no fees.

on a daily basis.

You could generate a Material UI theme from https://mui.com/store/items/figma-react/ with https://quest.ai/, and run the visual regression tests for each of the changes.

frassinier commented 2 years ago

That's interesting, thank you Olivier! TIL

But how do you ensure that the MUI kit from Figma is faithful enough to be used the same way with Figma or React, using the same language, props or ability to compose with each element?

The final objective is not to get an "exhaustive" MUI design system but to have the same toolkits between Figma and React, instead.