Basis Design System
A look at some of the components included in Basis.
- Organization
- Securedocs
- Roles
- Visual Design, Front-end Research, Front-end Development
Introduction
"Basis" is our internal component library and design system at SecureDocs. We use it for designing and building new applications or features. When I first joined the development team in 2018, one of the first projects was to start a component library - something simple to begin building new features. At the time, the development team was transitioning major features to React. The opportunity to collaborate on a component library presented itself, and we named this system "Basis."
The Figma Library
When we began using Basis, Figma introduced its shared library feature, which was a huge breakthrough at the time. This feature simplified the process of updating multiple designs, enhancing my efficiency and saving time.
Basis Components in Figma.
Building a Sandbox
While I was designing our Figma component library, the dev team adopted a popular open-source tool called "Storybook" for component documentation. Storybook streamlines the documentation and maintenance of components, reducing the overall workload. As the sole designer on the team at that time, Storybook proved to be immensely beneficial.
Another valuable tool included in Basis is called "Playroom," an open-source project by Seek. It allows me to quickly create product mockups and easily share them with the team, along with sample code to reproduce the design. It has significantly improved my workflow.
A look at Basis in both Storybook and Playroom apps.
An essential element in the development of Basis is the component library called "Semantic React UI." Initially, we had limited options for finding a primitive component library to get started, but "Semantic" fulfilled all the requirements by providing fundamental elements such as buttons, inputs, menus, and more.
Like any design system, Basis will never be truly "finished." I am always learning and seeking ways to enhance it. In early 2022, SecureDocs Inc. was acquired, giving me another opportunity to share this experience and knowledge with teams in our new, larger company.
Basis Components in action.
Tools & Libraries Used
Basis Playroom
Here's a peek of Basis loaded with Playroom, a useful tool for reviewing designs with developers using actual front-end code. I especially like using this tool with junior developers or new team-mates who are unfamiliar with our design system.