Working 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
Top comments (6)
Good job on the article, I really enjoyed it!
I am a product owner for a UI Kit library which is based off our internal DS - and I’ve always struggle with the specification and communication with UX designers. They usually have a masters degree in psychology, but no clue in software development and therefore are missing fundamental concepts. Do you have similar problems?
Thank you! I'm glad that you enjoyed reading it :)
Yes, we have a similar issue between designers and developers. What we did was conducting an alignment meeting or workshop. For example, as developers, we prefer to use
blue-100,blue-200and so on to keep our codebase reusable and clean rather than come out with different own colors from designers.Thank you for your response. Oh yes, the coloring system was a drag at our company too. I guess we all have similar struggles on that topic - but a DS can at least help us to communicate (once it is established). Good luck with your internship & have fun :) Looking forward for more articles from you!
A fascinating read; thanks for putting this together. Some very excellent ideas and tools to learn, use and reference, especially when dealing with bigger clients.
Great article!
Could you please share what kind of work you involved in the day to day tasks?
Like design in sketch or other tools, html markup, etc.
Thanks! Usually building the elements in Vue.js but also following bootstrap standard to organise our code. I didn't design in sketch, I just take the UI mockup to build it.