Pace Layering and Atomic Design System Mental Models

How to think of design systems and model them appropriately

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:19] So now let's lay down the fundamental concepts of a design system. The four fundamental concepts we need to know before we move forward include what are design tokens, what is our source of truth, and two-medon models are really like working with the pace, layering, and atomic design.

  • [00:20 - 00:26] So let's start with design tokens. You may have heard about design tokens from here and there, but what is a design token?

  • [00:27 - 00:52] A design token basically is a tiny piece of information, a row value, that will be used across several of our digital products. A design token can be a color value as a hex string or an RGB or an HSL value, a spacing value in pixels, an animation or a saddle and many more values that can be represented by a single value.

  • [00:53 - 01:07] Going to the ground truth, how do we actually have a ground truth in our design system? We usually use a design tool like SKETs, Figma or Adobe XD, but this can be actually anything, like a Google seat if we want to be old school.

  • [01:08 - 01:24] In this course, we will work on a single Figma file containing all the important information we need. And the elements we need to start building the design system will include brand colors, typography, border, sados, spacing and some common components like a button component, for example.

  • [01:25 - 01:45] Now, the first of my two favorite Mendon models when I think about design systems is the paste layering thinking. And in this concept encapsulates the idea that slow moving things in the heart of our design system will bring the biggest changes on the outer layers when they would change.

  • [01:46 - 02:05] In our case, in the heart of the design system, we will have the design tokens and we expect that when we change the design token, all those changes will propagate to the symbol and to the more complex components. And the second Mendel model is called atomic design and many components libraries are actually using this.

  • [02:06 - 02:21] This model was first introduced by Brad Frost and described how atomic components can evolve to more complex organism. Later on, a new phase was added called ions, which is basically the phase of a unit of information.

  • [02:22 - 02:32] In our case, a design token. And now that we are familiar with some key concepts, let's move to the Figma file and start translating our design to engineering specs.

  • [02:33 - 02:58] [ Silence ]

So now let's lay down the fundamental concepts of a design system. The four fundamental concepts we need to know before we move forward include what are design tokens, what is our source of truth, and two-medon models are really like working with the pace, layering, and atomic design. So let's start with design tokens. You may have heard about design tokens from here and there, but what is a design token? A design token basically is a tiny piece of information, a row value, that will be used across several of our digital products. A design token can be a color value as a hex string or an RGB or an HSL value, a spacing value in pixels, an animation or a saddle and many more values that can be represented by a single value. Going to the ground truth, how do we actually have a ground truth in our design system? We usually use a design tool like SKETs, Figma or Adobe XD, but this can be actually anything, like a Google seat if we want to be old school. In this course, we will work on a single Figma file containing all the important information we need. And the elements we need to start building the design system will include brand colors, typography, border, sados, spacing and some common components like a button component, for example. Now, the first of my two favorite Mendon models when I think about design systems is the paste layering thinking. And in this concept encapsulates the idea that slow moving things in the heart of our design system will bring the biggest changes on the outer layers when they would change. In our case, in the heart of the design system, we will have the design tokens and we expect that when we change the design token, all those changes will propagate to the symbol and to the more complex components. And the second Mendel model is called atomic design and many components libraries are actually using this. This model was first introduced by Brad Frost and described how atomic components can evolve to more complex organism. Later on, a new phase was added called ions, which is basically the phase of a unit of information. In our case, a design token. And now that we are familiar with some key concepts, let's move to the Figma file and start translating our design to engineering specs. [ Silence ]