mui · danilo-leal · May 1, 2024 · Apr 29, 2024
diff --git a/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md b/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md
@@ -79,8 +79,8 @@ The video below shows how to add new columns by copying cells directly on the ma
 
 ## Code sync
 
-You can export theme tokens and component customizations to code using [the Connect plugin for Figma](/material-ui/design-resources/connect/).
-Material UI for Figma has been built to be as close to the React components as possible, making it for a fluid integration with code.
+You can export theme tokens and component customizations to code using [the Sync plugin for Figma](/material-ui/design-resources/material-ui-sync/).
+The Design Kit has been built to be as close to the React components as possible, making it for a fluid integration with code.
 
 Learn more about the Material UI theme structure by visiting the [Theming](https://mui.com/material-ui/customization/theming/) and [Default theme viewer](https://mui.com/material-ui/customization/theming/) pages.
 

diff --git a/...erial/design-resources/connect/connect.md → ...rces/material-ui-sync/material-ui-sync.md b/...erial/design-resources/connect/connect.md → ...rces/material-ui-sync/material-ui-sync.md
@@ -1,25 +1,25 @@
-# Connect plugin
+# Material UI Sync plugin
 
-<p class="description">Connect is a Figma plugin that generates Material UI themes directly from design to code.</p>
+<p class="description">Sync is a Figma plugin that generates Material UI themes directly from design to code.</p>
 
 ## 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.
 :::
 
-<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="Customizing the Material UI Switch component in Figma with the Connect plugin running." width="1628" height="400" />
+<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" />
 
 ## 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.
 
-<img src="/static/material-ui/design-resources/connect-access.png" style="width: 814px;" alt="Accessing Connect via the Resources menu in Figma." width="1628" height="400" />
+<img src="/static/material-ui/design-resources/sync-access.png" style="width: 814px;" alt="Accessing Material UI Sync via the Resources menu in Figma." width="1628" height="400" />
 
 ## 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.
 
-<img src="/static/material-ui/design-resources/connect-variables.png" style="width: 814px; margin-bottom: 8px;" alt="The Local variables menu in Figma, where all design tokens are stored and new ones can be added." width="1628" height="400" />
+<img src="/static/material-ui/design-resources/sync-variables.png" style="width: 814px; margin-bottom: 8px;" alt="The Local variables menu in Figma, where all design tokens are stored and new ones can be added." width="1628" height="400" />
 
-Then open the Connect plugin and click on **Generate theme**.
+Then open the Material UI Sync plugin and click on **Generate theme**.
 
-<img src="/static/material-ui/design-resources/connect-generate.png" style="width: 814px; margin-bottom: 8px;" alt="The Generate theme button in the Connect plugin UI." width="1628" height="400" />
+<img src="/static/material-ui/design-resources/sync-generate.png" style="width: 814px; margin-bottom: 8px;" alt="The Generate theme button in the Material UI Sync plugin UI." width="1628" height="400" />
 
 A theme containing the altered tokens is generated and displayed in the plugin's Theme tab.
 
-<img src="/static/material-ui/design-resources/connect-code-editor.png" style="width: 814px; margin-bottom: 8px;" alt="The generated theme displayed in the Connect plugin UI." width="1628" height="400" />
+<img src="/static/material-ui/design-resources/sync-code-editor.png" style="width: 814px; margin-bottom: 8px;" alt="The generated theme displayed in the Material UI Sync plugin UI." width="1628" height="400" />
 
 You can also preview the generated theme and the customized tokens by navigating to the Storybook preview tab.
 
-<img src="/static/material-ui/design-resources/connect-storybook.png" style="width: 814px" alt="The generated theme previewed in Storybook in the Connect plugin UI." width="1628" height="400" />
+<img src="/static/material-ui/design-resources/sync-storybook.png" style="width: 814px" alt="The generated theme previewed in Storybook in the Material UI Sync plugin UI." width="1628" height="400" />
 
 ### 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.
 
-<img src="/static/material-ui/design-resources/connect-regenerate.png" style="width: 814px" alt="The Regenerate button in the Connect plugin UI." width="1628" height="400" />
+<img src="/static/material-ui/design-resources/sync-regenerate.png" style="width: 814px" alt="The Regenerate button in the Connect plugin UI." width="1628" height="400" />
 
 ## 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:
+
+<img src="/static/material-ui/design-resources/sync-component-variant.png" style="width: 814px; margin-bottom: 8px;" alt="A specific variant of the Switch component selected in the Design Kit." width="1628" height="400" />
 
 :::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.
 :::
 
-<img src="/static/material-ui/design-resources/connect-component-variant.png" style="width: 814px; margin-bottom: 8px;" alt="A specific variant of the Switch component selected in the Design Kit." width="1628" height="400" />
-
-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:
 
-<img src="/static/material-ui/design-resources/connect-switch-component-customized.png" style="width: 814px; margin-bottom: 8px;" alt="A fully customized Switch component in the Material UI Design Kit." width="1628" height="400" />
+<img src="/static/material-ui/design-resources/sync-switch-component-customized.png" style="width: 814px; margin-bottom: 8px;" alt="A fully customized Switch component in the Material UI Design Kit." width="1628" height="400" />
 
-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.
 
-<img src="/static/material-ui/design-resources/connect-switch-component-customized-storybook.png" style="width: 814px" alt="A fully customized Switch component in Storybook." width="1628" height="400" />
+<img src="/static/material-ui/design-resources/sync-switch-component-customized-storybook.png" style="width: 814px" alt="A fully customized Switch component in Storybook." width="1628" height="400" />
 
 ## 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
@@ -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.
 
-<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="Customizing the Material UI Switch component in Figma with the Connect plugin running." width="1628" height="400" />
+<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
 

diff --git 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
@@ -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 → docs/pages/blog/introducing-sync-plugin.js b/docs/pages/blog/introducing-connect.js → 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 <TopLayoutBlog docs={docs} />;

diff --git a/docs/pages/blog/introducing-connect.md → docs/pages/blog/introducing-sync-plugin.md b/docs/pages/blog/introducing-connect.md → docs/pages/blog/introducing-sync-plugin.md
@@ -1,9 +1,9 @@
 ---
-title: 'Introducing Connect: a Figma plugin that exports Material UI code'
-description: Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit.
-date: 2024-04-16T00:00:00.000Z
+title: 'Introducing Sync: a Figma plugin that exports Material UI theme code'
+description: Enable designers to generate production-ready code directly from the Material UI Figma Design Kit.
+date: 2024-04-30T00:00:00.000Z
 authors: ['danilo-leal', 'DavidCnoops']
-tags: ['Connect', 'Material UI', 'Product']
+tags: ['Material UI', 'Product']
 manualCard: true
 ---
 
@@ -14,32 +14,32 @@
 That got us thinking:
 What if designers could generate production-ready code directly from their design software to hand off to developers working with a Material UI codebase?
 
-That's why we created Connect, a Figma plugin for generating styles that can be copied and pasted straight into your Material UI app's theme.
-We're happy to share that the beta version is [available now on Figma](https://www.figma.com/community/plugin/1336346114713490235/connect). 🚀
+That's why we created Sync, a Figma plugin for generating styles that can be copied and pasted straight into your Material UI app's theme.
+We're happy to share that the beta version is [available now on Figma](https://www.figma.com/community/plugin/1336346114713490235/material-ui-sync). 🚀
 
-<img src="/static/blog/introducing-connect/card.png" alt="Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit." width="1280" height="640" />
+<img src="/static/blog/introducing-sync-plugin/card.png" alt="Material UI Sync is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit." width="1280" height="640" />
 
 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.)
 
 <video preload="metadata" controls muted loop playsinline width="1584" height="1080">
