[figma] Create design templates (a new product for predesigned pages)

oliviertassinari commented 3 years ago

Context

We cover MUI in Figma with a design component kit. However, there is recurring feedback from people who are asking for design templates too. I think that having the MUI components in Figma is a great step but this is most beneficial to experience designers who need flexibility. The teams without a designer could still struggle to create pages that feel & look great. Designers that are whiling to rely on pre-designed standard screens could still benefit from templates to take shortcuts.

Custom requests

What is really helpful for me are ready to use/show templates for entire "pages", parts of the application/webpage. I have purchased https://gumroad.com/l/materialsystem instead author
I was hoping for some finished screens and templates already to deviate form as I am not an experienced Figma user mail@xebner.de
I just expected more designs and templates to be a part of the pack. shannonhobby1@hotmail.com
Hi I thought it would be pre-made templates to quickly edit rather than just the individual elements. It's too complicated as I just need to just create quick mockups kim@koda.design
I mean it’s a great library with lots of atoms and molecules. But I am a developer and was looking for something to quickly sketch some layout. It takes me too long to get used to all the components that the library offers. mrpitch@outlook.com
There are too few examples of real use in design, for example, even an unprepared person can assemble an intelligible interface from a tailwind Figma file, but with this file, it will not work in general, there is not much more useful information here than in the free material file in the Figma community kseniia.panchenko@gmail.com
I was expecting more detailed examples like those there: https://mui.com/getting-started/templates/. https://mui.zendesk.com/agent/tickets/1556
"I thought it would have layouts for pages already set for me" https://mui.zendesk.com/agent/tickets/1584
"it only includes some basic pages" https://mui.zendesk.com/agent/tickets/6198

Benchmarks

https://setproduct.com/material

https://materialdesignkit.com/templates/

https://www.antforfigma.com/pricing

https://www.untitledui.com/

adrianmanea commented 2 years ago

I think this also applies as discussed in #5.

Ref: https://www.figma.com/file/n7JwXE0hDtjetTmTZ8oaRL/MUI-for-Figma-Material-Components-v5.2.0?node-id=4662%3A14

oliviertassinari commented 2 years ago

I have updated to benchmark to link to what I assume customers were asking about. I think that these new examples are great, a step forward. However, it's unclear how far people would like this to be pushed. I think we should keep the issue open in the meantime. We will see if the frequency of this feedback decreases or stay stable.

adrianmanea commented 2 years ago

Now I understand the volume they are asking, not just a few screen examples but a full-blown library full of app examples. I would argue that this should be a new product or an extension of the MUI for Figma - Components. What do you think about the idea of starting working on a free file with a few predefined apps to see the interest?

oliviertassinari commented 2 years ago

@adrianmanea I do agree with the analysis. Pushing this issue could happen under two different tracks:

a. The https://setproduct.com/material path. This would be about extending the "Overview" page with a lot more in-context component usage. I think that this should be part of the same product.

b. The https://materialdesignkit.com/templates/ path. This would be about extending the "Screen" page with a lot more full-blown UI. I think that this one should be a different product.

adrianmanea commented 2 years ago

@oliviertassinari both are good options!

point a. would imply reducing the components since it is already lagging. Figma says "We recommend splitting up large files into smaller files by copying the contents of each page, and pasting it into a new file." in the context of our problem #47.
point b. I think that we could make a highly valuable UI library kit, ranging from marketing to internal dashboards screens. I'd be more inclined towards this one IMHO.

thunderpigeon commented 2 years ago

I would love the tables & data tables match what is possible with the component. Like print, filter and some responsive. Was my main reason to buy the kit. So, I got a little bit disappointed ^.^

https://www.material-ui-datatables.com/

adrianmanea commented 2 years ago

Hi @thunderpigeon, the material-ui-datatables is a third-party component, not part of the MUI repo. But that doesn't mean you cannot achieve this result, it is quite simple. Would you like us to send a separate Figma file with the functionalities you mentioned? We can deliver in one business day! Let us know if you require any other functionalities.

adrianmanea commented 2 years ago

Made the first steps into this issue, and created quite a few pre-built components in 5.9.0. More to come!

oliviertassinari commented 2 years ago

Nice, I have noticed a few more template pages 👍, e.g.

https://www.figma.com/file/cICEsU6eNdiTawOEiFO5Or/MUI-for-Figma-Material-Pro-v5.9.0?node-id=10035%3A118304

I'm reopening this issue, to see if this is enough, or if we still get user requests in this direction.

mui / mui-design-kits