[sync] Create Figma plugin to generate a theme.js file

oliviertassinari commented 2 years ago

Introduction

We could create a Figma plugin to sync the configuration with a theme.js file.

https://www.figma.com/community/plugin/797015796747379907/theme-ui

A first prototype was done at https://github.com/mui/hackathon-figma-plugin.

Motivation

This could allow us to make the current Figma file free for the community while selling a subscription (to keep sustaining the effort). The subscription would be for using this plugin and growing into a more advanced suite of plugins to reduce the gaps between code and design.

Benchmarks

Requests

Features

[ ] Allow to export the theme form Figma
[ ] Allow to import the theme into Figma
[ ] Connect the input/output with a theme builder web UI (simple mode)

oliviertassinari commented 2 years ago

What @danilo-leal found https://material.io/blog/designtocode is pretty cool! It echos back to how we had identified a few months ago (April 2021 with https://www.overlay-tech.com/) as the next steps after solving the sync of the theme.js file:

10 The first step is to sync the "styles" (how Figma names the design tokens). This is the simplest step. We can leverage the existing constraints. For instance, we have almost a direct mapping between the Figma palette and the JavaScript theme structure. We could build an import/export feature as a Figma plugin. The pain solved at this step are: a. easy migration between multiple Figma versions. b. easy prototyping with code or design. This is mostly for designers.
44 The second step is to sync the theme.components structure. This is more challenging, as it requires a deep knowledge of the React and Figma component structure. This could still be delivered as a Figma plugin. The pain solved at this step are: a. allowing developers and designer to easily collaborate. Make it easier to implement pixel-perfect designs, as well as backporting development constraints back to the designer realm. This is both for developers and designers.
43 The third step exit the design system realm and enters the composition domain. It's about outputting React code from the Figma files (React -> Figma is a no-goal in this step). There is a challenge around using the right layout constraints and the most appropriate React components, Grid vs. Stack vs. Container vs. sx prop. The pain point is about making the handoff process a lot faster, saving time for the developers. At this step a Figma plugin is unlikely enough, it will very likely require a backend API to process the requests, as well as to help protect the IP (maybe for step 2 as well).
The fourth step is about the extendability of the design system. Allowing the addition of new variants and props. This is an extension of step 2 that can isn't required for a minimal version.

adrianmanea commented 2 years ago

Some news on this topic, There's a plugin created by AWS which syncs their Figma library theme with their AWS Amplify design system.

I'm not sure the technical specifics on how it works but I'm sure it needs some rules from the design system itself. I'm open to brainstorming this topic on a call anytime.

More info here: https://docs.amplify.aws/console/uibuilder/figmatocode/

danilo-leal commented 2 years ago

That's nice! We made a similar prototype during this year's hackathon where you could export the theme from Figma and just paste it into the code. There are numerous ideas in that sense we could definitely explore more. I think it would also be nice to have an integration to GitHub that, whenever the designer in Figma changes something from the theme, be it a type or color, it asks if the designer wants to create a pull request with the updates. I'm sure it's not trivial to do 😛 but it would integrate the workflows amazingly.

adrianmanea commented 1 year ago

oliviertassinari commented 1 year ago

@adrianmanea Added a few weeks ago in the list 😁

dusskapark commented 1 year ago

I'd like to add my opinion, well currently The "MUI for Figma" toolkit has relied on the Token studio and they officially support the style-dictionary export option https://docs.tokens.studio/transforming/style-dictionary

I thought Figma will announce their native Design-token management system soon though, but we all know that the adoption rate always needs a quite time. So, I'd like to suggest that MUI supports style-dictionary integration first for the existing customers of v5.11 FigmaKit and considers Figma's native design-token feature for your next FigmaKit v6

skruegs commented 1 year ago

@oliviertassinari Are there any current packages or apps to do the mapping from Figma tokens to MUI theme? https://github.com/mui/hackathon-figma-plugin 404's for me

danilo-leal commented 1 year ago