-  <source src="/static/blog/introducing-connect/theme-customization.mp4" type="video/mp4">
+  <source src="/static/blog/introducing-sync-plugin/sync-theme.mp4" type="video/mp4">
 </video>
 
-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
 
 You can fully customize a component's appearance across multiple states in the Design Kit and then generate the corresponding theme code.
 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.
 
 <video preload="metadata" controls muted loop playsinline width="1584" height="1080">
-  <source src="/static/blog/introducing-connect/custom-component.mp4" type="video/mp4">
+  <source src="/static/blog/introducing-sync-plugin/sync-component.mp4" type="video/mp4">
 </video>
 
 :::warning
@@ -50,19 +50,19 @@
 
 ## 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.
 
 <video preload="metadata" autoplay muted loop playsinline width="1584" height="1080">
-  <source src="/static/blog/introducing-connect/storybook.mp4" type="video/mp4">
+  <source src="/static/blog/introducing-sync-plugin/sync-storybook.mp4" type="video/mp4">
 </video>
 
-## 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/...s/material-ui/design-resources/connect.js → ...l-ui/design-resources/material-ui-sync.js b/...s/material-ui/design-resources/connect.js → ...l-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 <MarkdownDocs {...pageProps} />;

diff --git a/docs/public/static/blog/introducing-connect/card.png b/docs/public/static/blog/introducing-connect/card.png
diff --git a/docs/public/static/blog/introducing-connect/custom-component.mp4 b/docs/public/static/blog/introducing-connect/custom-component.mp4
diff --git a/docs/public/static/blog/introducing-connect/storybook.mp4 b/docs/public/static/blog/introducing-connect/storybook.mp4
diff --git a/docs/public/static/blog/introducing-connect/theme-customization.mp4 b/docs/public/static/blog/introducing-connect/theme-customization.mp4
diff --git a/docs/public/static/blog/introducing-sync-plugin/card.png b/docs/public/static/blog/introducing-sync-plugin/card.png
diff --git a/docs/public/static/blog/introducing-sync-plugin/sync-component.mp4 b/docs/public/static/blog/introducing-sync-plugin/sync-component.mp4
diff --git a/docs/public/static/blog/introducing-sync-plugin/sync-storybook.mp4 b/docs/public/static/blog/introducing-sync-plugin/sync-storybook.mp4
diff --git a/docs/public/static/blog/introducing-sync-plugin/sync-theme.mp4 b/docs/public/static/blog/introducing-sync-plugin/sync-theme.mp4
diff --git a/docs/public/static/material-ui/design-resources/connect-access.png b/docs/public/static/material-ui/design-resources/connect-access.png
diff --git a/docs/public/static/material-ui/design-resources/connect-code-editor.png b/docs/public/static/material-ui/design-resources/connect-code-editor.png
diff --git a/docs/public/static/material-ui/design-resources/connect-generate.png b/docs/public/static/material-ui/design-resources/connect-generate.png
diff --git a/docs/public/static/material-ui/design-resources/connect-regenerate.png b/docs/public/static/material-ui/design-resources/connect-regenerate.png
diff --git a/docs/public/static/material-ui/design-resources/connect-storybook.png b/docs/public/static/material-ui/design-resources/connect-storybook.png
diff --git a/.../material-ui/design-resources/connect-switch-component-customized-storybook.png b/.../material-ui/design-resources/connect-switch-component-customized-storybook.png
diff --git a/docs/public/static/material-ui/design-resources/connect.png b/docs/public/static/material-ui/design-resources/connect.png
diff --git a/docs/public/static/material-ui/design-resources/sync-access.png b/docs/public/static/material-ui/design-resources/sync-access.png
diff --git a/docs/public/static/material-ui/design-resources/sync-code-editor.png b/docs/public/static/material-ui/design-resources/sync-code-editor.png
diff --git a/...n-resources/connect-component-variant.png → ...sign-resources/sync-component-variant.png b/...n-resources/connect-component-variant.png → ...sign-resources/sync-component-variant.png
diff --git a/docs/public/static/material-ui/design-resources/sync-generate.png b/docs/public/static/material-ui/design-resources/sync-generate.png
diff --git a/docs/public/static/material-ui/design-resources/sync-regenerate.png b/docs/public/static/material-ui/design-resources/sync-regenerate.png
diff --git a/docs/public/static/material-ui/design-resources/sync-storybook.png b/docs/public/static/material-ui/design-resources/sync-storybook.png
diff --git a/...tic/material-ui/design-resources/sync-switch-component-customized-storybook.png b/...tic/material-ui/design-resources/sync-switch-component-customized-storybook.png
diff --git a/...s/connect-switch-component-customized.png → ...rces/sync-switch-component-customized.png b/...s/connect-switch-component-customized.png → ...rces/sync-switch-component-customized.png
diff --git a/...al-ui/design-resources/connect-switch.png → ...erial-ui/design-resources/sync-switch.png b/...al-ui/design-resources/connect-switch.png → ...erial-ui/design-resources/sync-switch.png
diff --git a/...ui/design-resources/connect-variables.png → ...al-ui/design-resources/sync-variables.png b/...ui/design-resources/connect-variables.png → ...al-ui/design-resources/sync-variables.png
diff --git a/docs/public/static/material-ui/design-resources/sync.png b/docs/public/static/material-ui/design-resources/sync.png