The V+V Design System
At Verbal Plus Visual agency, I owned the process of transitioning our outdated Sketch components into Figma, creating more innovative, complex designs that would speed up the time it took UX designers to create wireframes for clients.
Problem
Previously, we used Sketch to create wireframes for clients. We found that Sketch left designers with a lot of tedious and repetitive work due to the lack of responsiveness from components.
Working Group
Myself
Senior UX Designer
Senior UI Designer
Creative Department Director
My Tasks
Establish a roadmap and course of action for the creation of design components in Figma
Design components in Figma
Consult with Senior UX Designers and Leadership on roadmap and updates needed
Platform
Web Responsive
Platform
June 2022 to present
Constraints/Goals
Technical Constraints
Verbal Plus Visual designs for Shopify themes. When building out the component library, we had to consider base themes which do not require complex functionality as well as max states which are more complex.
Business Goals
Decrease the amount of time it takes for designers to create wireframes for various clients.
Allow for best in class UX designs to be baked into the new component library as our old Sketch components were extremely outdated.
Enhance the quality of work that we are delivering to clients.
Updated Figma Components​
Here are a few examples of the components that I built in Figma. When designing, I prioritized each component to have a base state with properties that could be turned on and off in order to achieve more maximal states for clients who wanted more complex functionalities on their Shopify sites.