Hey there @skruegs, appreciate the questions! There are no "official" packages or apps from MUI for this yet ⎯ this one that you linked was our first attempt/experiment at tackling this ⎯ but we'll be hopefully soon giving updates about it. A new team member has recently joined (👋 @DavidCnoops) to iron the plug-in out.

Feel free to reach out in case you have any questions or suggestions ⎯ we'd love to hear them!

oliviertassinari commented 1 year ago

https://github.com/mui/hackathon-figma-plugin 404's for me

@skruegs I have made the repository public. But yeah, it was a quick experimentation, outdated today.

@DavidCnoops I have created a small Toolpad app to display the GitHub avatars of the user who upvoted this issue: https://tools-public.mui.com/prod/pages/_-clGLR. this way, we could use it to gather qualitative feedback on what people expect and what we could build.

dusskapark commented 1 year ago

@oliviertassinari Will this project be postponed to 2024?

oliviertassinari commented 1 year ago

@dusskapark It's very much at the top of our priority list. I think @DavidCnoops can provide more details on this.

@adrianmanea I have reorganized the public roadmap in https://github.com/mui/mui-design-kits/projects/1 to match MUI X and Core.

DavidCnoops commented 1 year ago

@dusskapark As Olivier mentioned it's indeed a priority of us and something that's currently in active development.

To provide some more details: We're building a Figma plugin that makes it possible to export (almost) all customizations applied in Figma on top of the MUI design kit directly to a theme file. These includes changes/customizations to both the design tokens (i.e. color palettes, elevations, border raddii etc.) as well as in-depth customizations to component styles (i.e. component-specific colors, paddings & margins, layout changes, effects, etc.). So that you can fully customize the look and feel of Material UI in Figma and automatically get a working, usable version on the code side without manually having to write a single line of code or CSS.

There's still quite a lot of work to be done but we already have a pretty extensive proof of concept and I'm confident we're going to be able to ship a first beta version before the end of the year.

dusskapark commented 1 year ago

@DavidCnoops Thank you for the detailed explanation. Is there any room for plugin developers, like me, to participate as an open source?

oliviertassinari commented 1 year ago

Is there any room for plugin developers, like me, to participate as an open source?

@dusskapark On MUI's end, we don't intend to make this feature open source but instead to help it fund the work on the open source components. The ambition is to make this the seed of a much larger feature to help product teams create great design systems.

For open source collaboration, I think that you can connect with the author of https://www.figma.com/community/plugin/1192256903171420509/TSL---MUI-Theme-Exporter. It would be great to have a counter open source offering, it would help valid or invalid if the paid route MUI is taking is the most effective one.

faner11 commented 10 months ago

@DavidCnoops Very much looking forward to your work, can you share some of the progress so far?

dusskapark commented 10 months ago

https://www.linkedin.com/posts/figma_starting-today-you-can-now-bind-variables-activity-7138214989026189313-xKXI Good news. Figma Variables is expended to other style properties!

I'm still waiting for this new feature. Well, hoping to get this as my Christmas present :)

tartakovsky commented 8 months ago

@oliviertassinari @DavidCnoops

Hi guys, not sure where to ask, so asking here as well.

I just purchased a license for the kit: https://mui.com/store/items/figma-react/

I've been reading the GitHub issues for it.

From what I understand, the kit has just migrated from Token Studio to Figma Variables: https://github.com/mui/mui-design-kits/releases/tag/v5.14.0

However, the plugin to export Figma Variables has not yet been developed: https://github.com/mui/mui-design-kits/issues/10

From what I understand, that takes away the ability to export tokens.json until the plugin is finished?

We're managing our design system in Token Studio and are planning to connect it to both MUI code and MUI kit, so I wanted to ask, while the plugin is still in development.

Could you please privately share the .json file with tokens you were using before v5.14.0 so the connection is easier for us? It's fine if it's not up to date, anything would help. E.g. here or to mui@3jane.com would work.

