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 complimenting my arsenal with Figma as my weapon of choice for UI design in 2019, I noticed that working with 3D and interactive content was not possible within Figma, especially when using grid systems.

In early 2019, I found that designers were growing increasingly interested in 3D and immersive art direction, yet lacked the tools to do so without hiring a developer or modeler. I decided to change that and, with it, created Device Models.

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