5+1 mistakes I made in the process of building a design system 😬

Some honest notes while I’m still experimenting

Nick Foscolos
Jun 29 · 3 min read

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:

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. 🙋🏻‍♂️🤦🏻‍♂️👨🏻‍💻️

Nick Foscolos

Written by

Digital Product Designer. Expertise in UX, UI and visual design. Previous work covers branding, identity, graphic and editorial design.