Design Systems

The following are some snippets of UI components, styles and guidelines taken from the various design systems I have built.

My Role

I have led the creation and maintenance of various scalable design systems in Figma ever since my first major project. I collaborated with developers on this, as these design guides ultimately form a crucial part of the developer handoff.

Challenges

When clients don't have a definite vision of their product, it becomes a game of guess-work when it comes to design systems. Conflicting inputs and a lack of real direction really destroys the consistency and stability that a proper design system offers. It also creates an environment where developers refuse to stick to design guides as they cannot keep up with the continuous flow of changes coming from up the hierarchy.

Process & Approach

Depending on the project and time available, I either start with a design guide or create one early on after designing the base visual elements. Small-scale, one-off projects don’t always require a full design system, but having reusable components within the file helps simplify future changes. For larger projects, I keep things minimal in the beginning. As the product vision gets refined through consistent conversations with devs and stakeholders, the system naturally evolves with fewer conflicts.

Results

Creating design systems helps maintain consistency and improves efficiency. It also plays an important role in bridging the gap between concept and reality, bringing the product once step closer to launch.

Gallery