Design Systems for Developers
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
Packages
The Book
PDF
EPUB
MOBI
WEB
English
The Book + Discord Server
Includes:
Discord Server Invite Link
Invite link to the book's Discord Server
PDF
EPUB
MOBI
WEB
English
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:
Discord Server Invite Link
Invite link to the book's Discord Server
45 Video Call Invite Link
This provides a link for scheduling a 45-minute video call with the author.
PDF
EPUB
MOBI
WEB
English
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 60-day 100% Happiness Guarantee
Within 60 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$11,600,486writing, 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
Top Books
C++20 - The Complete Guide
Nicolai M. JosuttisAll new language and library features of C++20 (for those who know previous C++ versions).
The book presents all new language and library features of C++20. Learn how this impacts day-to-day programming, to benefit in practice, to combine new features, and to avoid all new traps.
Buy early, pay less, free updates.
Other books:
Cronache di Domain-Driven Design
Francesco Strazzullo, Matteo Baglini, Gianluca Padovani, Emanuele DelBono, Marco Consolaro, Alessandro Colla, Uberto Barbini, Alberto Acerbis, Julie Camosseto, DDD Open, and Alberto BrandoliniCronache di Domain-Driven Design: un libro corale in italiano fatto di storie indipendenti tra loro, che sono il risultato dell’applicazione di Domain-Driven Design su progetti reali.
Ansible for DevOps
Jeff GeerlingAnsible is a simple, but powerful, server and configuration management tool. Learn to use Ansible effectively, whether you manage one server—or thousands.
Jetpack Compose internals
Jorge CastilloJetpack Compose is the future of Android UI. Master how it works internally and become a more efficient developer with it. You'll also find it valuable if you are not an Android dev. This book provides all the details to understand how the Compose compiler & runtime work, and how to create a client library using them.
OpenIntro Statistics
David Diez, Christopher Barr, Mine Cetinkaya-Rundel, and OpenIntroA complete foundation for Statistics, also serving as a foundation for Data Science.
Leanpub revenue supports OpenIntro (US-based nonprofit) so we can provide free desk copies to teachers interested in using OpenIntro Statistics in the classroom and expand the project to support free textbooks in other subjects.
More resources: openintro.org.
R Programming for Data Science
Roger D. PengThis book brings the fundamentals of R programming to you, using the same material developed as part of the industry-leading Johns Hopkins Data Science Specialization. The skills taught in this book will lay the foundation for you to begin your journey learning data science. Printed copies of this book are available through Lulu.
Functional event-driven architecture: Powered by Scala 3
Gabriel VolpeExplore the event-driven architecture (EDA) in a purely functional way, mainly powered by Fs2 streams in Scala 3!
Leverage your functional programming skills by designing and writing stateless microservices that scale, powered by stateful message brokers.
Mastering STM32 - Second Edition
Carmine NovielloWith more than 1200 microcontrollers, STM32 is probably the most complete ARM Cortex-M platform on the market. This book aims to be the first guide around that introduces the reader to this exciting MCU portfolio from ST Microelectronics and its official CubeHAL and STM32CubeIDE development environment.
CCIE Service Provider Version 4 Written and Lab Exam Comprehensive Guide
Nicholas RussoThe service provider landscape has changed rapidly over the past several years. Networking vendors are continuing to propose new standards, techniques, and procedures for overcoming new challenges while concurrently reducing costs and delivering new services. Cisco has recently updated the CCIE Service Provider track to reflect these changes; this book represents the author's personal journey in achieving that certification.
CCIE SP v5.0
Łukasz Bromirski, Piotr Jablonski, and Nicholas RussoAre you striving to prepare to and pass CCIE SP lab exam? Take the opportunity and get this workbook! With the attached initial cfg files you will prepare yourself for the CCIE SP exam as well as learn SP technologies applicable to all kinds of today modern networks! This workbook covers blueprint topics and provides challenging examples.
Top Bundles
- #1
Software Architecture for Developers: Volumes 1 & 2 - Technical leadership and communication
2 Books
"Software Architecture for Developers" is a practical and pragmatic guide to modern, lightweight software architecture, specifically aimed at developers. You'll learn:The essence of software architecture.Why the software architecture role should include coding, coaching and collaboration.The things that you really need to think about before... - #2
Practical FP in Scala + Functional event-driven architecture
2 Books
Practical FP in Scala (A hands-on approach) & Functional event-driven architecture, aka FEDA, (Powered by Scala 3), together as a bundle! The content of PFP in Scala is a requirement to understand FEDA so why not take advantage of this bundle!? - #3
All the Books of The Medical Futurist
6 Books
We put together the most popular books from The Medical Futurist to provide a clear picture about the major trends shaping the future of medicine and healthcare. Digital health technologies, artificial intelligence, the future of 20 medical specialties, big pharma, data privacy, digital health investments and how technology giants such as Amazon... - #4
CCIE Service Provider Ultimate Study Bundle
2 Books
Piotr Jablonski, Lukasz Bromirski, and Nick Russo have joined forces to deliver the only CCIE Service Provider training resource you'll ever need. This bundle contains a detailed and challenging collection of workbook labs, plus an extensively detailed technical reference guide. All of us have earned the CCIE Service Provider certification... - #6
Pattern-Oriented Memory Forensics and Malware Detection
2 Books
This training bundle for security engineers and researchers, malware and memory forensics analysts includes two accelerated training courses for Windows memory dump analysis using WinDbg. It is also useful for technical support and escalation engineers who analyze memory dumps from complex software environments and need to check for possible... - #7
Modern C++ Collection
3 Books
Get All about Modern C++C++ Standard Library, including C++20Concurrency with Modern C++, including C++20C++20Each book has about 200 complete code examples. Updates are included. When I update one of the books, you immediately get the updated bundle. You can expect significant updates to each new C++ standard (C++23, C++26, .. ) and also... - #9
Retromat eBook Bundle for Agile Retrospectives
2 Books
If you facilitate retrospectives this bundle is for you: "Plans for Retrospectives" helps beginners learn the lay of the land with tried-and-true plans. Once you know your way around, "Run great agile retrospectives" contains all 135+ activities in Retromat for you to mix and match.