A Customizable. Component-based. Vector-based. Mock-up creator... In Figma.

Having spent so much of my own time in photoshop creating various device mock-ups, there was plenty to be annoyed with. The super large file sizes eating up gigs of precious HD space, the transferring back and forth of content to/from Figma, how recognizable any halfway decent mock-ups had become, the limited amount of customization in said mock-ups... it was all sorta whatever to me.

Well, that naturally sent me down a rabbit seeing what all was possible... and after some extensive testing I was able to develop a rather robust set of tools for creating your own mock-up.

V1.0 Customizable tools set

• Background Color (Options / Color picker)
• Background Texture (Options + Overlay/Multiply blend modes)
• Background Image (BYOBackground– paste whatever you'd like... as long as it's flat)
• Device Style (Minimal / Realistic, base color)
• Device Color (Customizable color override from Color picker)
• Content Context (Status UI, Browser bar– all in light + dark)
• Content placement (Easy placement and cropping method)
• Notch/Island (none, small, large)
• Screen Texture (none, scratches, cracked)
• Scene Lighting (4 light scenes + option for light source direction)
• Atmospherics [BETA] ( Grain(3), 4 Focus options)
• Shadowing [BETA]

While it might look like there's a lot going on with many steps, it's really not all that intimidating once you're in it. Most of those tools are controlled by 2 drop-downs.. EZ PZ. While it's easy to use, below are a lot of the main functional highlights to the current release:

Functional Highlights

• The controls for most tools are a set(s) of toggles and dropdown menus– compliments of variant options and boolean. Tools that don't use it are either color pickers, or pasting your own content in a clearly designated layer.
• NO UNDERSTANDING OF BOOLEAN OR VARIANTS IS REQUIRED. It of course doesn't hurt, but you can navigate this without knowing how those functions work. (A very basic understanding of figma and the concept of Components is essential)
• There's lots of additional notations in the margins to help you along.
• The output is component based, so if you want to integrate this into something like a team library that can bring consistency. (it's very do-able, but not currently documented in this)
• Easy placement of content. The ability to freely-drag content within a canvas which includes an overlay to show what is both in and out of frame, so it's very easy to adjust to taste. (There's also guides to snap content to the canvas.)
• A system to easily export to all popular aspect ratios 16:9, 4:3, 3:2, 1:1 (and their portrait inverses).
• A compiler series of layers under the tools that shows the current mock-up to that point, and how that specific tool is being effecting it.
• An Isolation layer under tools– focuses on how any given tool is effected the mock-up in isolation. More documentation on this coming.