5+1 mistakes I made in the process of building a design system 😬
Some honest notes while I’m still experimenting
To put some context I need to mention that I never build my own system before and certainly not for a web app. Finally — although the notes below are mostly tool-agnostic — my design tool of choice is Figma.
1. Using too many sources for guidance
I went to Design Systems Repo and start digging there. I was stunned by all the amazing well-documented design systems out there and tried to mix and match whatever seemed to be cool to include it. It didn’t work out but fortunately, it didn’t take me more than some days to realize it.
2. Putting everything in one file
Ok, that was a rookie one. The file became heavy, slow and hard to navigate through it. It’s not that I didn’t see that coming, but at first, it was convenient because at the same time I was designing the actual app in the same file. Furthermore, there is definitely more pain in the process of refactoring it. To be honest — and I think the Figma team needs a bravo here 👏 — it took way more time than I expected before things start to get slow.
3. Vague pattern on components creation
I was on “do-it-now-decide-later” mindset. 😖 Lots of mistakes here. Bad naming, different methods to represent states, careless layer structure, not defined constraints, to name a few. And of course, all these led me to frustration whenever I had to work on a page or on a component that I have made just a couple days before.
4. Building complex and hard to manage elements
It’s one thing to read about the atomic design, it’s another to understand its rationale and it’s completely different to put it in your workflow. I’m confident I’m on a good path lately, I have established my methodology but unfortunately — I guess — is an unavoidable mistake early in the process.
5. Understanding reusability wrong
Conceptually it was clear to me. Reusability is one of the main reasons that we use design systems. I caught myself though, trying too hard to build, for example, the ultimate data table and all its states, scenarios and cases, the one that when it will be done I will not need to design anything anymore and I’m not saying that it isn’t possible but I usually spent hours trying to serve the reusability instead of focus on the functionality as a design.
6. Not using comments
Figma has a feature that allows you to add a comment on every component you create — I apologize in advance but I’m not sure if there is something similar in the other design tools— and at first I was:
Pffff, that’s for kids, I know my components!
I don’t need to comment anything, it’s all there, in the layers.
I had to make one only to realize how convenient was thereafter to search, reach, and use an element.
To summarize — besides the actual design point of view — I realize the obvious. In order to build a scalable system, it’s less painful to move slower at the beginning and put some thought, patterns, and constraints, than to rush. Otherwise, you will have to refactor it, probably, more than once. 🙋🏻♂️🤦🏻♂️👨🏻💻️