This is not a design language

Structuring a design system.

Design Language is the description of the overall design of a digital product. If we consider the consisting elements alone we would arrive at a unified ‘root’ language which is used in most interfaces with ‘words’ such as button, inputs, checkboxes, forms, headings, select boxes, navbars, drop-down menus, toggles, lists, etc; the most ubiquitous UI components. But in reality, this root language needs to be supplemented with a style. And that’s the dialect in which design language is used to communicate the product. The brand needs to incarnate the product. We can address these matters asking questions about colors, typography, composition, stylistic aspects such as drop-shadows, gradients, borders, and tone.

Do we need shadows or not, Should buttons have borders? Do we use textures? how big should be the call to action button and what color? Do we use alternative font-styles or not.

A design system should contain all current UI patterns that exist within the interface with a consistent unified style. Used together in the app layout should have a consistent aesthetic which resolutes to the intended scope.

have meaning & give a formal structure

languages are complex systems. Everything has meaning and intent Clear and consistent rules are what make languages successful. Naming. This one is equally important and if you overlook it you do it at your own peril. Most design frameworks, eg: bootstrap, come with a naming system which is okay. When designing we need do the same. In Figma components named like btn/primary/btn_ico-left will create a 2 level nested menu in component-selecting UI. Pretty rad no? so naming is important to increase efficiency and agree with team members.

There are a couple of things which I love about figma. First of all, it has this awesome online mode. Secondly, the design of the UI is pretty cool. Third I find it revolutionary because you work in your browser and you can work collaboratively. This encouraged me to start a new project Figmastrap yea, you guessed it.