{"id":16032,"date":"2017-10-13T15:18:39","date_gmt":"2017-10-13T22:18:39","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16032"},"modified":"2024-05-20T00:14:01","modified_gmt":"2024-05-20T07:14:01","slug":"design-systems-abstraction-layers-model-better-understanding-implementation","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-systems-abstraction-layers-model-better-understanding-implementation\/","title":{"rendered":"Design Systems and Abstraction Layers: A Model for Better Understanding and Implementation"},"content":{"rendered":"

Let’s discuss the value of clearly delineating the mental model that is your design system, its artifacts, and the tools that implement it.<\/span><\/i><\/p>\n

Whether you\u2019re creating your own design system, or implementing a design system created by a third party, it is important to understand the relationship between each layer of abstraction, the importance of drawing and maintaining a clearly defined line between each, and the business-oriented considerations which drive and justify a<\/span> separation of concerns<\/span><\/a> between each layer of abstraction.<\/span><\/p>\n

In computing, an abstraction layer or abstraction level is a way of hiding the implementation details of a particular set of functionality, allowing the separation of concerns to facilitate interoperability and platform independence.\u00a0<\/span>\u2014\u200aWikipedia<\/a><\/p><\/blockquote>\n

In software development, separation of concerns is an architecture principle which drives the modular nature of a complex system. When following this principle, each section of the system addresses a separate concern. Concerns can be very general, such as hardware that software is being developed for, or very specific, such as the name of an individual method. <\/span><\/p>\n

In this article, we\u2019ll explore each layer of an abstraction model for design systems and how to use it for better understanding and adding more value. <\/span><\/p>\n

A Model for Design Systems<\/span><\/h2>\n

Minimally, at the highest level of abstraction, a design system should exist as four distinct areas of concern:<\/span><\/p>\n

\"design<\/p>\n

The four abstraction layers for a design system<\/span><\/em><\/p>\n

Let\u2019s apply this abstraction model to the concept of accessibility: <\/span><\/p>\n

\"Concept<\/p>\n

Our abstraction model applied to accessibility<\/em><\/p>\n