The Role of Frontend Engineers in Design Systems, Part 1

Explore responsibilities frontend devs have in design systems, including preparing and maintaining coding style guides, component libraries and design tokens.

A design system is a collection of reusable components, guidelines and assets that help teams build cohesive products. Many popular design systems exist today such as Material by Google, Human Interface Guidelines by Apple, Fluent Design System by Microsoft, and more. These design systems (and many others) have become increasingly popular in recent years as they provide a way to maintain consistency and efficiency in design and development.

Frontend software engineers play a crucial role in the creation and maintenance of design systems. In this article, we’ll explore the many different responsibilities frontend developers have when working with design systems, which include preparing and maintaining coding style guides, component libraries and design tokens.

Coding Style Guides

One of the primary responsibilities of frontend developers when working with design systems is to implement and follow coding style guides. A coding style guide provides a set of rules and guidelines that ensure consistency in code across a team or organization.

As an example, one popular coding style guide that many use when structuring CSS classes is the BEM methodology. BEM stands for Block, Element, Modifier and it’s a naming convention that helps developers create modular and reusable CSS classes.

Using BEM, class names are structured like this:

.block {
}
.block__element {
}
.block--modifier {
}

The block is the main component or container, the element is a part of the block and the modifier is a variation of the block or element. An example of using BEM to structure how CSS classes are applied can look something like the following:

<div class="card card--featured">
  <h2 class="card__title">Featured Product</h2>
  <p class="card__description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <a href="#" class="card__link">Learn More</a>
</div>

We have a card block with three elements: card__title, card__description and card__link. The card--featured modifier is used to indicate that this particular card is a featured product.

BEM is only one example of a coding style guide for how to structure HTML elements and CSS properties. Many others exist such as:

• Atomic Design: a methodology that divides design systems into small, reusable components called atoms, molecules, organisms, templates and pages.
• SMACSS (Scalable and Modular Architecture for CSS): a coding style guide advocates for a modular approach to CSS architecture, with separate files for base styles, layout styles, module styles, etc.
• OOCSS (Object-Oriented CSS): a coding style guide that emphasizes creating reusable, object-oriented CSS by separating structure with classes and avoiding nested selectors to create more modular and maintainable code.
• And many more.

Coding style guides can extend beyond CSS structuring and can also include guidelines for naming conventions, indentation, formatting, commenting and more.

Design Tokens

Design tokens are another important aspect of design systems that frontend developers can be responsible for maintaining. Design tokens are reusable pieces of design information, such as colors, typography and spacing, that are defined in a central location and can be accessed and reused across multiple projects.

For example, a design system might define a set of color tokens:

// Colors
$color-primary: #0088cc;
$color-secondary: #3d3d3d;
$color-success: #47b348;
$color-warning: #ffae42;
$color-error: #dc3545;

These color tokens can then be used in the component library and throughout the project:

.button--primary {
  background-color: $color-success;
  color: $color-primary;
}

In addition to colors, design tokens can also define other aspects of design such as font sizes, font families, line heights, spacing and more.

// Font sizes
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 20px;
$font-size-xl: 24px;

// Spacing
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 32px;
$spacing-xl: 64px;

By defining these values as design tokens, they can be easily reused across the project and updated from a central location, which helps to ensure consistency and maintainability.

Another benefit of using design tokens is that they make it easier to implement changes to the design system. For example, if a designer decides to change the primary color of the design system, the change can be made to the design token for the primary color (e.g., $color-primary) and it will be automatically applied to all components and styles that use that token. This saves time and effort compared to manually updating each component and style individually.

It’s worth noting that design tokens can be defined in various formats such as Sass variables, CSS custom properties, JSON or even YAML. The format used will depend on the preferences and needs of the project and team.

Component Libraries

Another important responsibility of frontend developers in design systems is the creation and maintenance of component libraries, which are a collection of reusable UI components (like buttons, inputs and forms) that can be used across a project or organization.

The benefit of component libraries is that they enable designers and developers to work more efficiently as existing components can often be reused instead of having new ones built from scratch.

Modern JavaScript libraries and frameworks, like React, make it easy to create reusable components that can be easily shared and used across different projects by allowing us to build encapsulated components that manage their own state.

For example, we can create a React component for a simple button that uses certain class names established in our design system:

import React from "react";
import "./Button.css";

function Button(props) {
  const { children, primary, ...rest } = props;

  return (
    <button className={`button ${primary ? "button--primary" : ""}`} {...rest}>
      {children}
    </button>
  );
}
export default Button;

In the above example, the <Button /> component is defined as a function that takes in props and renders a <button /> element. The component takes in a primary prop which dictates whether or not the button should be styled as a primary button.

Elsewhere in our app, we can use the <Button /> component to render the button element we expect to show from our component library.

import React from "react";
import Button from "./components/Button";

function App() {
  return (
    <div>
      <Button primary>Click me. I am the primary button!</Button>
      <Button>But click me too.</Button>
    </div>
  );
}

export default App;

By building and using component libraries in this way, we ensure consistency across our application which saves time and effort in development and makes it easier to maintain and update our design system over time.

Building a Design System with Kendo UI

Building a design system from scratch can be a daunting and time-consuming task, especially for organizations with limited resources. However, using a UI component library like Progress Kendo UI can significantly simplify the process.

Kendo UI is a comprehensive library of UI components, such as buttons, inputs, grids and charts, that can be used to build web applications. Kendo UI is built with customization in mind, making it an excellent starting point for building a design system. And the ThemeBuilder tool is built to help.

By starting with Kendo UI, frontend developers can customize the library to fit their organization’s specific needs. This includes defining design tokens for colors, typography and spacing, as well as creating custom components and styles that adhere to the organization’s brand and design guidelines.

For more details on how this can be done, refer to the article Building a Design System with Kendo UI written by Thomas Findlay.

Wrap-up

In conclusion, design systems have become increasingly popular in recent years as they help teams build cohesive products and maintain consistency and efficiency in design and development. Frontend developers play a crucial role in the creation and maintenance of design systems, including preparing and maintaining coding style guides, design tokens and component libraries.

When working with design systems, other important concepts also need to be kept in mind, such as the accessibility of UI components, how components in the design system are optimized for performance, how well-documented the components in the design system are, etc. We’ll explore and discuss more of these concepts in a follow-up article!