For few months I was struggling with understanding what a design system is and how it differs from style guide. Enlightenment came in the form of, yep, you guessed it, fighting game, specifically Guilty Gear.

Then I understand what a system is. It’s not just collection of things, but how to use and make those entities interact. Rules and mechanic play significant part here.

Wait, how does it relate to fighting game?

Fighting game basically consists of various attacking mechanic. For example, punch, kick, throw or special moves. How to mix and match those then depends on the allowed system by the game. Guilty Gear has tighter window to input combo compared to Street Fighter.

That makes me realize that a design system doesn’t only consist of UI components but also rules of how to use those components that enables user to interact with a product and get the intended feeling.

Material Design has a superb documented rules on how to use their UI components while keeping the intended information structure. Atlassian and Elastic UI also fall on the same group here.

So, that’s my aha moment in understanding what a design system is. It’s a product that enables development of another product. It’s a playbook to convey information through specific means of interaction.

Now, on to some ranked Street Fighter V matches.

-end of thread.