[figma] Add support for Joy UI

[oliviertassinari]

Something we could consider if we get enough traction.

Requests

• https://mui.zendesk.com/agent/tickets/4463 "there exist a figma for MUI Joy?"
• https://mui.zendesk.com/agent/tickets/5894 "when will joy ui figma be registered?"

[adrianmanea]

We've already started working on the available components. We're hoping we could get it in the upcoming small-bugs fix release.

[oliviertassinari]

@adrianmanea Adding the support for Joy UI issue feels like a major undertaking. It's not clear to me if it's worth solving it at this point:

1. What problems could we solve on the Figma kit using the same amount of time that could have a higher impact?
2. What if the look & feel of Joy UI changes?
3. What if it takes 1 year to reach the critical mass of Joy UI uses that make Figma components relevant?

[adrianmanea]

Yes, these are some great points we totally missed. We built the available components because of the lack of issues mainly. Maybe wait until we get enough interest--having prematurely in Figma might also confuse people.

[oliviertassinari]

@adrianmanea Do you have an estimation of how much effort an initial version of Joy UI would be?

[adrianmanea]

Do you have an estimation of how much effort an initial version of Joy UI would be?

@oliviertassinari Not much, three weeks total, one remaining at this time of writing.

[oliviertassinari]

Not much, three weeks total, one remaining at this time of writing.

@adrianmanea Interesting, one week is not "a major undertaking" as I was imagining. Any idea for what we could work on if it wasn't on Joy UI?

cc @danilo-leal what do you think?

[danilo-leal]

I personally think that for Joy UI is probably better to work on the Kits in order to generate acquisition/awareness than to wait for that to happen to only then develop them. It might be good to create the foundation for it now so we can release it as a bundle with all the new components that are cooking up for this quarter. We may iterate a bit on palette and typography styles though－but nothing that would cause significant re-work, just some amount of fine-tuning.

[oliviertassinari]

A couple of extra thoughts:

1. What I have observed so far is that popular UI libraries started with the JS implementation, the Sketch files seem to have come second: we can take Bootstrap, Material Design, Chakra UI, Ant Design, and Tailwind UI as examples. Now, this was from another time, when Figma wasn't dominant. I would assume that the JS implementation of the look & feels is still the most important aspect by a long shot but that we are in a new area, where the Figma counterpart is more important than in the past.
2. Having a version of Joy UI in Figma, with a dedicated community file could help us gauge the interests of the designers. Independently from the interest of the developers. I guess this would lead to a shorter feedback loop, so great. We could try to emulate https://www.figma.com/community/file/1020079203222518115 (amazing work) or https://www.figma.com/community/file/1055912623219285224 or https://www.figma.com/community/file/1131891137727824106
3. Something that surprises me is that Tailwind has little tractions on the Figma community: https://www.figma.com/community/search?resource_type=mixed&sort_by=all_time&query=tailwind+&editor_type=all. compared to Ant Design or Material Design. Maybe it's because it's mostly relevant for the custom of UIs, not for building a reasonable set of components that will later be the foundation of tons of apps and internal tools. I could find https://twitter.com/charliejacobson/status/1425947541653258241 about this.

It might be good to create the foundation for it now

Makes, sense 👍 for finding an MVP we could release as a Figma kit.

We may iterate a bit on palette and typography styles though－but nothing that would cause significant re-work, just some amount of fine-tuning.

I personally think we can't know until we reach a "critical adoption level" of Joy UI. Where this "level" would be defined by the point at which we have gotten enough market feedback to have visibility of all the major improvement opportunities. I had cases like this in the past, where I thought that I was done, but turn out, I wasn't. I was simply: blind to the opportunity & problems.

[tomasz-sodzawiczny]

Hi! My team is starting to build a new product (https://cradle.bio/), and Joy UI -- already in the current state -- looks super promising as the base for our design system. Having a Figma kit (even if its not 100% complete) would make our early prototyping sooo much easier 🙏

[ckohtz]

I'm currently evaluating Material UI for a new project at our company, but was worried we'd just look like Google. Then I saw Joy UI and got kind of excited.

A Figma kit for Joy UI would be very helpful with our process. Our project manager talks to our customers and comes up with what we need to build. Our designer works in Figma and designs big picture, how it works. We receive the Figma design and then implement it as close as we can, making changes if/where necessary. Using a Joy UI Figma kit would make this process go a lot smoother.

I'd be surprised if other companies don't have similar processes and needs. A lot of developers work with UX designers on their projects. Having a common component library makes things go a lot smoother IMO. Would probably move us from "maybe Joy UI" to "yes Joy UI".

I suppose we could use the Material UI Figma kit and then just implement it in Joy UI, but unsure how that would work as I'm not very familiar with Joy UI yet (looking more into that next).

[oliviertassinari]

@tomasz-sodzawiczny @ckohtz Thanks for the inputs.

Note that based on #71 (comment), we might provider a Figma version of Joy UI sooner rather than later :).

[oliviertassinari]

An initial version of Joy UI was released today with MUI for Figma v5.11.0. You can see the full preview here: https://www.figma.com/file/9YlB2B0UBLiuHuHFiKykWd/MUI-for-Figma-v5.11.0---Joy-UI-v5.0.0-alpha.60-(Full-preview).

[denniseffing]

@oliviertassinari We decided to use Joy UI on a new project and just noticed that the current Joy UI Figma version is much older than the current Joy UI version (v5.0.0-alpha.60 vs. v5.0.0-beta.3).

What exactly is the plan for the Joy UI Figma design kit? Is it going to be updated with the first v5.0.0 release or will there be an update for beta versions as well?

[adrianmanea]

We are currently working on updating the library. We are 2 weeks away from release.

[dannypk]

@adrianmanea will the Figma file also be updated at the release time or should we expect delays? We bought today the MUI for Figma and we have a lot of issues with the current version of JoyUI - mainly the typography.

Thanks!

[adrianmanea]

@dannypk we are in schedule for an update by the end of next week! We will post here as soon as it's done.

[oliviertassinari]

@adrianmanea actually, this made me think that it could be great to:

• In the store, have two separate files for Material UI and Joy UI, to measure use
• In the Figma community, have two different files, one for Material UI, one for Joy UI
• In the docs, could do the same

[adrianmanea]

Great idea! Since Joy (Figma) library is more stable now and fully featured, we are confident in this idea to move forward.

[LarsKemmann]

@dannypk we are in schedule for an update by the end of next week! We will post here as soon as it's done.

Thanks so much for your transparency on scheduling for this. Waiting on pins and needles... we need this ASAP. Will try to work with the old alpha one for now.

[tommy-tb]

@dannypk we are in schedule for an update by the end of next week! We will post here as soon as it's done.

Also waiting on this! We just bought the Figma kit and plan to use Joy UI for a new admin dashboard. Do you have an updated timeline for the new version?

[adrianmanea]

Hi, we'll release the update today. Happy to share it as a temporary link as it may take a while for the team to deploy it on the website. Just mention this thread when sending an email at figma@mui.com.