ICS Wireframe Library

The Initiative

After finally making the leap from Sketch to Figma as a team, ICS needed new tools on the new platform to bring consistency and efficiency back into our wireframing process. I took the initiative to build components, type styles, and patterns that we frequently use across projects and compile them into a Figma library that could be added to any team project. Having a single source library for our wireframe process has allowed our UX team to work on projects together more fluidly, and work across projects with a more unified and consistent standard. Shown above is a sample wireframe creation using the library I created.

I defined type styles to include 6 levels of hierarchy for headers and 4 levels of hierarchy for body copy, with a clearly defined default. Patterns include (but are not limited to) news, job listings, testimonials, search and filter, and text blocks. Many of these pattern components also include variable layout options, which can be selected based on the individaul project's user and business needs. I aimed to make each of these elements as flexible and adaptable as possible.