Skip to content

Commit

Permalink
iterating on the copywriting + add videos
Browse files Browse the repository at this point in the history
  • Loading branch information
danilo-leal committed Apr 3, 2024
1 parent 0c6d1c3 commit 0e8f9bc
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 16 deletions.
45 changes: 29 additions & 16 deletions docs/pages/blog/introducing-connect.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,54 @@ card: true
---

A few years ago, we released the [Material UI Design Kit for Figma](/store/items/figma-react/).
Since then, we've heard from many designers who use Material UI as their React component library of choice.
They've expressed how much faster their process could be if they could hand over production-ready code generated directly from the design software to developers.
Since then, many designers who use it expressed how much faster their process would be if they could hand over production-ready code generated directly from the design software to developers using the Material UI React library.

That's precisely why we developed Connect.
Ultimately, the goal for the Design Kits has always been to increase the efficiency and speed of the whole team that uses Material UI.
The Connect plugin, that's [available now in beta](https://www.figma.com/community/plugin/1336346114713490235/connect), is a bridge that draws designers and developers closer, facilitating the way new designs reach the codebase.
That's why Connect, a Figma plugin, was developed and it's now [available now in beta](https://www.figma.com/community/plugin/1336346114713490235/connect)! 🎉

Ultimately, the goal for the Design Kits is to increase the efficiency and speed of the entire team that is using Material UI, drawing designers and developers closer by facilitating the way new designs reach the codebase.

## Theme customization

Connect works from the [Design Kit's v5.16.0](https://github.com/mui/mui-design-kits/releases/tag/v5.16.0) up because that was when it started to support Figma's local variables.
This feature has significantly matured the world of design tokens for Figma, and Material UI has been doing this for a while with all of [its theming features](/material-ui/customization/theming/).
This feature has significantly matured the use of design tokens, which is something Material UI has been doing for a while with all of [its theming features](/material-ui/customization/theming/).

That means you can use Connect to generate code for any customized local variable and style included in the Design Kit.

<video preload="metadata" controls muted loop playsinline width="1584" height="1080">
  <source src="/static/blog/introducing-connect/theme-customization.mp4" type="video/mp4">
</video>

So, you can use Connect to generate a theme for any local variable and style included in the Design Kit.
Maybe you want to go very far from a standard Material Design-looking button and explore something different?
Quickly generate the code with all the tokens you've modified and apply it to your codebase.
Visit the documentation to learn how to insert the generated code into your theme file.
_(I'll add this link once we have it.)_

## Component customization

You can also drastically change a component's appearance (in multiple states) in the Design Kit and generate the corresponding theme code.
This is one of the most exciting features because it makes tweaking components incredibly fast!

<video preload="metadata" controls muted loop playsinline width="1584" height="1080">
  <source src="/static/blog/introducing-connect/custom-component.mp4" type="video/mp4">
</video>

:::warning
While in beta, not all components are supported yet.
We'll be expanding component coverage progressively in the coming months.
At the moment, you can play around with the Button, Switch, and Typography!
We'll expand component coverage progressively in the coming months.
For now, you can play around with the Button, Switch, and Typography!
:::

## Quick Storybook preview

On Figma, it's easy to see all states of a certain component but not necessarily interact with them.
That's why we've included a quick Storybook preview panel on the plugin so that you can conveniently play around with your changes and see how they interact with other props available in the component interface.
On Figma, it's possible to see all states of a certain component but not necessarily interact with them.
That's why there's an embedded Storybook preview panel in Connect so that you can conveniently play around with your changes and also see how they interact with other props 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">
</video>

## Try Connect now!

Get the beta version of Connect now, [availble for free](https://www.figma.com/community/plugin/1336346114713490235/connect) on MUI's Figma community profile.
We're excited to see you take it for a spin.
There's still a lot to do, but 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).
Get the beta version of Connect now, availble **for free** on [MUI's Figma community profile](https://www.figma.com/community/plugin/1336346114713490235/connect).
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 and the Material UI Design Kit (To-be-removed note: I'll add links here once the corresponding PR for their docs is merged).
- If you've got any feedback, we'd love to [hear from you here](https://mui-connect.canny.io/feedback).
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.

0 comments on commit 0e8f9bc

Please sign in to comment.