[sync] Create Figma plugin to generate a theme.js file #10
Comments
|
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:
|
|
Some news on this topic, 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/ |
|
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. |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
|
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 |
|
@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 |
|
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! |
@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. |
|
@oliviertassinari Will this project be postponed to 2024? |
|
@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. |
|
@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. |
|
@DavidCnoops Thank you for the detailed explanation. 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. |
|
@DavidCnoops Very much looking forward to your work, can you share some of the progress so far? |
|
https://www.linkedin.com/posts/figma_starting-today-you-can-now-bind-variables-activity-7138214989026189313-xKXI I'm still waiting for this new feature. Well, hoping to get this as my Christmas present :) |
oliviertassinari
changed the title
oliviertassinari
added
scope: sync
|
@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: However, the plugin to export Figma Variables has not yet been developed: 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. |
|
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 |
|
@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. |
|
@DavidCnoops I haven't found this plugin yet ( already 14 days), is there any problem with it? |
|
Are there any updates on this plugin, or recommended approaches for manually converting the figma export to an MUi theme? |
|
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! |
|
Good! Looking forward to announcement and guide docs https://mui.com/material-ui/design-resources/material-ui-sync/ |
|
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
changed the title
|
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! 😃 |
|
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 |
|
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
<#10 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AA7346MJPSXXZIP4M4S7XBDZIF2FLAVCNFSM5GD2YYG2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMJXHA2TONJZGMZQ>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Introduction
We could create a Figma plugin to sync the configuration with a
theme.jsfile.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
The text was updated successfully, but these errors were encountered: