Skip to content

Commit

Permalink
fix Vale brand name CI check
Browse files Browse the repository at this point in the history
  • Loading branch information
danilo-leal committed Mar 25, 2024
1 parent 63d75a7 commit 4821dd4
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 22 deletions.
18 changes: 9 additions & 9 deletions docs/data/material/design-resources/connect/connect.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
# Connect plugin

<p class="description">Connect is a Figma plugin that lets you generate a theme from the Material UI Design Kit.</p>
<p class="description">Connect is a Figma plugin that lets you generate a theme from the Material UI Design Kit.</p>

## Introduction

Connect is a Figma plugin that lets you generate a theme from the [Material UI Design Kit for Figma](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x).
Connect is a Figma plugin that lets you generate a theme from the [Material UI Design Kit for Figma](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x).
You can customize design tokens and components, export a JSON file with the changes to your theme, and visualize your customizations through an embedded Storybook instance.

:::warning
This plugin is currently in beta and some Material UI components cannot be customized yet.
This plugin is currently in beta and some Material UI components cannot be customized yet.

Connect only supports the Material UI Design Kit; others, such as the Joy UI Design Kit, are not yet supported.
Connect only supports the Material UI Design Kit; others, such as the Joy UI Design Kit, are not yet supported.
:::

<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="A screenshot of Figma together with the Connect plugin running on the side, customizing the Material UI Switch component." width="1628" height="400" />
<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="A screenshot of Figma together with the Connect plugin running on the side, customizing the Material UI Switch component." width="1628" height="400" />

## Running the plugin

### 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.
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 **"Connect"**.
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 **"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 Connect." width="1628" height="400" />

Expand All @@ -34,7 +34,7 @@ Design tokens consist of the styles that are defined through Figma's local varia

### Existing tokens

The Material UI 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 Material UI 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/).

Connect can read all of the existing tokens in the theme.
To customize them using local variables, open the modal by clicking on the filter icon as shown above.
Expand All @@ -55,7 +55,7 @@ Add your custom tokens to the appropriate category and click **Generate theme**
You can customize how a component looks and generate its theme code using Connect.

:::warning
Currently, the only supported Material UI components are the Button, Switch, and Typography.
Currently, the only supported Material UI components are the Button, Switch, and Typography.
:::

## Adding the theme code into your codebase
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Material UI for Figma
# Material UI for Figma

<p class="description">Enhance the designer-developer working with Material UI collaboration.</p>
<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.
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.
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 |
Expand Down Expand Up @@ -59,19 +59,19 @@ We have already defined everything as a style, so your only point of command is
### Do the kits output React code?

You can export the design tokens and component customizations to code if paired with [the Connect Figma plugin](/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.
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.
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.
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

Expand All @@ -81,12 +81,12 @@ Master components were difficult to maintain, and it required sticking to the el

<iframe width="100%" height="490" src="https://www.youtube.com/embed/eHBk0FbS0P8?si=QbOiMU2F1yvGB6s8" title="YouTube video player" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe>

### Why build "Material UI for Figma" instead of using Google's Material Design Figma file?
### 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.
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.
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:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@

## Design kits

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.
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.
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 Connect plugin running on the side, doing customziations to the Material UI Switch component." width="1628" height="400" />
<img src="/static/material-ui/design-resources/connect.png" style="width: 814px;" alt="A screenshot of Figma together with the Connect plugin running on the side, doing customziations to the Material UI Switch component." width="1628" height="400" />

## Third-party resources

Expand Down

0 comments on commit 4821dd4

Please sign in to comment.