Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design Generating Code from the Design

Sean Linden
Sean Linden
31 Points
Posted by Sean Linden
Sean Linden
31 Points

Having trouble getting certain MUI options to show in UXPin.

For example, how to get an Autocomplete multi-select dropdown to show checkboxes. This is shown as a sample in the MUI documentation, but doesn't look like it can be done in UXPin. May be possible via a custom component, but I wouldn't know where to start. Rachel: Do you offer private UXPin consulting?

2 Answers

Daniel Montgomery
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Montgomery
Treehouse Staff
Daniel Montgomery
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Montgomery
Treehouse Staff

Hey Sean Linden
I've created an example prototype that you can view at: https://preview.uxpin.com/551def80f918ef3d1136e57e7dfa1f564518e2fe#/pages/180837938/simulate/no-panels

Is this what you had in mind? If so, here's how you can achieve this effect:

Add a dropdown to your canvas. In the right-hand properties panel, set "expanded" to true. This will open the dropdown. Double-click the element within the dropdown to edit its text in the right panel. Add a checkbox to the canvas by dragging it, then place it inside the dropdown.

Initially, these two elements (the dropdown text and the checkbox) will occupy a full line each. To make them sit side by side:

Select each item and apply the flexbox property at the top of the right-hand panel.

Let me know if you need any further clarification or assistance.

Sean Linden
Sean Linden
31 Points
Sean Linden
Sean Linden
31 Points

Thanks for this, but the whole point of UXPin Merge for MUI is to do this with actual MUI controls and props so that developers don't have to translates screen drawings (what you've described) into code (the Merge promise). Maybe this can be done with a custom code component, but I wouldn't know where to start.

If we're just going to end up drawing pictures, we'll just go with Figma. Some of their design to code generators don't suck too badly (but suck compared to actual MUI/React code, hence the interest in Merge).