HEADWAY -
2021 - Present
The Shipwright Design System UI Kit is a free Figma resource available on the Figma Community with over 7,000+ downloads.
It is designed to help designers jumpstart their projects with a comprehensive set of UI components, icons, and templates that follow a consistent design language.
Like hundreds of other UI kits, v1.0 included many components that were rarely used. With almost no details provided and no collaboration from the development team. There was a heavy emphasis on design in this release with many components, but it proved difficult to learn and manipulate from devs and other designers and product people’s perspective.
%202%20(2).png)
We conducted a UX Audit of version 1.0 before starting work on the new design components, and we worked closely with the
Developers from the very first to map out a course of action.
We established a group of components that were common across all projects and fundamental for getting things rolling. In 2.0, we've shifted our focus from quantity to quality.
“There’s so many components with no auto layout to use it on a project”
Sr. Designer
“A documentation and collaboration would have made this file a great tool for devs as well”
Lead Developer
“I have to detach components to use it my way. No Flexibility”
Sr. Strategist
Set a proper guidelines, rules and layout that should be followed across all components and pages - USE ATOMIC METHODOLOGY
A list of essential components that are mostly used to kick start a project with all the new features of of figma like auto layout, use of variants, styles etc
A proper documentation for each component with collaboration with devs so that everyone is on the same page
Use of “Base component” Methodology and many more...
“
William Shakespeare
Senior Designer ✌️
With this philosophy, we keep improving the components with variants, naming standards, and documentation with the help of Devs one at a time.
The designers on our team were willing to contribute to the videos on topics that interested them, and I chose to contribute as much as I could after I got answers and clarity on the plan of action for our design system course and we constructed the landing page for it.
%201.png)
We were able to work on separate components of the project at the same time in Figma because to its branching functionality, which not only made collaboration simpler but also sped up the development process.
It was easy to make the switch from Figma to Storybook. Thanks to the collaborative efforts of the engineers working on this edition, creating a storybook that can be used by both designers and programmers was a breeze.
This provides Shipwright a leg up on the competition by skipping the time-consuming step of producing low-fidelity prototypes and going straight to constructing and testing functioning software.
Essential Components with Atomic Methodology.
Proper documentation and naming convention collaborated with developers and engineers team.
Added recorded loom along with documentation for proper understanding of our users.
7,000+ Downloads on Figma Community
Driven efficiency in project kickoff by streamlining the design process by 80% with the Shipwright Design System.
“Wow! Thank you. Its perfect work!”
@ilya_ux, Figma Community
“Wonderfull”
@arianapannell, Figma Community
“It's great video, thank you!”
@alm3382, Youtube
“
Melissa Ganzfried
Senior Developer ✌️
Introducing VARIABLES to the new shipwright update
Implementing variables in Shipwright instead of styles
Having proper set of groups, Primitive and Semantic collection of variables
Recorded loom and documentation for proper use of variables and for developers. Also, a youtube video for marketing purposes.
Contribute a Variable Figma Resource for community out there - for easy understanding.
.svg){kind=icon}