Structuring a design system.
Design Language is the description of the overall design of a digital product. If we consider the consisting elemnts alone we would arrive at a unified ‘root’ language which is used in most interfaces with ‘words’ such as: button, inputs, checkboxes, forms, headings, selectboxes, navbars, dropdown menus, toggles, lists, bref; the most ubiquitous UI components. But in reality this root language needs to be suplemented 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, componsition, stylistical aspects such as drop-shadows, gradients, borders, rythm 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 indended scope.
- have meaning & give formal structure
- languages are complex systems.
- Everything has meaning and intent
- Clear and consistent rules are what make languages successful.
This one is equally important and if you overlook it you doit 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 menbers.
There are a couple of things which I love about figma. First of all it has this awesome otline 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.