[material-ui][docs] Add Connect-related content

docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md

@@ -0,0 +1,116 @@
+# Material UI for Figma
+
+<p class="description">Enhance the designer-developer working with Material UI collaboration.</p>
+
+## Getting started
+
+Material UI for Figma consists of a representation of the React component in Figma so that designers and developers can communicate and iterate more efficiently as they work with a set of seamlessly integrated tools.
+
+### Community vs. full version
+
+The Material UI design kits is available in [community (free)](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x) and [full (paid)](https://mui.com/store/items/figma-react/) versions.
+Here's what you can expect from each one of them:
+
+|                                   | Community | Full version |
+| :-------------------------------- | --------: | -----------: |
+| Components without customizations |       All |          All |
+| Components with customizations    |         4 |          All |
+| Figma variables                   |         - |           ✅ |
+
+### How to install the full version?
+
+Start by extracting the `.zip` archive containing a couple of `.fig` files.
+Then, you can either follow [Figma's import guide](https://help.figma.com/hc/en-us/articles/360041003114-Import-files-into-Figma) or [add it to your team library](https://help.figma.com/hc/en-us/articles/360041051154-Getting-Started-with-Team-Library).
+
+## Theme
+
+### When I open the local variables panel, I see only 2 values; where are the rest?
+
+When opening the local variables panel for the first time, you will see this:
+
+<!-- ![Screenshot 2023-08-08 at 01.09.47.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4f2dd392-50f8-4b25-99ef-c52815fbc803/Screenshot_2023-08-08_at_01.09.47.png) -->
+
+To access the rest of the props, navigate to the variable collections, similar to the code's `theme` structure.
+Then, follow the steps shown in the video below:
+
+### How can I customize colors?
+
+The design kit uses variables, meaning colors can only be modified from the variables panel.
+To access it, ensure you do not have any layers or frames selected, allowing you to view the global right-hand panel.
+
+<!-- [MUI for Figma v5.14.0 - Material - Changing Colors 1080p.mov](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cc45d58e-d5c4-4411-a051-e9a1001c8c72/MUI_for_Figma_v5.14.0_-_Material_-_Changing_Colors_1080p.mov) -->
+
+### How do I customize the typography?
+
+Unfortunately, variables do not yet support typography variables, but this feature is planned for the future.
+Until then, changing global styles, such as the font family, requires some effort (approximately 5 minutes).
+We have already defined everything as a style, so your only point of command is the right-hand panel.
+
+<!-- [MUI for Figma v5.14.0 - Material - Changing Typography.mov](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0f06be08-3a7d-4089-a1d0-7916c453830c/MUI_for_Figma_v5.14.0_-_Material_-_Changing_Typography.mov) -->
+
+### Switching modes (light/dark)
+
+<!-- [MUI for Figma v5.14.0 - Material - Changing Modes.mov](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2c670fba-c1f0-4636-88c3-5f0d1c33bc94/MUI_for_Figma_v5.14.0_-_Material_-_Changing_Modes.mov) -->
+
+## Code sync
+
+### Do the kits output React code?
+
+You can export the design tokens and component customizations to code if paired with [the MUI Connect Figma plugin](/material-ui/design-resources/mui-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.
+
+### How do I migrate from Design to React?
+
+The Material UI for Figma design kit components are as close as possible to the React components.
+In practice, you will find the same names, design tokens, default values, and anything contributing to reducing the gap between the two realms.
+That said, we recommend using the design tokens as much as possible to perform component customizations, as it's easier to share the values between Figma and React.
+
+:::info
+A "design token" is simply a variable that can be shared with the React implementation—for example, the font size pixels of the `body2` variant.
+:::
+
+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.
+
+## FAQ
+
+### How can I edit the master components?
+
+Master components were difficult to maintain, and it required sticking to the elements available in that master instance only, so we decided to leave the master components in favor of using a plugin called [Similayer](https://www.figma.com/community/plugin/735733267883397781/Similayer).
+
+<!-- [141292007-d545374e-ec0b-4f5e-8873-1b4ce1a89556.mov](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/eadfa8fa-f1a8-49d8-8311-64ffc144e6ab/141292007-d545374e-ec0b-4f5e-8873-1b4ce1a89556.mov) -->
+
+### Why build "Material UI for Figma" instead of using Google's Material Design Figma file?
+
+Material UI is an _independent_ React implementation of Material Design.
+It fills the gaps that Google's design have with the MUI's expertise around web development best practices.
+
+Anyone generally interested in Material Design can benefit from the Material UI for Figma library, but it is particularly great for designers who work with developers using the actual Material UI React library.
+The way the components have been structured in Figma (also considering properties and variables) is meant to closely mirror what you'd experience in the code.
+
+You should expect to see:
+
+- extra components and features that aren't covered in Material Design
+- the same UI output
+- the same terminology used between Figma and code for props, design tokens, etc.
+
+### Table component
+
+#### How do I add a new column in the table?
+
+<iframe src="https://www.loom.com/embed/6dd71cc374bc4d84af35ebb75d107d38?sid=1d3a4790-4c28-433e-94ce-97dd969601dd" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="width: 100%; height: 500px;"></iframe>
+
+#### How do I add new columns in the main component?
+
+<!-- [MUIF-5.14-Add columns_voiceover2.mov](https://prod-files-secure.s3.us-west-2.amazonaws.com/e747f181-8f1e-4455-91f8-127e5f0b8f94/f8fefcc6-5303-4dbc-99a1-c2df358d6ab6/MUIF-5.14-Add_columns_voiceover2.mov) -->
+
+## Updates
+
+### I've received an update; how can I replace one component with another?
+
+Unfortunately, Figma does not work like an npm package that we can update the dependencies of yet!
+Most of the time, we don't release breaking changes in the updates.
+We add new content. For a single component replacement, there are a couple of options:
+
+1. Add the new version of the design kit as a library and use [the new Figma library swap feature](https://www.youtube.com/watch?v=GQ2jztKpxLk). Ensure the components have the same name in the old library and the new one for this to work properly.
+2. Observe the new component and re-apply the changes to the existing projects. This is the recommended approach when having a high number of projects.
+3. Copy-paste the new component in your existing project, temporarily rename it differently (for example, "New Button"), and re-link tokens to the New Button (using [Select Similar plugins](https://www.figma.com/community/plugin/792767780551514994/Select-Similar) shouldn't take more than 5 minutes). Having this done, you can replace the old Button with the New Button.

docs/data/material/design-resources/mui-connect/mui-connect.md

@@ -0,0 +1,63 @@
+# MUI Connect plugin
+
+<p class="description">A Figma plugin that lets you generate a theme from the Material UI Design kit for Figma. </p>
+
+## Introduction
+
+MUI Connect is a Figma plugin that lets you generate a theme from the Material UI Design kit for Figma.
+You can customize both design tokens and components, generate a theme JSON, and see your changes from an embedded Storybook instance.
+
+:::warning
+The plugin is in beta and doesn't currently support customization to all Material UI components.
+:::
+
+<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="A screenshot of Figma together with the MUI Connect plug-in running on the side, doing customziations to the Material UI Switch component." width="1628" height="400" />
+
+## Running the plugin
+
+### Pre-requisites
+
+The MUI Connect Figma plugin only currently works on the Material UI Design kit.
+It doesn't support other kits, such as Joy UI, at the moment.
+
+### Basics
+
+Test the plugin by starting with [the Community version](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x).
+Then, visit the Store to get access to [the complete version](https://mui.com/r/material-ui-figma-latest/) with all of the Material UI components.
+
+Once you've installed it, go to your copy of the Material UI design kit, click on the "Resources" button, go to the "Plugins" tab, and then click on "MUI Connect".
+
+<img src="/static/material-ui/design-resources/connect-access.png" style="width: 814px;" alt="A screenshot of Figma showcasing the resources menu, which is where you'd go to access MUI Connect." width="1628" height="400" />
+
+<!-- The image above will be replaced for a better one once the plugin is actually live -->
+
+## Customizing design tokens
+
+Design tokens consist of the styles that are defined through Figma's "local variables" and "local styles" features.
+
+### Existing tokens
+
+The Material UI design kit comes fully loaded with design tokens that map out to the React library's default theme.
+MUI Connect can read all of the existing tokens in the theme.
+
+<img src="/static/material-ui/design-resources/connect-variables.png" style="width: 814px;" alt="A screenshot of Figma showcasing the locals variables menu, which is where all of the design tokens are stored and where you'd go to add new ones." width="1628" height="400" />
+
+To customize them, open the Local variables modal or one text style or shadow in the Local styles panel, and change their values.
+Then, open the plugin and click on "Generate theme".
+You should be able to see the modified tokens on the code and the Storybook preview tab.
+
+### Adding new tokens
+
+Adding new tokens to the existing category of tokens supported (such as colors, shadows, typography, etc.) is also possible.
+Ensure you add the new ones within the corresponding category and click "Generate theme" again to see them in the code and Storybook.
+
+## Customizing the components
+
+You can also customize how a component looks and generate its theme code using MUI Connect.
+Currently, the only supported Material UI components are the Button, Switch, and Typography.
+
+## Adding the theme code into your codebase
+
+## Give feedback
+
+Use [the MUI Design kits GitHub repository](https://github.com/mui/mui-design-kits/issues/new/choose) to open issues about bugs or feature requests for MUI Connect.

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

@@ -2,12 +2,24 @@
 
 <p class="description">Be more efficient designing and developing with the same library.</p>
 
-## Official kits
+## Design kits
 
-Pick your favorite design tool to enjoy and use the Material UI component inventory, including over 1,500 unique elements with their full range of states and variations.
+Material UI components are available on design tools such as Figma, Sketch, and Adobe XD, using their latest design system features to represent all of the same states, variants, and permutations of each component.
+
+It accounting for 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"}}
 
+## Connect Figma plugin
+
+Connect is a Figma plugin to help bridge the gap between designers and developers using Material UI.
+It generates a theme file with all the design tokens and component customizations done on Figma that you'll be able to export and paste into your codebase, as well as visualize in a Storybook instance.
+
+It's currently in beta and available for testing.
+Get it on [the MUI Figma Community profile 👉](/)
+
+<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="A screenshot of Figma together with the MUI Connect plugin running on the side, doing customziations to the Material UI Switch component." width="1628" height="400" />
+
 ## Third-party resources
 
 ### UXPin

docs/data/material/pages.ts

@@ -310,6 +310,22 @@ const pages: MuiPage[] = [
       },
     ],
   },
+  {
+    pathname: '/material-ui/design-resources',
+    title: 'Design resources',
+    children: [
+      {
+        pathname: '/material-ui/design-resources/mui-connect',
+        title: 'MUI Connect plugin',
+        newFeature: true,
+      },
+      {
+        pathname: '/material-ui/design-resources/material-ui-for-figma',
+        title: 'Material UI for Figma',
+        newFeature: true,
+      },
+    ],
+  },
   {
     pathname: '/material-ui/discover-more',
     children: [

docs/pages/material-ui/design-resources/material-ui-for-figma.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

docs/pages/material-ui/design-resources/mui-connect.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docs/data/material/design-resources/mui-connect/mui-connect.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

docs/pages/material-ui/getting-started/design-resources.js

@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docs/data/material/getting-started/design-resources/design-resources.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} disableAd disableToc />;
+  return <MarkdownDocs {...pageProps} disableAd />;
 }

docs/src/components/action/InfoCard.tsx

@@ -95,7 +95,7 @@ export default function InfoCard(props: InfoCardProps) {
       {svg && svg}
       {icon && <GlowingIconContainer icon={icon} />}
       <Typography
-        fontWeight="bold"
+        fontWeight="semiBold"
         component="h3"
         color="text.primary"
         variant="body2"

docs/src/modules/components/MarkdownElement.js

@@ -431,7 +431,9 @@ const Root = styled('div')(
       // Avoid layout jump
       display: 'inline-block',
       // Avoid very sharp edges
-      borderRadius: 2,
+      borderRadius: 12,
+      border: '1px solid',
+      borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
     },
     '& hr': {
       height: 1,
@@ -583,6 +585,9 @@ const Root = styled('div')(
       '& hr': {
         backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
       },
+      '& img': {
+        borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+      },
       '& h1': {
         color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
       },

docs/src/modules/components/MaterialUIDesignResources.js

@@ -49,7 +49,7 @@ export default function MaterialUIDesignResources() {
     <Grid container spacing={2}>
       {content.map(({ svg, title, link }) => (
         <Grid key={title} xs={12} sm={4}>
-          <InfoCard classNameTitle="algolia-lvl3" link={link} title={title} svg={svg} />
+          <InfoCard classNameTitle="algolia-lvl3" link={link} title={title} svg={svg} dense />
         </Grid>
       ))}
     </Grid>

docs/translations/translations.json

@@ -480,6 +480,9 @@
     "Earlier versions": "Earlier versions",
     "/material-ui/migration/migration-v3": "Migration from v3 to v4",
     "/material-ui/migration/migration-v0x": "Migration from v0.x to v1",
+    "/material-ui/design-resources": "Design resources",
+    "/material-ui/design-resources/mui-connect": "MUI Connect plugin",
+    "/material-ui/design-resources/material-ui-for-figma": "Material UI for Figma",
     "/material-ui/discover-more": "Discover more",
     "/material-ui/discover-more/showcase": "Showcase",
     "/material-ui/discover-more/related-projects": "Related projects",