Over the course of the last two weeks, I’ve bounced between 4 or 5 different projects to add to my portfolio. I enjoy exploring the many different sides of Design Systems, however, there are so many moving parts, that I find myself trapped in the rabbit hole each time I discover something new.
After doing some reflection on my previous project attempts, I recognize that one of my issues is in trying to go too big. I needed to start smaller. Similarly, my failures often involved going too deep. Taking on projects with design concepts or technology that I have yet to learn would cause me to lock up.
So I decided to start “small” and build my own design system from the ground up. As someone that’s supposed to help “bridge the gap,” I don’t want to limit myself to only knowing about the design aspects. I want to be able to understand the technology as well.
Foundation
While planning out my design system, I decided upon some key features I wanted to incorporate. Researching and testing out other design systems gave me an idea of how I wanted to incorporate these principals.
Shoutout to the folks over the Design System Slack channel that provided me with some helpful examples and explanations of their team’s design system architecture!
Some key principles I ended upon include:
Reusability: I already love creating components in Figma and I’ve always enjoyed toying with code. I’d like to use this opportunity to advance my Javascript abilities by creating reusable components in React. I also plan to integrate Storybook for creating these components.
Consistency: To maintain styles and other elements, I want to make sure I can implement design tokens. I plan to use Style-Dictionary for this, as I’ve already worked with the platform before.
Strong Documentation: Lastly, I want to make sure I can create and maintain great documentation. I plan to use Zeroheight for documenting the system. I can connect Zeroheight to Figma and Storybook for clear communication to both Designers and Developers.
Ease of Use: An issue I often read about what difficulty in the connection between Designer and Devs. With no current plan, I’d like to make sure that all resources are accessible and manageable by both parties. Whether that be through Figma addons, documentation or other technology, I’d like to create a more streamlined process.
These aren’t the only plans, and plans can always change but it’s nice to stick to one!
I hope that this experience can give me a better idea of how a design system functions not just in design, but in a technical sense as well. I’d love to hear any critiques or recommendations along the way!
Getting over myself!
To stop myself from wasting time trying to make things perfect, I plan to have the system available on GitHub and make my Zeroheight public. It’s important that I show the way there and not just the final product.
Check out squilpSystem github repo here
Check out the squilpSystem Figma file here
The project is pretty barebones in its current state. In Figma, I have tokens being created for each style and have some nested styles created as well. Those tokens are handled by Style Dictionary to create a .scss file for the project. Currently, though, these tokens aren’t well organized. I also have Storybook set up to begin working on my components.
Moving forward
I plan on making this as public as possible with the hope that I can receive some help or advice from someone with more experience than myself. I think that Design Systems are insanely interesting and I find this to a be a good starting point for myself.
