Design Systems for Developers
$5.99
Minimum price
$12.99
Suggested price

Design Systems for Developers

Learn how to code design systems that scale

About the Book

Confidently Develop a Company-Wide Design System At Scale

Developing a design system demands more than a UI component library and Storybook.

As a developer working on a design system, you're responsible for extracting design specifications from design files and translating them into code. If that code cannot scale across all the applications that are consuming the design system, or that will consume the design system in the future, the company suffers.

You can easily get stuck building very narrow tools, like a React component library without a firm foundation. Because a React component library is great, but it can be costly if you do it too soon. At any company, applications can vary by platform (i.e. web) and technology (i.e. React). If all you have is a React component library, as soon as you introduce an application with a different technology (i.e. Vue), then you have to find a way to share the design specifications between the React component library and the Vue component library. So, you might create a CSS-in-JS library that can encapsulate the design specifications and be consumed by the React and Vue component libraries respectively.

But, what happens when a request arises for an encapsulation of the design specifications in a way that would work for a plain HTML site? Well, you could move the encapsulation of the design specifications from a CSS-in-JS library to a plain CSS file. However, that limits the React and Vue developers from using their preferred technologies, and that breaks down when a non-web application is introduced (i.e. an Android mobile app). Usually what happens is that the React and Vue developers would carry along with a CSS-in-JS library and the plain HTML developers carry along with a plain CSS file. The issue is that you have your design specifications represented in code in multiple places. You can no longer know which one is the "source of truth." You generate an increased risk that the various applications in a company are out of sync with the official design system and with each other.

At the end of the day, you need to represent your design specifications in code in a single place. From that single "source of truth," you can then generate the platform deliverables (i.e. CSS variables, JS modules, etc.) What you don't want to do is to create platform deliverables without a single source of truth, without a mechanism to keep all the consumers of those deliverables in sync with the design system and one another.

It turns out that many companies have been looking into these problems including Shopify, Adobe, Discovery Education, Morningstar, Orbit, Salesforce, Bloomberg, and more.

The solution is creating design tokens and managing a style dictionary.

Design Systems for Developers is a deep dive into the need for design tokens, an explanation of them, and practical solutions for using them to launch design system tools into production.

Moreover, I emphasize the fact that tools and automation are only useful if good communication is happening between designers and developers in the first place.

In this book, you'll not only learn the technical skills that go into building design system tools for production, but also the soft skills required for collaboration between designers and developers.

Whether you're a designer or a developer, this book is for you.

I trust that after reading this book, developers will be able to work on a design system for any company, regardless of the number of applications and the platform and technologies that those applications are geared for.

I also trust that designers will have a better understanding of their role in collaborating with developers to create a robust design system.

In this book, we'll outline the problems associated with creating tools, like a React UI component library, to encapsulate the styles of a design system, such as the inflexibility of scaling when new applications arise targeting a different platform and tech stack.

From there, we go over how these problems may be solved by creating design tokens, representations of design specifications in code, and style dictionaries, a central management system for storing design tokens and transforming them into platform deliverables.

We'll write some code, discuss different approaches, and cover the very practical details, like how to schedule meetings to collaborate with designers.

Table of Contents

  • 1 - The Mission
  • 2 - The Problem
  • 3 - Introducing Design Tokens
  • 4 - Introducing Style Dictionaries
  • 5 - Extracting Design Tokens
  • 6 - Naming Design Tokens
  • 7 - Valuing Design Tokens
  • 8 - Storing and Transforming Design Tokens
  • 9 - Delivering Design Tokens
  • 10 - Creating Tools and Assets From Design Tokens
  • 11 - Ideas for Real-World Collaboration
  • 12 - The Conclusion

Free cheatsheet from the book: https://cheatsheet-maker.herokuapp.com/sheet/607d7e5f0d3f830015eb9d87

About the Author

Michael Mangialardi
Michael Mangialardi

Michael Mangialardi is a software developer specializing in UI development with React and fluent in UI/UX design. As a survivor of impostor syndrome, he loves to make learning technical skills digestible and practical. Formerly, he published articles, ebooks, and coding challenges under his brand "Coding Artist." Today, he looks forward to using his mature experience to give back to the web development community. He lives in beautiful, historic Virginia with his wife.

Packages

The Book
  • PDF

  • EPUB

  • MOBI

  • WEB

  • English

$5.99
Minimum price
$12.99
Suggested price
The Book + Discord Server

Includes:

  • extras
    Discord Server Invite Link

    Invite link to the book's Discord Server

  • PDF

  • EPUB

  • MOBI

  • WEB

  • English

$15.99
Minimum price
$22.99
Suggested price
The Book + Discord Server + 45 Minute Video Call

In addition to the book and an invite link to a Discord Server, you will also get an invite link to schedule a 45-minute video call with the author. You can use this time to discuss anything related to the Design System for Developers book, get to know the author, and ask any professional questions.

Includes:

  • extras
    Discord Server Invite Link

    Invite link to the book's Discord Server

  • extras
    45 Video Call Invite Link

    This provides a link for scheduling a 45-minute video call with the author.

  • PDF

  • EPUB

  • MOBI

  • WEB

  • English

$65.00
Minimum price
$72.99
Suggested price

Table of Contents

  • 1 - The Mission
  • 2 - The Problem
  • 3 - Introducing Design Tokens
  • 4 - Introducing Style Dictionaries
  • 5 - Extracting Design Tokens
  • 7 - Valuing Design Tokens
  • 6 - Naming Design Tokens
  • 8 - Storing and Transforming Design Tokens
  • 9 - Delivering Design Tokens
  • 10 - Creating Tools and Assets From Design Tokens
  • 11 - Ideas for Real-World Collaboration
  • 12 - The Conclusion

The Leanpub 45-day 100% Happiness Guarantee

Within 45 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

See full terms

Do Well. Do Good.

Authors have earned$10,589,243writing, publishing and selling on Leanpub, earning 80% royalties while saving up to 25 million pounds of CO2 and up to 46,000 trees.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers), EPUB (for phones and tablets) and MOBI (for Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF, EPUB and/or MOBI files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub