Rams├ęs Moreno

Portfolio

Wireframe Kit For Figma

Community File

Screenshots of a Figma Wireframe Kit

The Project

Having tried several wireframe kits, I felt I needed to create my own an share it with the community. The kit objectives were to have components that can be easily used in the Figma document, resized and its properties changed. Cool Gray Wireframe Kit: Making easier the creation of wireframes through a Figma kit that uses variants.
Available as Figma Community File with almost 5K downloads

Design

Knowing the main objectives of a Wireframe, my kit should use a very plain design, using only a grayscale palette and a common font. I selected an initial set of common used components

Screenshot of proto personas document
Mobile screens using Cool Gray Wireframe Kit components

The kit includes componets and styles for: Buttons, messages, navigation, forms, lists, content, icons and text. In total, 34 components, and hundreds of variants.

Screenshot of proto personas document
As an example, the indispensable button component include variants for primary, secondary or auxiliar style, and disable state.
Screenshot of proto personas document
The stepper component is one of the most time saver. With just selecting number of steps and the current step, the variant is automatically set.