Case Study: Technical
Technical spec//15-hour rapid build
I was hired to design one character select screen and show the developer how it moved. I proposed a system that builds all of them instead, for seven more hours. The client had a funding meeting coming up and needed presentation-ready images from the same file the dev would work from. Eight hours would have delivered the screen she asked for. Fifteen delivered a component architecture she could keep using after the meeting, and after me.
DesignedAI Art Hero composition and working prototype, built in Figma. Character art is generative, standing in for the client's protected assets.
The Brief
The spec was a character select screen for a tablet game, players aged 8 to 15. I specced placeholder assets in from the start, so the system stayed testable and presentation-ready the whole way through rather than waiting on final art. Fifteen hours, blank canvas, full delivery.
DesignedAI Art Component architecture, properties panel, token system, and composition, built in Figma. Character art is generative, standing in for the client's protected assets.
Who It Had to Work For
The client was a non-technical founder on a small team, with no dedicated design resource after handoff. That set the real requirement: the system had to be operable by someone who does not work in Figma every day. Duplicating a screen, swapping a character, or building a developer-ready variation had to be possible without opening the structure underneath or asking a designer to do it. The properties panel is the whole answer to that, every decision behind it exists so the file keeps working once I am no longer the one using it.
One Panel, Every Character
Scaling a UI across characters is an architecture problem before it is a design problem. One master component holds 20+ nested components, surfaced through a single properties panel. Archetype, copy, assets, animation behavior, and lighting all swap from there, with nothing underneath to open or break. Adding a character means uploading the art and setting its color theme, the framework already handles the rest, however many come after.
DesignedAI Art Component build, atomic structure, cropping, shading, glow treatments, and CTA design are my work. Character art is generative, standing in for the client's protected assets.
Tokens Carry the Light
Every glow, outline, and lighting effect runs on a global token structure. Five accent colors with opacity variants carry the visual language across all archetypes, so reskinning happens at the token level and propagates with no drift between components. Every element stays individually editable underneath, and extending the token set opens cross-archetype color mixing.
DesignedAI Art Token architecture, color modes, screen design, and composition are mine. Character art is generative, standing in for the client's protected assets.
What the System Opens Up
With the architecture in place, a new character is a paste-and-rename. Motion specs, token export, and additional screen types extend from what is already built. Deeper token work opens cross-archetype theming, which gives a team seasonal content, alternate skins, and new characters without starting over each time. Complex underneath, frictionless on the surface, and designers, artists, and engineers all work from the same source of truth.
Contrast ratios, touch target sizing, and readability are validated across every color mode and built into the token architecture. Any archetype added to the system inherits that compliance. Accessibility is structural here, not a final check.
DesignedAI Art Four archetypes rendered from the same master component: screen design, token architecture, and color modes are mine. Character art is generative, standing in for the client's protected assets.