update link names and pages

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.
 

docs/data/material/design-resources/connect/connect.md → docs/data/material/design-resources/material-ui-sync/material-ui-sync.md

@@ -11,15 +11,15 @@ Sync works in combination with the [Material UI for Figma Design Kit v5.16.0](h
 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 Sync 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 [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 Material UI Sync 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,35 +28,35 @@ 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 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 Material UI Sync 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 Material UI Sync 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 Material UI Sync 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
 
-Material UI Sync 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.
@@ -65,7 +65,7 @@ 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 look and feel:
 
-<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" />
+<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 Sync to correctly extract custom component styles and generate the theme.
@@ -122,7 +122,7 @@ 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" />
 
 From here you can run Sync to generate a new theme—here's what would be generated from the example above:
 
@@ -232,7 +232,7 @@ 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
 

docs/data/material/getting-started/design-resources/design-resources.md

@@ -12,15 +12,15 @@ The design kits are composed of over 1,500 unique elements built to speed up the
 
 ## Material UI Sync Figma plugin
 
-Material UI Sync 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.
 
 Sync is currently in beta and [available for free](https://www.figma.com/community/plugin/1336346114713490235/) in the Figma Community.
-Head over to [the Sync page](/material-ui/design-resources/connect/) to learn more.
+Head over to [the Sync 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 Sync 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
 

docs/data/material/pages.ts

@@ -336,8 +336,8 @@ const pages: MuiPage[] = [
         title: 'Material UI for Figma',
       },
       {
-        pathname: '/material-ui/design-resources/connect',
-        title: 'Connect plugin',
+        pathname: '/material-ui/design-resources/material-ui-sync',
+        title: 'Material UI Sync plugin',
         beta: true,
       },
     ],

docs/lib/sourcing.ts

@@ -44,7 +44,6 @@ const ALLOWED_TAGS = [
   'MUI X',
   'MUI System',
   'Toolpad',
-  'Connect',
 ];
 
 export const getAllBlogPosts = () => {

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} />;

docs/pages/blog/introducing-connect.md → docs/pages/blog/introducing-sync-plugin.md

@@ -3,7 +3,7 @@ title: 'Introducing Material UI Sync: a Figma plugin that exports code'
 description: Sync is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit.
 date: 2024-04-23T00:00:00.000Z
 authors: ['danilo-leal', 'DavidCnoops']
-tags: ['Connect', 'Material UI', 'Product']
+tags: ['Material UI', 'Product']
 manualCard: true
 ---
 
@@ -17,7 +17,7 @@ What if designers could generate production-ready code directly from their desig
 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/connect). 🚀
 
-<img src="/static/blog/introducing-connect/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" />
+<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:
 
@@ -28,18 +28,18 @@ Sync relies on these local variables to generate code corresponding to each elem
 (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/theme-customization.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/custom-component.mp4" type="video/mp4">
 </video>
 
 :::warning
@@ -53,7 +53,7 @@ For now you can experiment with the Button, Switch, and Typography.
 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/storybook.mp4" type="video/mp4">
 </video>
 
 ## Try Sync now
@@ -62,7 +62,7 @@ Get the beta version of Material UI Sync now, available for free in the [Figma
 
 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 documentation for [the Sync plugin](/material-ui/design-resources/connect/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/).
+- 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://mui-connect.canny.io/feedback).
 
 Happy designing! 👨‍🎨

docs/pages/material-ui/design-resources/connect.js → 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 <MarkdownDocs {...pageProps} />;