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.
|