DEV Community: Pavel Laptev

Design Systems Entropy

Pavel Laptev — Mon, 21 Aug 2023 18:41:28 +0000

👚 Think about your closet. When you first set it up, everything is in its place, neat and tidy. But as time goes on, something happens – it gets messy. Clothes get mixed up, some are forgotten in the back, and you might even lose a few favorites.

In the world of design, particularly when you're working on a design system, something similar can occur, and I can call it "design systems entropy." Just like your orderly closet turning into a mess, design systems can slowly lose their organization and consistency.

The Problem of Decay

But as design systems grow and change, they have to fight against something called entropy. Here's a simpler way to understand it:

Too Many Ingredients 🥄: Imagine you're baking cookies. If you keep adding more and more ingredients without a plan, your kitchen can become a mess. Design systems can be like that – they start simple but can get messy as they grow.

Different Cooks, Different Tastes 🍳: Now, picture a group of chefs making the same dish. Each chef might add their own twist to the recipe. Similarly, when different people work on a design system, they might interpret the rules slightly differently, leading to inconsistencies.

These "different people" can also be you. Even if you work alone on a design system, here and there, little by little you're changing things e.g. when Figma announce variables, or when you want to try a new tricks or organization methods. And you don't notice these small leftovers that remain unchanged.

Think about how your fashion taste changes over time. Design systems also need to keep up with what's cool, but this can make things look different over time.

Upgrading Your Kitchen 🧰: The previous problem leads us to this one — the tools and technology designers use are always getting better. If a design system doesn't keep up, it can lead to problems and inconsistencies.

Missing Steps, Communication Matters 📝: Imagine your recipe has some missing steps, and you have to guess what to do next. In design, if the rules and instructions aren't updated or clear, designers and developers might make guesses that lead to inconsistencies.

How to Avoid Entropy

Even though design systems entropy is a bit tricky, we can do some things to handle it:

Think ahead, Use Strategy 🌟: It can be tough to add something to a system if you haven't left space for it or thought about how to do it. So, here's some advice: before you create a design system, think about what it should look like. Is it for small businesses, and might they grow in the future? If they do, how will you scale the system?

For example, let's say you make a system and later need to make it accessible, add new elements, improve colors, or even change how things work. Or maybe you need to add a dark mode. If you didn't plan for these things in advance, updating the system to work with them can be a difficult job.

So, come up with a design strategy — who are your customers, how will you expand the system, and what elements and blocks should be part of the system. Think about all these things before you start designing.

Use Pipeline 🚢: Create and implement a right pipeline for maintaining the system and adding new components. Avoid making simultaneous changes and additions to the system, as it can make it difficult to track progress and monitor the system's performance.

Watch And Measure 👁️📏: This step becomes important if you have to deal with large systems and which used in many files and project. It helps you check the adoption rate, where the system used and in what ways.

Demo Days 📣: To maintain order and alignment across teams (design and development), consider implementing Design System Demo Days. These are dedicated occasions to showcase the progress made, reveal recent changes, discuss plans for the future, and obtain valuable feedback.

Refactoring, Simplicity and Streamlining 🧹: Simplifying processes and reducing unnecessary complexity can prevent the system from becoming overwhelmed by inefficiencies. There are a few simple rules for refactoring:

Refactor small pieces, step by step
Always notify your team about what you're going to refactor
Test your refactor on different projects before announce changes.

Watch for artifacts 🧐: small inconsistencies inside components, we don't pay attention to them, utils they become a problem — I mean outdated component properties that didn't alight to your last methodology, or old properties that where mix with old one.

Think outside the system 🌐: Don't isolate yourself from other design processes happening in your company. Remember who your customers are, and stay close to them. The design system influences every part of the product or brand. Including design system engineers in the design process can also ensure that the system is maintained and updated to meet the needs of the entire organization.

Open-Mindedness 🌈: Just as medical researchers explore various avenues to combat cancer, a system should remain open to diverse ideas and perspectives. This inclusivity can spark innovation and prevent the stagnation that arises from groupthink.

Embracing the Challenge

Design systems entropy might sound complicated, but it's also what makes design exciting. It's like solving a fun puzzle – even though it can be a bit tricky, it's a chance for designers and teams to get better at what they do. By knowing about and dealing with entropy, we can make sure that the things we create on the internet look great and work well.

Simple grid system with subgrid classes

Pavel Laptev — Mon, 10 Apr 2023 10:25:49 +0000

Hello there!

A while ago, I wrote a simple flexbox grid system. Recently, I faced the same task again, but this time, we could rewrite it in native CSS grids. Additionally, an important addition is that we should be able to use subgrids because many of our designs contain sections that use the main grid.

Why not to use a subgrid instead? Well, the support is very poor and I don't want to use JS polifills in a pure CSS task.

Main grid

First, let's define general variables:

// Define the number of columns at each breakpoint
$grid-desktop-columns: 12;
$grid-tablet-columns: 12;
$grid-mobile-columns: 6;

