mui / mui-design-kits Goto Github PK
View Code? Open in Web Editor NEWThe public feature and bug tracker for the MUI Design kits and Connect Figma plugin.
Home Page: https://mui.com/design-kits/
The public feature and bug tracker for the MUI Design kits and Connect Figma plugin.
Home Page: https://mui.com/design-kits/
I'm creating this issue as it seems to be growing in terms of demand from our Figma kit users. It's about step 3 of #10 (comment), where #10 focuses on step 1.
I have started keeping track of this early 2022:
Its good, but im also interested how you to export it to react? That is very important for beginner's as well. Simple do some page and show us conversion pls..
It's possible to export the design generated with the Figma tool as React code?
Can we designer give developers a Figma prototype with MUI components and they can download the code of each component? How does this work? Can we see a demo for this?
Is there any way to export from Figma and get the output to be React Web code that imports and utilizes the actual MUI components instead of creating react components?
"How easy would this be to export to React with something like Anima?"
https://www.youtube.com/watch?v=hCGiyI_NmRY question by Sebastian
"We subscribed for the purpose of converting MUI Figma Design to React Code"
One of our designers has experienced a high memory usage alert in Figma.
The entire library does feel a bit laggy on an 8GB machine like an MBP 13 2018. Seems like it takes 2.8GB of RAM when having just the MUI for Figma opened. If users have multiple tabs opened it might cause problems.
Close other Figma files when working inside the library.
v5.2.0
https://mui.zendesk.com/agent/tickets/1247
It would be wonderful for you to add separate type scales and components for different breakpoints/screen sizes eg. Mobile, Tablet, and not just desktop.
The breakpoints you use in your design system are good to see, however, I was referring to having a dedicated mobile, tablet, and desktop type scale and components/assets designed to be used at these breakpoints/screen sizes. In your Figma file, the type scale is just for desktop and most of the components are designed at a single size, not at multiple breakpoint sizes.
https://mui.zendesk.com/agent/tickets/1408
I am working on a mobile-first project and not on an app project. I was wondering if the components are only designed for app purposes or are they responsive to create desktop versions of my screen?
v5.0.0
sometimes there are too many layers which makes adobe XD hang.
I'm using it on the latest macOS powerful desktop, the file keeps loading and freezing all the time, especially when copying and pasting between different projects (files), maybe it's XD itself
The kit can still be slow to respond in Adobe XD on a new Macbook Pro.
James - https://store-wp.mui.com/wp-admin/comment.php?action=editcomment&c=164102
Every time I make a change, XD will hang for several minutes, and sometimes doesn't come back.
@adrianmanea thoughts on the issue:
Regarding this issue, I'm thinking to "fork" the main document and remove most states, strip out the not-so-necessary components, and basically have a light version alternative. The maintenance will be a bit tricky but we plan to hire another designer to take more responsibilities.
v4.13.0
While the MUI Studio team was conducting interviews, a user mentioned that having one Figma file for light mode and another for dark is cumbersome as it demands a duplicated effort to update the other once one has been changed. I'm sure there are benefits to having them separated, especially related to performance given that the file could get considerably larger, but have we considered the option of merging it? I suppose it would be way easier to design with both modes at the same place.
https://www.figma.com/file/cfH79wJ7c6WSioSmuweHzF/MUI-for-Figma-v5.0.0-(Light)?node-id=6706%3A38914
v5.0.0
https://mui.com/components/date-picker/
https://material.io/components/date-pickers#mobile-pickers
v5.0.0
We got this review:
The quality of the library is good but i must admit it was more easy to work with version 4. Within version 5 you are missing the cards. Are they comming back?
@software-vision.com
Should we do something about it?
While the second row of the example looks great, the first one looks weird. I would have expected the usage of the dotted variant https://mui.com/components/badges/#dot-badge
version: v5.0.0
I can count:
document.querySelectorAll('.material-icons-outlined').length
on October 16th, 2021
cc @hbjORbj for context that recently worked on this.
v5.0.0
https://mui.zendesk.com/agent/tickets/1289
The material 2014 color palette, which I found helpful were only listed on a frame, rather than being actual color styles.
v5.0.0
We got the feedback multiple times, no it's not a preview file.
v5.0.0
This is similar to https://material.io/design/interaction/states.html#focus.
The Figma assets account for all aspects of Accessibility, including keyboard focus states. The Material UI Library I purchased from you does not have these.
https://mui.zendesk.com/agent/tickets/1146
v5.0.0
While we don't have any React charts components in MUI X yet, there is a nonnegligible chance that we will get to it.
Related to mui/mui-x#1408 and https://www.notion.so/mui-org/Charts-component-3e93ffb9a40349e6a1b39ec34fce0775
I'm creating this issue as it seems to be growing in terms of demand from our Figma kit users. It's about step 2 of #10 (comment).
theme.components
structure between Figma and React.We might need to split this GitHub issue in two. The React -> Figma
and Figma -> React
workflows might be very different.
Gerda in our team looking for using the design system that the engineering are using inside Figma.
Is there an easy way to copy the styles from an older version of this template to the newer version? I took quite a bit of time to get all our styles in v5.4.
https://www.figma.com/community/file/912837788133317724?comment=1139582455253158228
Hi! I am looking for a product that would allow the following workflow:
- Designers customize the components as they please in Adobe
- They export the results of their work to some repository
- We (developers) import this repository in our React app and just use it without getting into the component styles
- We build an application and it runs in production
Does your MUI + Adobe XD comply with this flow?
I guess that interactive components can be particularly interesting for checkboxes/switches.
sometime soon?
https://mui.zendesk.com/agent/tickets/1460
Is this something that your team plans to include?
https://mui.zendesk.com/agent/tickets/1528
a prototype of Material UI components (the difference in state on hover, click) instead of static designs.
We could do the same that we did with Figma in https://www.figma.com/community/file/912837788133317724.
We cover MUI in Figma with a design component kit. However, there is recurring feedback from people who are asking for design templates too. I think that having the MUI components in Figma is a great step but this is most beneficial to experience designers who need flexibility. The teams without a designer could still struggle to create pages that feel & look great. Designers that are whiling to rely on pre-designed standard screens could still benefit from templates to take shortcuts.
We could create dedicated documentation under https://mui.com/design-kits/sketch/.
A list of frequently asked questions that we could probably cover:
Sketch doesn't provide great mechanisms to handle updates. Ironically, some of the future work we plan for the Sketch library is around this specific pain: make updates easier.
Up until now, it works as follows. We avoid changing the existing symbols. The previous updates of the Sketch kit were mainly about adding new symbols. This has limited the pain around processing updates. When a new update is available, we send an email to notify you. You login into the store and download the new Sketch version. Then, you can link the new Sketch version of the kit as a library. When the symbols are used, you should get a "Library updates available" message button in Sketch and an "Update Components", for each symbol update.
https://www.abstract.com/ could help with this problem.
In https://mui.com/api/slider/, the size is small or medium (default), but in Adobe XD, we say "large".
version: v5.0.0
When I export tokens (in JSON format) from official Figma File and create theme file based on those tokens using TypeScript, TS is warning me about not supported colors.
The JSON file is not prepared to be used directly, so I built a tool to generate the theme file to match the default theme structure but I see that there are colors that are not present both in that structure nor on the Palette interface.
The colors in tokens I am talking about are:
{
"color": {
"other": {
"divider": {
"description": "Divider fill color",
"type": "color",
"value": "#0000001f"
},
"outlined border": {
"description": "Border style for outlined variant components in resting state (Text Field, Select, Chips, etc)",
"type": "color",
"value": "#0000003b"
},
"backdrop overlay": {
"description": "Backdrop overlay style",
"type": "color",
"value": "#00000080"
},
"filled input background": {
"description": null,
"type": "color",
"value": "#00000017"
},
"standard input line": {
"description": "Border style for standard variant Text Field & Select",
"type": "color",
"value": "#0000006b"
},
"snackbar": {
"description": "Snackbar background color",
"type": "color",
"value": "#323232ff"
},
"rating active": {
"description": "Active state color for Rating component",
"type": "color",
"value": "#ffb400ff"
}
}
}
}
[this is just a part of the whole JSON file]
They are nothing like any other colors, such as Primary
with its properties (that I can use to create theme color that matches the interface):
"primary": {
"main": {
"description": "Main color used by most components",
"type": "color",
"value": "#3f51b5ff"
},
"dark": {
"description": "Alternative dark shade",
"type": "color",
"value": "#303f9fff"
},
"light": {
"description": "Alternative light shade",
"type": "color",
"value": "#7986cbff"
},
"contrast": {
"description": "Color that keeps a contrast ratio above AA when XX.main is used as a bg. color",
"type": "color",
"value": "#ffffffff"
},
"states": {
"outlined resting border": {
"description": "Used for outlined variant components in resting state. E.g Buttons, Chips, etc",
"type": "color",
"value": "#3f51b580"
},
"outlined hover background": {
"description": "Fill background color for outlined & text variant components in hover state (Button, etc)",
"type": "color",
"value": "#3f51b514"
},
"contained hover background": {
"0": {
"type": "color",
"value": "#3f51b5ff"
},
"1": {
"type": "color",
"value": "#0000004d"
},
"description": "Fill background for contained variant components in hover state."
}
}
}
so I can't simply extend the palette and add them as new colors.
The only color from the other
which exists on the Palette interface is divider
and that color can be easily used. I have no idea what to do about the rest.
Point worth mentioning is that they (other
colors) come from the official Figma file, and are not custom made.
I would expect a clear resemblance of the Theme type in Figma file (and/or vice versa). For example:
other
property in JSON tokens should not be present but should be reflecting Theme interface;Compare color.other
with Palette interface.
What I try to do is to have an automated way of creating theme files based on tokens exported from Figma file.
System:
OS: macOS 11.6
Binaries:
Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
Yarn: Not Found
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
Browsers:
Chrome: 94.0.4606.81
Edge: Not Found
Firefox: 93.0
Safari: 15.0
npmPackages:
@emotion/react: ^11.5.0 => 11.5.0
@emotion/styled: ^11.3.0 => 11.3.0
@mui/core: 5.0.0-alpha.51
@mui/material: ^5.0.4 => 5.0.4
@mui/private-theming: 5.0.1
@mui/styled-engine: 5.0.1
@mui/system: 5.0.4
@mui/types: 7.0.0
@mui/utils: 5.0.1
@types/react: 17.0.3 => 17.0.3
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
styled-components: 5.2.1 => 5.2.1
typescript: ~4.2.4 => 4.2.4
https://www.figma.com/file/cfH79wJ7c6WSioSmuweHzF/MUI-for-Figma-v5.0.0-(Light)?node-id=6706%3A38914
It makes me wonder if we should display the line-height too.
v5.0.0
We could create a Figma plugin to sync the configuration with a theme.js
file.
https://www.figma.com/community/plugin/797015796747379907/theme-ui
A first prototype was done at https://github.com/mui/hackathon-figma-plugin.
This could allow us to make the current Figma file free for the community while selling a subscription (to keep sustaining the effort). The subscription would be for using this plugin and growing into a more advanced suite of plugins to reduce the gaps between code and design.
I tried to use GH discussions, but the required category dropdown was broken.... so here I am :)
Hi - I wanted to ask the community, what is the best way you have found to deliver mockups for interfaces built using material-ui to your development team? We recently had a retrospective and this was a topic that came up. We need more clear communication of the user interfaces, but w/o crazy overhead or bringing in a designer every time.
What have you found that works? What have you found that doesn't work?
Curious to learn how others are addressing this.
Thanks!
List Item, Text Only variant not adjusting its padding if nesting level is changed
The weird thing is that the rest of the components work fine with the same text properties so this must be a Sketch bug. The simple solution is to just copy and paste a text style from other components.
The feedback was left by a customer without more details. To investigate (thalesdigital.io)
v4.13.0
It's scheduled for the end of the month. People to notify https://material-ui.zendesk.com/agent/tickets/1503.
Add a spacer component with pre-defined widths and heights.
Should we replace the paddings with spacers? Or just use them in layouts.
IBM Carbon Design System (https://www.figma.com/file/kbaAuFUvEWhoPLWIersWf9/IBM-Carbon-Design-System-(Community)?node-id=0%3A4149)
The "enabled" state has a couple of issues:
This was first reported in https://mui.zendesk.com/agent/tickets/1882 by Joshaven.
I recorded a screencast of a bug related to the positioning of the component states with MUI 5.0.0 for XD. Please have the developer preview. As far as I can tell, All select elements are affected in light and dark themes.
Version: v5.0.0
We could create dedicated documentation under https://mui.com/figma/getting-started/. For now, it's a redirection to https://mui.com/material-ui/design-resources/material-ui-for-figma/ but this should be owned in this repository. Figma is a distraction for the components team.
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.
For example, https://mui.com/components/material-icons/?query=rocket&selected=Rocket is not available in the Figma icons set.
v5.0.1
The Figma file "MUI for Figma v5.0.0" doesn't contain the AvatarGroup
layout of the Avatar component.
The Figma file has lots of variants, but if I want to represent an Avatar Group layout, I'll have to build it myself.
The Figma file would contain the Avatar Group layout so I wouldn't have to make it myself.
Steps:
I want to deliver specs to my engineers that are 100% correct. If I have to make the component on my own, I may get it wrong. I also want to save time.
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
The selected state doesn't exist: https://mui.com/components/button-group/
v4.13.0
Just purchased the fig design components. I added a dialog component to layout a new dialog. When i resize the height of the dialog the actions don't move to the bottom. What am i missing?
Hey there π , I love the foundations you have set with version 5 of MUI and the figma file!
For the Paper component in figma, we had to add some more variants to match the settings for the component (https://mui.com/components/paper/). I understand adding all the variations might be tedious, but one that was missing that I think would be useful to add to the file itself is the state where paper can have an elevation of 0 and no outline.
It would be great to add coverage for:
A list of user feedback:
I bought it large because, I needed the datatables & tables. So, I was a bit dissapoinet that it was not so ellaborate in terms of features and reponsive. Like the prints, filter features are all missing.
Otherwise, seems like a good purchase.
however, there is no data grid pro page - only data grid. can you please add this?
why is the data grid pro not available?
The user feedback, from an exigent user (Senior Designer at Coursera) https://mui.zendesk.com/agent/tickets/1146
We expect our Figma components to be created in such a way so that the nesting of objects in the hierarchical tree on the left (see image) matches the code and our API's.
I know that it's highly unlikely that your components will match what we do 100%, but I wondered if they might be a good start or a close-ish match. They weren't really, so they aren't really a good starting point for us.
v5.0.0
Originally posted by warikoo November 14, 2021
Just purchased the fig design components. I added a dialog component to layout a new dialog. When i resize the height of the dialog the actions don't move to the bottom. What am i missing?
I didn't see anyone ask for it yet, so it's likely not a high priority.
v4.13.0
https://www.figma.com/file/cfH79wJ7c6WSioSmuweHzF/MUI-for-Figma-v5.0.0-(Light)?node-id=6736%3A47533
v5.0.0
The production Menu component offers several features which are absent in the Figma design file.
The Figma Menu component only supports the default size, it also only has an option to display an icon on the left.
The Figma menu component should support the dense prop in addition to the default size. It should also include an option to display items on the right, as shown in the documentation. Wouldn't hurt to also include a selected state in addition to the resting and default states.
Also, nitpick: the size and padding of the icon included in the Figma file appears to be different than production. Could be wrong here. Prod seems to show a 20x20 icon with 0 padding. Figma displays a 24x24 icon.
Open the latest Figma file.
I want to provide perfect specs to my engineers. I also want to modify components, which requires a perfect understanding of how the component is set up.
5.0.0
The app bar has multiple variants, based on the screen width, however, we call them Size: Mobile | Web
. For instance:
https://www.figma.com/file/cfH79wJ7c6WSioSmuweHzF/MUI-for-Figma-v5.0.0-(Light)?node-id=6583%3A46318
IMHO, this doesn't make sense. "Web" is too broad, it could be a mobile web version.
Also, "Size" could be confused with a prop of the React component, it's not.
Maybe this would be clearer? breakpoint: xs (phone) | sm (tablet)
Related to #5.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.