Back to Top
A simplified wireframe design kit for designers to quickly concept and build wireframes and user flows in Figma.
The main purpose of the wireframing process in product design is to give clear insight on page structure and user interaction.
When designing wireframes, designers often get caught up in visual details, spending more time on creating and sourcing elements than focusing on user flows and structure.
Streamline the process of creating wireframes to allow designers to focus on the structure and functionality of the screen as opposed to its visual representation.t
A simplified wireframe design kit for designers to quickly concept and build wireframes and user flows in Figma.
Product Designer
For my research, I studied existing design kits, wireframe-focused articles by other designers, case studies, and my own experience as a designer.
Focusing on mid-fidelity wireframes, which gives the audience enough context without stylistic choices, this led to the following insight on what makes a good wireframe:
  • Wireframes should be a blueprint of a page's structure, layout, information, and functions.
  • Wireframes should be focused on communicating ideas, user flow, and goals.
  • Wireframes should plan the hierarchy of content.
  • Wireframe should show how a user interacts with it.
Designers don't want to reinvent the wheel everytime they have to make wireframes.
Designers lose time by focusing on creating or sourcing design elements.
Wireframes can often be too stylized and distract the audience.
Wireframes can easily get too specific which takes away from the intention of the screen.

Restaurant owners need it to be customizable to their brand while still being simple to edit. Customers need it to be accessible and intuitive to navigate.

Various Figjam Notes
A simplified wireframe design kit for designers to quickly concept and build wireframes and user flows in Figma.
The library will be built in Figma, an extensive design program used for interface design. Figma allows the library to be used in collaboration between teams and to the Figma community of designers.
Components are elements you can reuse across multiple designs. They help to create and manage consistent designs and can be highly customizable.
*For example, a design can utilize one button component across an app design that can be customized by size, color, and font weight.
Primary Goals
Flexible Building Blocks
Organized Library
General Icon System
Consistent but Non-stylized Design System
User Flow Elements
Ready-made Templates
The Process: Zone, Layout, Specify
Depending on timeline, the wireframe process can be quick in some projects and more detailed in others. Block placeholder components make it easy for designers to brainstorm structure by zoning sections, or go straight to laying out more specific content.
Example: User Flow
Hardwired includes annotation and directional elements that designers can use to present user flows.
User flow for scheduling a health appointment through a patient portal
Design Library
Hardwired's components and templates are designed on a 4pt grid system for flexibility and consistency. The design library is ever growing and consists of base components such as buttons and input fields as well as more complex components such as user registration forms and data tables.
Component Overview
Content Placeholders
Content blocks can quickly be specified by choosing one of the pre-built settings or using a label.
Text Placeholders
With block and single-line options for text placeholders, designers can switch between different text weights and sizes as they build.
Prebuilt Assets
Assets such as navigation bars can be customized (font weight, icons, labels) straight from the library.
Overall, I found that there will always be ways to make a design system work better and the only way to find out how was by continuously testing.
I built Hardwired while working on multiple projects simultaneously. This allowed me to test out components within different scenarios. This led to multiple rounds of edits that ultimately made the library more efficient.
Simplicity vs. Specificity
I focused on giving designers the flexibility of specifically calling out certain elements while leaving others vague. For example, section headers often need to be specified so the audience knows what they’re looking at, but image captions can be left as a text block placeholder and changed within the settings when necessary.
Going Back to the Research
In the process of building out the system, it was easy to get caught up in visual details and creating complex settings within components. By coming back to the research insight and what makes a good wireframe, I was able to stay on track with the initial goals in mind.
Moving Forward
As I create more wireframes, the design library will grow to have more elements. I also plan on integrating the use of variables within component settings to further streamline the editing process.
After testing with designers, the end goal is to publish it to Figma’s community for all to use.