Design Systems and Systems Design | Marvel Blog
📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Request Demo

Design Systems and Systems Design

What are the qualities of each role?

I’ve had several recruiters read my resumé about my experience in Design Systems and contact me about jobs. Only to find out they were hiring for people with Systems Design experience. I’ll be outlining what both topics are and help people understand the qualities of each.

Design Systems, Systems Design

Design Systems

An engineer who works on a design system typically has some interest in visual design and/or user experience. The engineer would be interested in colors, typography, spacing, and reusable components. They would also be interested in design tools like Sketch and Figma and how to integrate or enhance product design tools. Their work revolves around creating the building blocks that their peers can use to create interfaces and experiences quickly; keeping a consistent look and feel. They may also be responsible for coding features into components or creating the framework that allows the parts to be used easily by their peers.

These engineers are typically not developing apps or features nor are they often creating wireframes or flows, except when a smaller component has several states (eg. date-picker). However, it is common for these types of people to help their peers within feature teams integrate their deliverables into the larger system.

When this type of role didn’t exist, these engineers would liken themselves toward traditional frontend engineering roles. These roles might include:

Another resource on Design Systems:

Everything you Need to Know About Design Systems – Audrey HacqAn indepth write up about the fundamentals of any Design System.

About frontend

The definition of frontend (or front-end) has shifted over the years. Before JavaScript could run on the server-side; if you were a frontend developer you worked almost exclusively in web browser technologies. Your languages were HTML, CSS, and JavaScript. You hardly ever had to connect to a database or create an API.

Today, frontend developers are often required to be closer to what traditionally meant full stack. They are now not only responsible for the frontend (or user interface) but also serve that frontend, manage the state of the application, and connect to backend services. This is also why many of them do not have visual design experience or even CSS experience (a technology that is quintessentially frontend). They are now responsible for too much.

Personally, I wish the term frontend didn’t shift and instead we use JavaScript engineer to describe roles that use JavaScript on the browser and server as this more accurately describes what these engineers are doing.

More resources on this topic:

The Great DivideThe divide of those who self-identify as a front-end developer who have skill sets heavily revolved around JavaScript and others who skills sets are focused more on other areas of front-end .
Frontend Design, React, and a Bridge Over the Great Divide – Brad FrostWhere does Front end Designer sit in the great divide and how does this role work with React?

Systems Design

I’d like to first admit that I don’t identify myself as having systems design experience except that in my experience creating design systems, I often need to connect parts to create a larger system. This is the basis for the role of engineers with system design skills. These engineers are making decisions on how a database might connect to a server, how many load-balancers would be needed for web traffic, how to deploy code from a repository to different environments or perhaps as simple as creating an API for a component.

An engineer creating a system will be taking parts to create a greate whole. The process of deciding and moving the parts around is the design part of systems design. Deciding on which method to use to iterate over an array could be considered systems design (performance versus readability).
I don’t believe there are many roles that focus only on systems design except roles that include the word “architect”. As the name suggests, an architect designs the building, but other people follow the plans and build the structure. In the word of tech, architects are very senior engineers who create plans where junior engineers would learn and code using those plans.

More resources on Systems Design

System Design in Software Development – Didacus Odhiambo
What is the purpose of System Design and what types of elements are included?
Fundamentals of System Design – Vaibhav Aparimit
When designing systems, there are three primary concerns that should be addressed — reliability, scalability and maintainability and why they are important.

Takeaway

Design Systems is a focus that some designers, engineers, and other partners deliver to their peers in the form of guidelines, components, and other resources. Systems Design is a skill that engineers should possess when connecting different technologies together.

A person who creates the system in which designers and developers use the same resources and technologies could be called the system designer (ie. architect) of the company’s design system (ie. component library). However, a person working on a design system might not be the person creating it. They might just be adding to it or making changes. These might be people in the engineering roles listed above or designers, researchers, copywriters, and other partners. These are examples of people in design systems roles that are not systems designers.

I hope this helps people outside the community of design systems understand the usage of the design and systems better as it pertains to our work and focus.

This article was originally published on Donnie’s Medium page.

Senior UX Engineer at Compass | More on Donniedamato.info

Related Posts

Successful products from the Soviet Union that were created in isolation to the rest of the world.

How to choose the right UI component for the type of message you want to deliver to your users.

Making good component design decisions in react when it’s hard to see how an existing component can still be reused