A design system is more than a pattern library or a collection of bits of reusable code. That’s a great place to start — but the system does so much more. It’s your ticket to designing and building a digital product in a scalable way that maintains consistency across the multitudes of ways a user will experience your product.
Five Postlight designers got together to chat around a virtual roundtable to discuss best practices for getting started on a design system. Whether you’re a designer, or a team leader looking for more insight into the process, we hope our lively banter helps you answer the question: When is it time for a design system?
So to jump right into it, when is it time for a design system? At what stage do you get started?
Sam: I would say, right away, as soon as you can start thinking about componentizing in general, whether as a whole system or in reusable components. That’s like a baby version of a design system. You can create a bunch of components, and then kind of mold that into a design system later on, but that’s going to require a developer to go back and recode every single thing that’s ever been created. It’s so much easier to just start making a library from day one.
Patrick: Yeah. I completely agree. Even if the client isn’t asking you to create a design system, as a designer you’re thinking in systems, whether you know it or not. A mistake I’ve made in the past was thinking you shouldn’t start until you can see the system. With tools like Figma now, it’s so easy to componentize everything. You don’t have to come up with a great name. You don’t have to be precise about it. Just be obsessive about cataloging, copying, and reusing as much as possible.
Grace: I had that experience that you just described, Patrick, on one of my projects where — even though a design system was not a required deliverable by any means — I felt like I couldn’t move forward as a designer unless I had everything organized and componentized. You end up delivering one anyway because it’s such a helpful tool.
Isar: And the earlier you start building a design system, the easier it is on the project as it becomes more complex, as more designs get created, and as people join or leave the team. I think a trap that some designers fall into is thinking that a design system has to be perfect and polished all the time, and that’s absolutely not the case. It’s a constantly evolving thing. There’s no perfect state of a design system. Even when you’ve handed off that deliverable, it’s still open to evolution — and it should be.
What about when a client is merging products rather than creating a new product?
Ryn: That’s been mainly my experience — the moment that larger companies take two products and merge them. They maybe didn’t have the most concise system to begin with, and they recognize the gap now that they’re merging multiple products with different brand guidelines across a multidisciplinary company with marketing, paper, print, and digital — and really coming in to have a more digital presence. They say, “Okay, this is the time, we recognize this jargon out in the ether. People are talking about design systems. We can’t do it on our own. Let’s hire an agency where design systems are a part of their expertise.” Then they come in to start that process.
Patrick: I can speak to that a little bit. I think with the last system that I worked on, the client wasn’t explicitly merging products. They were merging a lot of different pages that technically use the same system, but there was no real guiding principle behind them. That’s why it made so much sense to think of it like a system because everything was fragmented and our job was to consolidate it. That’s where the system component really came up. Even though it wasn’t an official merger, conceptually there was a big merging going on.
Let’s say you are starting out with a brand-new product. What are some of the most vital steps in kicking off the design system?
Sam: I think back to working with a developer. I really followed his lead on what he needed, and he guided what components needed to be built first. The way that I was thinking of a design system was reusable components for a built product. It wasn’t necessarily just to make it an easy tool for me to help me design. It was guided by what needed to be built first, what was going to be used a lot, and what was going to make the most impact in terms of development time.
Grace: That’s very similar to my introduction to design systems. The first one I ever worked on was truly a collaboration with development. I feel like sometimes the language around design systems and the semantics make it seem like you’re just delivering a Figma file of components, but in reality, it’s this complex system that has a lot of players and pieces.
Ryn: I think for me, building a design system from scratch starts with the content and understanding what buckets we’re working with. Then breaking them out like a web or into a list or something like that, and then starting to tag. Are we building out tables? Are we building out infographics? Are we building out a more media-centric environment with videos, copy, related links, things like that. So to me, it’s content first, and then getting down to the details. Do we need an icon? Not exactly the specific icon, but is it an icon that we need? Is it a button? Primary, secondary, tertiary — all of that.
Want to talk about your product? Reach out at firstname.lastname@example.org.