junWorking in the design-system(DS) project was my first task when I join in Piktochart as a front-end intern. Before I heard anything about it, I thought it was something like a UIkit but rather a system that contains what we need in design development.
But why do we need one?
The popular answer is to maintain consistency across different products and different teams also allow for a more agile process, reduce cognitive load and speeding up of development in the company. It also helps solve problems every designer and developer face when scaling up:
- User confusion
- Slow design process and development
- Difficult onboarding for the new designer/developer
To be short, Design systems help users.
Design systems have been power the frontend teams of Shopify, IBM, Atlassian, Airbnb, and even government like the US and Australia. Because it will help design development become more productive, much faster & will take the team collaboration to the next level!
Well, what a Design system really is about and what I have to know as a developer?
A design system is a popular concept of a system that contains:
Design Language
Design assets like Sketch Kit, AI Kit, etc. and branding guidelines such as typography, accessibility, motion, etc.
Component Library
Coded components usually in Javascript library or framework like React, Vue, Angular, or others.
Style guide
Which are the physical websites you've linked above that documents of the design language and components library.
Your technical approach doesn’t matter as much as creating a living, breathing system that’s flexible, maintainable, stable, scalable, and successful in the long-term. — Katie Sylor-Miller, Senior Software Engineer at Etsy
The main core of a Design system are usually involved designers, developers and product owners/managers.
Designers as they can breakdown the design-process into smaller parts, easier to work on, manage, change than the whole webpage.
Developers so they clear vision of how to build required components to maintain the unified styles and implement new features fast without writing more unnecessary code.
Product owners/managers as a component-based approach make requesting development teams for additional page elements a super easy process.
My day-to-day design system workflow
Our Design Systems is built with Vue.js that includes our design principles, components, patterns, type scale, color guidelines and spacing usage with additional prototypes.
Build 🏗
As we work in an agile workflow, first I get assigned to a task on JIRA then I will get the UI Mockup Figma from the UI/UX team. For example, if I work on a new component, I will have to think about does it have to be a functional component or non-functional component.Docs 📄
Write the documentation usually in Markdown/MDX that includes the new implementation. Or anything related to our design principles, type scale, color guidelines and spacing usage with additional prototypes.Test 👾
Added Unit-testing by test cases for functional bugs. Visual testing for UI bugs. In the CI/CD, our test suite linters runs in the background in every commit. Also, deploy to staging serves on our production and Design system website for the testing.Review 🧐
Create a pull request and get the code review on Github at the same time also from the UI/UX team if it meets expectations for functionality and appearance. Get all the feedback and resolved issues.Distribute 🥳
Then, I create a pull request that adds my new feature for release it and deploy to the Design system 🎉 For versioning, we are first tagging to new build in the GitHub before every major/minor patch.
That's it! Thanks for reading!
Some useful related Design systems resources to checkout on 😉👇
https://designsystemsrepo.com/design-systems/
https://designsystemchecklist.com/
https://www.learnstorybook.com/design-systems-for-developers
