James Stone here, Design Systems Engineer. Last week I told you I am going to be taking a different format and here it is. Below are 3 fantastic articles along with my commentary of why they are relevant to the field of Design Systems Engineering.
Table of Contents
Featured Articles
Style Guide-Driven Design Systems | Brad Frost
Great article by Brad Frost of Atomic Design. The bulleted benefits should be on your radar if you are trying to sell a new Design System or Styleguide project at your organization. For example, Frost says, “The style guide should be a design system pilot project. The style guide can and likely should be built from the same components housed inside it.” I couldn’t agree more.
Design tokens for dummies – UX Collective
If you don’t know what design tokens are and you are designing web apps, you should find out quick. In my client projects, even if not a full blown design system, I always separate my Sass variables out into a separate tokens file full of variables. This sets the path for the future (makes them somewhat future proof) by making sure that I am only storing variables in this specific place. Then moving them to a larger system that translates across platforms (brand.ai for example) should be a simple process. The other benefit is that it puts all your critical variables in one place and makes creating documentation and emphasis a simple process.
Building a responsive card system – Harry Cresswell – Medium
If you watch the animated GIF in this article, you will see the basic live prototype process that you can use with any CSS Framework, UI Kit that you build and maintain, or CSS Utility Frameworks such as Tachyon or Tailwinds. I use this exact process in ZURB Foundation, and then I take the result to my underlying prototype once I get things dialed in.
–James Stone, Design Systems Engineer