Connect is a Figma plugin that generates Material UI themes directly from design to code.
+Sync is a Figma plugin that generates Material UI themes directly from design to code.
## Introduction -[Connect](https://www.figma.com/community/plugin/1336346114713490235/) is a Figma plugin that lets you generate a theme from the [Material UI for Figma Design Kit](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x/). +[Material UI Sync](https://www.figma.com/community/plugin/1336346114713490235/) is a Figma plugin that lets you generate a theme from the [Material UI for Figma Design Kit](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x/). :::warning -Connect works in combination with the [Material UI for Figma Design Kit v5.16.0](https://github.com/mui/mui-design-kits/releases) and later. +Sync works in combination with the [Material UI for Figma Design Kit v5.16.0](https://github.com/mui/mui-design-kits/releases) and later. Other kits, such as the Joy UI Design Kit, are not supported yet. ::: -
+
## Running the plugin
If you don't have the [complete and latest version](/store/items/figma-react/) of the Material UI for Figma Design Kit installed, you can test the plugin by using the [Community version](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x/) instead.
-After installing and opening it in Figma, head over to the [Connect plugin page](https://www.figma.com/community/plugin/1336346114713490235/) on the Community tab and click on **Open in...** and select the Material UI for Figma Design Kit.
+After installing and opening it in Figma, head over to the [Material UI Sync plugin page](https://www.figma.com/community/plugin/1336346114713490235/) on the Community tab and click on **Open in...** and select the Material UI for Figma Design Kit.
-
+
## Customizing design tokens
@@ -28,50 +28,50 @@ Typography and shadow-related tokens are found in the [local styles collection](
### Altering existing tokens
-The Material UI for Figma Design Kit comes fully loaded with design tokens that map out to the [default theme of the Material UI React library](/material-ui/customization/default-theme/).
+The Design Kit comes fully loaded with design tokens that map out to the [default theme of the Material UI React library](/material-ui/customization/default-theme/).
To customize existing tokens, open the [local variable modal](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables) by clicking on the filter icon as shown below.
Tweak any of the variables available in the collections (such as palettes, breakpoints, shapes, and spacing) as you see fit.
-
+
-Then open the Connect plugin and click on **Generate theme**.
+Then open the Material UI Sync plugin and click on **Generate theme**.
-
+
A theme containing the altered tokens is generated and displayed in the plugin's Theme tab.
-
+
You can also preview the generated theme and the customized tokens by navigating to the Storybook preview tab.
-
+
### Adding new tokens
You can extend the existing tokens set with your own either by adding new variables to the existing local variable collections, or by adding new elevation and typography styles to the local style collections.
After you've added your custom tokens, click on **Regenerate theme** to include these tokens in your theme.
-
+
## Customizing components
-Connect can also generate theme styles for customized components, enabling you to completely change their look and feel and create your custom design system from within Figma.
+The Sync plugin can also generate theme styles for customized components, enabling you to completely change their look and feel and create your custom design system from within Figma.
:::info
This feature is currently limited to the Button, Switch, and Typography components.
Support for more components is coming soon.
:::
-As an example, here's how to customize the checked state, medium size, and primary color of a Switch component to replicate the iOS design system:
+As an example, here's how to customize the checked state, medium size, and primary color of a Switch component to replicate the iOS look and feel:
+
+
:::warning
-The Design Kit's component layer hierarchy and layer names must remain unaltered for Connect to correctly extract custom component styles and generate the theme.
+The Design Kit's component layer hierarchy and layer names must remain unaltered for Sync to correctly extract custom component styles and generate the theme.
:::
-
-
-Connect generates the following theme code for the customized Switch:
+The Sync plugin generates the following theme code for the customized Switch:
```js
{
@@ -122,10 +122,9 @@ To customize other states, you need to apply the desired design changes to each
Repeat this process for each variant you want to customize.
Here's an example of what this might look like:
-
+
-You can run Connect to generate a new theme.
-From here you can run Connect to generate a new theme—here's what would be generated from the example above:
+From here you can run Sync to generate a new theme—here's what would be generated from the example above:
```js
{
@@ -233,15 +232,15 @@ It is now [supported by all modern browsers](https://caniuse.com/css-has).
You can also check out the Storybook preview to test the Material UI version of your component.
-
+
## Using the generated theme
:::warning
-Themes generated by Connect must be used with Material UI's [`CssVarsProvider`](/material-ui/experimental-api/css-theme-variables/migration/)—the default [`ThemeProvider`](/material-ui/customization/theming/#theme-provider) is not supported.
+Themes generated by Sync must be used with Material UI's [`CssVarsProvider`](/material-ui/experimental-api/css-theme-variables/migration/)—the default [`ThemeProvider`](/material-ui/customization/theming/#theme-provider) is not supported.
:::
-Here's an example of how to add a Connect theme to your codebase:
+Here's an example of how to add a Sync-generated theme to your codebase:
```tsx title="_app.tsx"
import {
@@ -298,4 +297,4 @@ export default function MyApp({ Component, pageProps }) {
## Feedback and bug reports
-Use [the dedicated Connect feedback board](https://mui-connect.canny.io/feedback) to share feedback, report bugs, or drop feature requests.
+Use [the dedicated Material UI Sync feedback board](https://mui-connect.canny.io/feedback) to share feedback, report bugs, or drop feature requests.
diff --git a/docs/data/material/getting-started/design-resources/design-resources.md b/docs/data/material/getting-started/design-resources/design-resources.md
index 97b939668f0230..f91b3f16f1b8ee 100644
--- a/docs/data/material/getting-started/design-resources/design-resources.md
+++ b/docs/data/material/getting-started/design-resources/design-resources.md
@@ -10,17 +10,17 @@ The design kits are composed of over 1,500 unique elements built to speed up the
{{"component": "modules/components/MaterialUIDesignResources.js"}}
-## Connect Figma plugin
+## Material UI Sync Figma plugin
-Connect is a Figma plugin to help bridge the gap between designers and developers using Material UI.
+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.
-Connect is currently in beta and [available for free](https://www.figma.com/community/plugin/1336346114713490235/) in the Figma Community.
-Head over to [the Connect page](/material-ui/design-resources/connect/) to learn more.
+Sync is currently in beta and [available for free](https://www.figma.com/community/plugin/1336346114713490235/) in the Figma Community.
+You can also head over to [the Sync documentation page](/material-ui/design-resources/material-ui-sync/) to learn more.
-
+
## Third-party resources
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index e701d225ac0e8e..4235eafc7cd561 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -323,11 +323,11 @@ const pages: MuiPage[] = [
children: [
{
pathname: '/material-ui/design-resources/material-ui-for-figma',
- title: 'Material UI for Figma',
+ title: 'Figma Design Kit',
},
{
- pathname: '/material-ui/design-resources/connect',
- title: 'Connect plugin',
+ pathname: '/material-ui/design-resources/material-ui-sync',
+ title: 'Figma Sync plugin',
beta: true,
},
],
diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
index 7f4dd30bfbbe43..7ade883964584f 100644
--- a/docs/lib/sourcing.ts
+++ b/docs/lib/sourcing.ts
@@ -44,7 +44,6 @@ const ALLOWED_TAGS = [
'MUI X',
'MUI System',
'Toolpad',
- 'Connect',
];
export const getAllBlogPosts = () => {
diff --git a/docs/pages/blog/introducing-connect.js b/docs/pages/blog/introducing-sync-plugin.js
similarity index 73%
rename from docs/pages/blog/introducing-connect.js
rename to docs/pages/blog/introducing-sync-plugin.js
index 100b8643fa753f..0df1baf6886277 100644
--- a/docs/pages/blog/introducing-connect.js
+++ b/docs/pages/blog/introducing-sync-plugin.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './introducing-connect.md?muiMarkdown';
+import { docs } from './introducing-sync-plugin.md?muiMarkdown';
export default function Page() {
return 
+
Let's take a look at some of its key features:
## Theme customization
Figma's local variables significantly matured the use of design tokens, making it possible to mirror Material UI more closely.
-Connect relies on these local variables to generate code corresponding to each element and state.
+Sync relies on these local variables to generate code corresponding to each element and state.
(As such, it requires [v5.16.0 or later](https://github.com/mui/mui-design-kits/releases/tag/v5.16.0) of the Material UI Design Kit; earlier versions do not support local variables.)
-Visit the documentation to learn [how to insert the generated code into your theme file](/material-ui/design-resources/connect/#using-the-generated-theme).
+Visit the documentation to learn [how to insert the generated code into your theme file](/material-ui/design-resources/material-ui-sync/#using-the-generated-theme).
## Component customization
@@ -39,7 +39,7 @@ You can fully customize a component's appearance across multiple states in the D
This is one of the most exciting features because it enables designers to use the visual design tools they're already comfortable with to make changes to the code itself.
:::warning
@@ -50,19 +50,19 @@ For now you can experiment with the Button, Switch, and Typography.
## Quick Storybook preview
-The Connect plugin also bakes in an embedded Storybook preview panel so that you can conveniently play around with your changes and see how they interact with other props and states available in the component API.
+The Material UI Sync plugin also bakes in an embedded Storybook preview panel so that you can conveniently play around with your changes and see how they interact with other props and states available in the component API.
-## Try Connect now
+## Try Sync now
-Get the beta version of Connect now, available for free in the [Figma Community](https://www.figma.com/community/plugin/1336346114713490235/connect)!
+Get the beta version of Material UI Sync now, available for free in the [Figma Community](https://www.figma.com/community/plugin/1336346114713490235/material-ui-sync)!
There's still a lot to do, and we're looking forward to hearing from all of you [who requested this plugin years ago](https://github.com/mui/mui-design-kits/issues/10).
-- Check out further documentation for [the Connect plugin](/material-ui/design-resources/connect/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/).
-- If you've got any feedback, we'd love to [hear from you](https://mui-connect.canny.io/feedback).
+- Check out documentation for [the Sync plugin](/material-ui/design-resources/material-ui-sync/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/).
+- If you've got any feedback, we'd love to [hear from you](https://material-ui-sync.canny.io/).
Happy designing! 👨🎨
diff --git a/docs/pages/material-ui/design-resources/connect.js b/docs/pages/material-ui/design-resources/material-ui-sync.js
similarity index 82%
rename from docs/pages/material-ui/design-resources/connect.js
rename to docs/pages/material-ui/design-resources/material-ui-sync.js
index ab121664c18d87..1aed9400cb48fb 100644
--- a/docs/pages/material-ui/design-resources/connect.js
+++ b/docs/pages/material-ui/design-resources/material-ui-sync.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/material/design-resources/connect/connect.md?muiMarkdown';
+import * as pageProps from 'docs/data/material/design-resources/material-ui-sync/material-ui-sync.md?muiMarkdown';
export default function Page() {
return