P.S. Re desirability of the plugin, we'd definitely pay a token studio-sized subscription for it, would save us a lot of time :)

dusskapark commented 8 months ago

@tartakovsky

What I understand is that this plugin is not creating a token.json, but the ultimate goal is to generate a theme.ja file directly that needs to be applied in the end.

I'm thinking this is a slightly different concept from the design token. I think it's more similar to the feature that allows Token Studio to extract css files using AWS style dictionary

DavidCnoops commented 6 months ago

@tartakovsky Apologies for the late reply on my end. To provide an update with regards to the plugin: It's currently in the process of being published to the Figma Community. Once the plugin is approved (normally takes 5 to 10 days) you'll be able to install and test it. So if everything goes according to plan the plugin should be available somewhere in the first week of March.

The plugin will be able to generate a theme file (theme.js) for your Material UI design kit including any changes/customizations made to design tokens (both the ones defined as Variables and those defined as Styles). So you'll be able to, for example, create your own color palette or define your custom collection of shadows, border radii, typography styles, etc. in Figma and the plugin will be able to convert all these tokens to a valid Material UI theme file. Next to that we're also adding support for in-depth component customizations. You'll be able to fully customize the various variants and states of a component in the design kit to create your own distinct look and feel for a component. And once you're happy use the plugin to generate the correct theme styles for these component customizations. The first release will have support for the Button and Switch components, but we'll be quickly expanding the list of supported components afterwards and ultimately offer support for all components present in the design kit.

dusskapark commented 6 months ago

@DavidCnoops I haven't found this plugin yet ( already 14 days), is there any problem with it?

HunterJFrey commented 5 months ago

Are there any updates on this plugin, or recommended approaches for manually converting the figma export to an MUi theme?

danilo-leal commented 5 months ago

Hey folks — excited to share that Figma is reviewing the plugin publication as we speak; thus, it should very soon be out in beta for you all to try. I'll definitely report back here once it's published!

jbhurruth commented 5 months ago

Looks like its up!

dusskapark commented 5 months ago

Good! Looking forward to announcement and guide docs

https://mui.com/material-ui/design-resources/material-ui-sync/

danilo-leal commented 5 months ago

Y'all are fast—super nice to see early interest! The plugin's live and ready to be tested! If you find any bugs or want to report something, please drop a comment here or use the "Feedback" button available directly on the plugin. We're on our way to making a larger release comms about it, as well as publishing the docs mentioned above (which I apologize isn't out yet 😞).

danilo-leal commented 4 months ago

We just got an official word out about Sync's (the updated name for the plugin!) beta release — check out the tweet and let us know any feedback; we're excited to see y'all continue to try it! 😃

Morti commented 2 months ago

This is great, was looking into trying to extract the styles myself from the Figma api but this plugin would make it really easy to get our designs into code. Looking forward to updates with more components, any updates on when more will be coming?

Also when testing this plugin I noticed that it extracts the theme in a format that is not supported by createTheme, is there a reason for that? Specifically the first section with colorSchemes. Had to change it to get it to work with createTheme

dusskapark commented 2 months ago

Same idea. createTheme support is needed obviously..

On Wed, Jun 19, 2024 at 8:25 PM Michael M @.***> wrote:

This is great, was looking into trying to extract the styles myself from the Figma api but this plugin would make it really easy to get our designs into code. Looking forward to updates with more components, any updates on when more will be coming?

Also when testing this plugin I noticed that it extracts the theme in a format that is not supported by createTheme, is there a reason for that? Specifically the first section with colorSchemes. Had to change it to get it to work with createTheme

— Reply to this email directly, view it on GitHub https://github.com/mui/mui-design-kits/issues/10#issuecomment-2178575933, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA7346MJPSXXZIP4M4S7XBDZIF2FLAVCNFSM5GD2YYG2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMJXHA2TONJZGMZQ . You are receiving this because you were mentioned.Message ID: @.***>

mui / mui-design-kits