Photocard Customizer
A site experience built with Figma Make that allows users or music fans to decorate and collect digital photocards.
Skills
UX/UI Design • Prototyping
Timeline
2 days
Tools Used
Figma • Figma Make
The Experience
What if I digitized the collection and decoration of a photocard using Figma Make? These are collectible cards featuring a photo of an artist, available as inclusions found in albums & other merch.
As someone who's been listening to K-pop for years, it's a huge part of fan culture. But, not everyone is able to afford or get their hands on merch that would help them build collections, especially since the card included is often random.
Enter "Photocard Customizer"— users can upload images of scans (or their own photos!) that they have saved into a canvas and play around with different tools to personalize it—mimicking holographic film effects on clear toploaders to frames & stickers. They can also add these to a binder or download the decorated card.
Maybe niche, definitely fun.
Real-Life References
Stickers, holographic films, binders galore.
How Did It Go?
I put this site together in 2 days as a submission for Contra's Figma Makeathon. I wanted to make something fun, and something stemming from my own interests and experiences as a fan of music. It was a lot of fun trying to workshop how to prompt Figma Make to do what I wanted it to, and patiently learn how to be okay with reverting to previous versions and reframing instructions to avoid additional baked-in context that spun up modifications that I never asked for.
When it looked like I was almost done, I had to figure out how to completely refactor the structure of my Make file through prompting to account for responsive behavior, and doing that after a lot of progress had been made on the build was scary, but actually ended up making the overall experience and pages a lot more easy to interact with and expand on with the AI tool.
The site also behaved correctly in Figma Make and Google Chrome, but would have issues with the same actions in Safari. Troubleshooting that was confusing because I didn't understand what was causing the differences.
What Would I Add?
I initially had two sticker packs to give the user more options to work with, but Figma Make kept bringing back errors in rendering for one of the sheets whenever there were two. As a result, I had to cut out one of the variants. I'd like to add it back, though, and maybe explore an alternate layout to address the interaction challenges.
I'd also like to try adding a Supabase connector to the site so that any photocards saved in the binder across previous sessions are preserved. Once that's in place, adding more slots within the binder would help so that options are not limited.
See more projects
Go Back