The Problem
After moving to Figma as my weapon of choice for UI design in 2019, I found my 3D workflow for design assets cumbersome and repetitive. Not every project would ultimately leverage real-time 3D in the final product — only still images.
Later in 2019, designers grew increasingly interested in 3D and immersive art direction. This tension became commonplace yet only done through a niche collection of creators.
Tools like @react-three/fiber emerged to better the experience on the development side, but there was no equivalent for designers. With Figma already dominating the design space, I found this to be as simple as a plugin.
Visual Identity
With a clear mission and audience in mind, it was time to create a name for itself. Branding was critical to stand out in the Figma catalog, where identity in a small 64x64 pixel square was the first thing a user sees.
I complimented the 3D feel of Device Models with a low poly monogram and bright, modern colors to portray its classy modernism. This included a matching typeface and color scheme that kept true to the feel of Figma.
Design and Development
Keeping the look and feel of Device Models consistent across its online presence was a difficult challenge. It was critical to remain consistent in both messaging and appearance while curating to different platforms.
Keeping to a universal, component-based design, the "look and feel" remained nice and tidy, and both the aesthetics and user experience were well-informed across the board.
Show, not Tell
I embrace the idea of "show, not tell" when marketing innovative products. Wide-spread adoption is momentum-based, and you have to give users a reason to jump onboard, hype or not. I like putting the product in front of them and letting its productivity powers speak for itself.
With a bold show of identity, I included the very 3D components used on the plugin both within marketing material and online, featuring its variations to communicate its flexibility (using Device Models, of course).