// Define the max-width of the grid container at each breakpoint
$grid-desktop-width: 1440px;
$grid-tablet-width: 1024px;
$grid-mobile-width: 620px;

// Define the column width and gutter for the grid
$grid-column-width: 1fr;
$grid-gutter: 20px;

Now, let's write a .grid class that will serve as the main container for our grid system. This class will be used to wrap elements where we'll use our grid system.

.grid {
  display: grid;
  grid-template-columns: repeat(12, $grid-column-width);
  grid-gap: $grid-gutter;
  padding: 0 50px;
  margin: 0 auto;
  max-width: $grid-desktop-width;
  width: 100%;

  @media only screen and (max-width: $grid-tablet-width) {
    padding: 0 40px;
  }

  @media only screen and (max-width: $grid-mobile-width) {
    grid-template-columns: repeat($grid-mobile-columns, $grid-column-width);
    padding: 0 20px;
    max-width: $grid-mobile-width;
  }
}

Column classes

Next, we'll write code that generates class names for elements that won't include children that use subgrids, but just should take the position like from column 2 to column 12. In order to do so, we'll use SCSS loop function:

// MAIN GRID
@for $i from 1 through $grid-desktop-columns {
  @for $j from $i through $grid-desktop-columns {
    .grid-desktop-#{$i}-#{$j} {
      grid-column: #{$i} / span #{$j - $i + 1};
    }
  }
}

@for $i from 1 through $grid-tablet-columns {
  @for $j from $i through $grid-tablet-columns {
    .grid-tablet-#{$i}-#{$j} {
      @media only screen and (max-width: $grid-tablet-width) {
        grid-column: #{$i} / span #{$j - $i + 1};
      }
    }
  }
}

@for $i from 1 through $grid-mobile-columns {
  @for $j from $i through $grid-mobile-columns {
    .grid-mobile-#{$i}-#{$j} {
      @media only screen and (max-width: $grid-mobile-width) {
        grid-column: #{$i} / span #{$j - $i + 1};
      }
    }
  }
}

output for this code is:

.grid-desktop-1-1 {
  grid-column: 1/span 1;
}

.grid-desktop-1-2 {
  grid-column: 1/span 2;
}

.grid-desktop-1-3 {
  grid-column: 1/span 3;
}

.grid-desktop-1-4 {
  grid-column: 1/span 4;
}

.grid-desktop-1-5 {
  grid-column: 1/span 5;
}

//... etc

Subgrid

In order to use subgrid for children elements we'll generate basically the same classes as above but they will include display: grid as well and create amount of columns they take from the class name. Here is the class example:

.subgrid-desktop-3-8 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
  grid-column: 3/span 6;
}

number 6 + 1 here, is the last column number the element takes 8 minus the first column the element should take 3.

So, here is the code for subgrid classes:

// SUBGRID
@for $i from 1 through $grid-desktop-columns {
  @for $j from $i through $grid-desktop-columns {
    .subgrid-desktop-#{$i}-#{$j} {
            display: grid;
            grid-template-columns: repeat($j - $i + 1, $grid-column-width);
      grid-gap: $grid-gutter;
      grid-column: #{$i} / span #{$j - $i + 1};
    }
  }
}

@for $i from 1 through $grid-tablet-columns {
  @for $j from $i through $grid-tablet-columns {
    .subgrid-tablet-#{$i}-#{$j} {
      @media only screen and (max-width: $grid-tablet-width) {
                display: grid;
                grid-template-columns: repeat($j - $i + 1, $grid-column-width);
                grid-gap: $grid-gutter;
        grid-column: #{$i} / span #{$j - $i + 1};
      }
    }
  }
}

@for $i from 1 through $grid-mobile-columns {
  @for $j from $i through $grid-mobile-columns {
    .subgrid-mobile-#{$i}-#{$j} {
      @media only screen and (max-width: $grid-mobile-width) {
                display: grid;
                grid-template-columns: repeat($j - $i + 1, $grid-column-width);
                grid-gap: $grid-gutter;
        grid-column: #{$i} / span #{$j - $i + 1};
      }
    }
  }
}

Now we can use these subgrid classes instead of our grid-#breakpoint-#from-to classes. We can use grid-#breakpoint-#from-to classes if we don't have any subgrid children inside.

Here is a link to the demo and full code:

https://codepen.io/PavelLaptev/pen/bGmNNWR

Profile picture component

Pavel Laptev — Sun, 23 Oct 2022 21:46:01 +0000

Hi! I want to share a component of the profile picture.
At the first glance, there is nothing special, but… we're going to do a lettered avatar, because not all users upload their profile picture, so, we need a placeholder.
I think you're familiar with this "lettered avatar" concept

As an example, I found these packages

But our component is more specific, and I don't see any need to use external libraries, because the component is pretty simple. So let's break it down.

The design

The design is pretty simple. There will be two states and another one meta when the image is loading. This is how they look like:

Step 1. Image as a `background-image`

This is our step one we need to add two props here — first is the className we will manage the size of the component with this prop, and the second is image. I added it as a background-image and not as background because I manage other background props in component's css. There will be enough background-size: cover and background-position: center



