Skip to main content

Device Models

Design and development of a Figma plugin to create mockups with 3D device models.

Visit website
  • Creative Direction
  • UX and UI Design
  • Front End & App Development
  • Motion Design

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).

The Result

Within 48 hours of release, Device Models became a popular tool, reaching 1,000 downloads. You can find the plugin on Figma's featured plugins collection to render 3D mockups all across designer spaces.

View on Figma