Try it on…virtually
Leveraging Google’s Stitch tool to create a rapid proof of concept for “trying on” clothes leveraging AI rendering.
Try it on
Stop guessing with models, use AI to generate images of how clothes would look on you.
While creating this concept I decided to try Google’s new “Stitch” tool to see how it works. Here’s the prompts I used:
”For an e-commerce clothing app, I want an interface that allows a user to upload several full-body photos of themselves along with form fields for certain metrics, such as height, weight, and optional fields for hip, waist and bust measurements. Then, I want the interface to show that same user, using the photos they uploaded to create an AI rendering of the user in an outfit or product of the site with a recommended size. If it can also allow the user to toggle between different sizes to see how it might look on their body, this would be a great feature as well.”
Here’s what Stitch came up with:
Here’s where I ended up with things.
After some back and forth with Stitch for edits and clean-up, I realized I’d probably spent just as much time trying to refine with prompts vs. just doing what I really wanted in Figma. In the end, I got 2 main screens out of Stitch. I put together the rest of the screens and created the prototype in Figma.
Learnings from Stitch:
Good things
Stitch is good for a quick screen mock-up
Probably a useful tool if you have very basic/limited figma knowledge
Potential. This is just beta so I could see this getting smarter and more useful in the future.
If you were able to link Stitch to a Figma library and have it generate screens based on that library, now we’re cookin’ with gas. At least for some quick concepts.
Areas Needing Improvement
Doesn’t help much with prototyping
You need to be VERY descriptive about what you want. As a designer who is in Figma everyday, it took me just as much time to write the prompts and then fine-tune it through back-and-forth with the AI to get an outcome that was about 60% the quality I could have created in that time in Figma
It doesn’t produce components, variables or states. (For example - a button needs to have a default, press and maybe a disabled state - you’re on your own with that)
The code also doesn’t contain states, you’ll need to go back and do a fair bit of coding
The nesting of auto-layouts is a bit extreme. Still, impressive it can do it, but if you were setting up a screen in Figma, you would probably have some more efficiencies to how your file is organized. This makes it really difficult to find things and VERY difficult to prototype later.
More Projects