// ProfilePic/index.tsx
import React from "react";
import styles from "./styles.module.css";

/////////////////////////////////
//////// TYPES AND PROPS ////////
/////////////////////////////////

export interface Props {
  className?: string;
  image?: string;
}

///////////////////////////////
///////// COMPOENENT //////////
///////////////////////////////

const ProfilePic: React.FC<Props> = (props) => {
  return (
    <div
      className={`${styles.avatar} ${props.className ? props.className : ""}`}
      style={{
        backgroundImage: `url(${props.image})`
      }}
    > 
    </div>
  );
};

ProfilePic.defaultProps = {
  className: "",
  image: ""
} as Partial<Props>;

export default ProfilePic;

Step 2. Generate random gradients

Oh, there are so many ways how to generate gradients. In my taste the best way is to take two primary colors from the picture when you upload it to a server, … but we don't have this opportunity, so we will use predefined pairs. Also, there is another way to generate fully random colors

There is one important condition for gradients — the gradient should always be the same for each user, but we can't store gradients in a DB, because we have old users as well, they should have the same functionality as new users. We can solve this by generating a hash from the user's name and then convert it into a color.

This is our function to make the gradient, basically the function returns one gradient pair from the pairs array. This approach has one disadvantage — the more users in a row you have, the more gradient pairs you need, otherwise you will see gradient duplicates.



// stringToGradient.ts
const gradients = [
  ["#FBB199", "#FFD12E"],
  ["#E2ECA6", "#77A3FA"],
  ["#A7A0EF", "#77A3FA"],
  ["#94BE39", "#FFF3B4"],
  ["#FFA4A4", "#737ABB"]
];

const stringToGradient = (string: string) => {
  // trim the string, remove all spaces
  const trimmedString = string.trim().replace(/\s/g, "");

  // this is how we take the first letter. It works with emojies.
  const startHash = trimmedString
    .split("")
    .reduce((acc, char) => acc + char.charCodeAt(0), 0);

  // Covert the hash number into the number we can
  const gradient = startHash % gradients.length;

  // and return the linear-gradient
  return `linear-gradient(45deg, ${gradients[gradient][0]} 15%, ${gradients[gradient][1]} 90%)`;
};

export default stringToGradient;

We will add this function as the second image background and if there is no image, or it's still loading, a user will see the gradient.



// ProfilePic/index.tsx
import React from "react";
import stringToGradient from "./stringToGradient";
import styles from "./styles.module.css";

/////////////////////////////////
//////// TYPES AND PROPS ////////
/////////////////////////////////

export interface Props {
  className?: string;
  name: string; // pass it into `stringToGradient`
  image?: string;
}

///////////////////////////////
///////// COMPOENENT //////////
///////////////////////////////

const ProfilePic: React.FC<Props> = (props) => {
  //
  return (
    <div
      className={`${styles.avatar} ${props.className ? props.className : ""}`}
      style={{
        backgroundImage: `url(${props.image}), ${stringToGradient(props.name)}`
      }}
    >
    </div>
  );
};

ProfilePic.defaultProps = {
  className: "",
  image: ""
} as Partial<Props>;

export default ProfilePic;

Step 3. Add a letter

There are some technics where devs generate letters with canvas and then convert them into images. But I'm not the fan of the approach, because it's not scalable. You need to generate several images with the letter for different sizes or one universal, that can be heavy.

I think it's better to use vector — we can scale it, it has a small weight, and it's easier to maintain.

Here how we will do this. We can't use usual tags like span, p, because you can't scale them if you set the avatar size from 60px to 120px, your font-size: 16px remains the same. But SVG text tag can handle the magic of scaling. You set the default font-size and then it will be scaled depending on the size of the parent, just set the size of SVG 100%.

We will also need to align the text to the center. Just add textAnchor="middle" and alignmentBaseline="middle" to the text and set the y and x. x,y params can be relative from font to font, but for me the ideal center is x="50%" and y="52%".



// ProfilePic/index.tsx
import React from "react";
import stringToGradient from "./stringToGradient";
import styles from "./styles.module.css";

/////////////////////////////////
//////// TYPES AND PROPS ////////
/////////////////////////////////

export interface Props {
  className?: string;
  name: string;
  image?: string;
}

///////////////////////////////
///////// COMPOENENT //////////
///////////////////////////////

const ProfilePic: React.FC<Props> = (props) => {
  //
  return (
    <div
      className={`${styles.avatar} ${props.className ? props.className : ""}`}
      style={{
        backgroundImage: `url(${props.image}), ${stringToGradient(props.name)}`
      }}
    >
      {!props.image && (
        <svg className={styles.letterPlaceholder} viewBox="0 0 60 60">
          <text x="50%" y="52%" textAnchor="middle" alignmentBaseline="middle">
            {Array.from(props.name)[0].toUpperCase()}
          </text>
        </svg>
      )}
    </div>
  );
};

ProfilePic.defaultProps = {
  className: "",
  image: ""
} as Partial<Props>;

export default ProfilePic;

And the final result 👉 codesandbox