005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
31 lines
1.7 KiB
Markdown
31 lines
1.7 KiB
Markdown
# Design resources
|
||
|
||
<p class="description">Be more efficient designing and developing with the same library.</p>
|
||
|
||
## Design Kits
|
||
|
||
Material UI component designs are available for Figma and Sketch, providing accurate representations using shared terminology for all states, variants, and permutations of each component.
|
||
|
||
The design kits are composed of over 1,500 unique elements built to speed up the development process and ease communication for teams of designers and developers using the library.
|
||
|
||
{{"component": "modules/components/MaterialUIDesignResources.js"}}
|
||
|
||
## Material UI Sync Figma plugin
|
||
|
||
Sync is a Figma plugin to help bridge the gap between designers and developers using Material UI.
|
||
|
||
It generates a theme file that you can add to your codebase with all the design tokens and component customizations from Figma.
|
||
You can quickly preview all of the changes through an embedded Storybook panel directly in the plugin interface.
|
||
|
||
Sync is currently in beta and [available for free](https://www.figma.com/community/plugin/1336346114713490235/material-ui-sync) in the Figma Community.
|
||
You can also head over to [the Sync documentation page](/material-ui/design-resources/material-ui-sync/) to learn more.
|
||
|
||
<img src="/static/material-ui/design-resources/sync.png" style="width: 814px;" alt="Customizing the Material UI Switch component in Figma with the Sync plugin running." width="1628" height="400" />
|
||
|
||
## Third-party resources
|
||
|
||
### UXPin
|
||
|
||
[Material UI for UXPin](https://www.uxpin.com/merge/mui-library): A large UI kit of Material UI components.
|
||
The design tool renders the components in a web runtime. It uses the same React implementation as your production environment.
|