Design Systems for the Everyday Designer
Using modern tools to bridge the gap between design and development with design systems
Really? Another article about the design process?
Believe me, I feel your pain — seems like every week I’m reading another Medium article about how a designer thinks I should design. However, I believe design systems are worth the extra time and effort to learn. Style consistency almost seems like a side benefit when looking at the big picture of how these systems not only alleviate major pain points in process, but also how powerful they can be in shaping the user experience. So, what are those pain points?
Life without a design system
How many times have you been working on a design that ended with more styles than you could ever possibly count? “I meant to have four shades of blue!” you plead with the engineering team (aside: I’ve tried to win this argument before and fail every time). You ask yourself, “how did this design get so messy?” The intentions at the beginning of the project are to keep the styles consistent and uniform. Then, as revisions and requests pile up, new styles are unintentionally created as the project goes on. Before you know it, your screens are caught in a web of subtle style changes and inconsistencies that are now hard to contain.
The good news is that there’s a solution out there called a design system. Despite what you might read online, they aren’t just useful for front-end developers. They’re also helpful for the everyday designer that spends their day working in Sketch (that’s you and me). Lucky for us, modern tools like Sketch have made it easier to bridge the gap between design and development using a design system.
Can you tell me what a design system is?
In brief, a design system is a set of reusable and authoritative components and styles that can be combined together to make a cohesive application or website.
Made popular by Brad Frost’s Atomic Design approach, design systems set out to solve problems from the smallest level possible. Instead of hopping into Sketch and creating an entire screen in one sitting, we start by designing just the base styles — things like setting type or creating buttons. If we’re properly designing something — and we all should be! — we’re already asking ourselves questions like:
- Why are we designing a contact form? What’s the goal here?
- How can I design these buttons to encourage users to click?
- What fonts can I use to make this app inviting to users?
Design systems still let us ask these questions, but with much more focus. Creating buttons for an e-commerce website? Put them into the design system, and think about everything related to that interaction. Why are we designing this button? What should it look like on hover? How can it be obvious that the interaction here is different from the other buttons? Then mock up all of those different states and interactions for your development team. They’ll love you forever! ❤
“I love you forever, Justin!” — my development team
Once the base styles are set, it’s time to start mixing them together to form real elements of an app or website. That logo and link style may not look like much on their own, but combine them together and you’ve got a functional navigation. Same goes for things like forms, image styles, content blocks, and so on. Put all of these elements together on a page, and you’ve got a working design that’s well thought out, intentional, and achieves goals. This is a concept known in the development world as “composing,” and shows that design and development are converging.
What if my styles don’t play nicely together?
It happens. You put a lot of time and thought into designing these elements, placing them on a page together, and that “buy now” button just gets railroaded by the fancy share icons. This is actually where a design system can really begin to flex its muscles — especially if you’re working off of a intelligently created Sketch file (more on that later).
First of all, don’t panic. Just make the adjustments that you need to in the context of the design, copy/paste those newly updated elements over on your design system, and reuse them later when they’re needed once again.
Pro Tip: If you’re using Sketch, setting these elements up as styles or symbols will save a lot of time updating. In fact, you can update it on the page, hit save, and it’ll automatically update in your design system for you. It feels like magic.
How can I get started?
To be completely honest, getting started was one of the most intimidating parts of this entire process.
The simple answer to this is that Sketch is your friend. Combining styles and symbols will allow you to easily update your design system once, and see it reflected across all of your designed screens. Not only do your developers have a process similar to this already (or at least they should), but it also allows them to see every style they need to create in one place. For them, it takes the guesswork out of whether or not you intentionally had four shades of blue.
Pro Tip: Keeping your system separate from the designs is important because it’ll help the developers later on.
A Sketch Template for design systems
That’s why I actually put together a little Sketch file that’ll help you get your feet wet with design systems. It includes the basic setup with Sketch styles and symbols so you can see just how powerful this really is.
Keep your eyes out for updates as well. We put it up on GitHub because we don’t intend to throw this file out there and forget about it. As we’re actively working through design projects at Infinite Red, we’ll be using this systemized approach and updating the design template as we go.
What’s next?
There’s so much more to a design system than what’s found in this article. I invite you to check out some of the resources that have personally helped me below, and also “follow” our Red Shift publication (this one) for upcoming articles featuring useful tips and tricks from Infinite Red.
Want to learn more? Here’s a few helpful resources.
About Justin
Justin Huskey is the Design Lead at Infinite Red. In addition to talking about design, he also acquired the skill of writing about himself in the third person. Read the writings of Justin and his co-workers in our Red Shift publication. Bite sized thoughts on design, comics, and tech are tweeted daily from @justinhuskey on Twitter.
