Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

UX Power Tools – Medium | Jon Moore
This is part two of a series of three articles detailing the internal groups we have to design for in order to get great products built and sold. Part two focuses on the groups that collaborate to get your design produced.
Who are we designing for? Designing for Buy-In (Part 1 of 3)
Okay so we’ve gotten buy-in from the higher-ups and now the real panic…uh…excitement sets in. We are ready to bring in the teams who will help us get this thing built:
Some of you may be designing solo and/or not have product managers, but someone will be playing these roles whether it’s you, your startup’s CEO, or your cat. So this one’s for you, too.
Tools: Sketch, duh.
If you’re ever working with other designers, it is so important that you keep your file clean and organized. You should be doing this anyway for your own sanity, but especially if you’re working with other designers. No one likes sifting through “Group 65” and finding your misspelled text or detached symbols. Do yourself and everyone else a favor and keep a clean kitchen. You’ll love yourself, and your team will, too. Everyone wins.
Don’t be this guy. On that note, Ale Muñoz just released an awesome plugin to help you clean nested groups like these. Thanks, Ale!
Design Cleanliness + Design Scalability + Design Consistency = Design Team Efficiency
Einstein has E=MC² and Pythagoras has a²+b²=c², so maybe I’ll get this etched into an Egyptian pyramid or something when I’m dead and gone.
Not as much of a ring to it, though. Working on that.
I swear, I dream in Trello cards. I have a board that helps me get dressed in the morning. And one for planning breakfast. And a board for managing Tinder dates (jk, but that’d be a hilarious app).
Tools: Backlogs, Annotated Wireframes or Mockups
As much as they can really drive us crazy, product managers are the ones who make us designers look good. I can’t tell you how many times I’ve been in a review with my PM before a client presentation, only to realize that I’ve forgotten an important use case.
With product managers, you’re not designing for them so much as you’re designing with them. PMs are a direct line to your users, so keep them close. They’re the keepers of all product requirements, each of which is deeply rooted in user research.
My product managers are my best friends. Here’s how we work together:
A design without a developer is like a Christopher Nolan film without a theater:
“Look at this movie I made!” cried Nolan, hoisting a film canister high above his head amongst a crowd of people. ‘The Dark Knights of Columbus’ was written lazily in Sharpie on a dirty piece of masking tape across the round metal can.
“But can we see it?” the people asked, turning toward each other.
“Well…no…but look at the film! Isn’t it beautiful?” As he shook the can, the miles of coiled film inside thudded softly against velvet interior.
“But can’t we see the movie? With sound and movement! We want to experience it!” A small girl wept in her mother’s arms. The crowds had begun to disperse.
Noticing the commotion, a boy on a fixie rode up to the man and whispered, “Love the type, bro.” He kicked off the pavement and pedaled down the street.
“I spent years on this!” Nolan bellowed. His words echoed off the buildings in the empty city square. “Don’t you people understand art?!”
The people had left. He gently leaned the film canister against the curb, and sitting down, let his face fall into his hands.
“Nice one.” Nolan noticed a homeless man next to the fountain. He formed a heart with his curled fingers. “Welcome to Dribbble,” the man whispered.
What good is your design if no one ever uses it? Designing for practice is all well and good, but at some point, you’re gonna want to get the thing built. That’s what pays the bills, right?
Here are some things to keep in mind while you design:
Spacing:
Everything is designed on an 8px spacing grid. Paddings and margins should always be multiples of eight: 8, 16, 24, 32, 40, 48, …
Typography:
Everything is designed using a text style from my Sketch stylesheet. These make for great CSS classes. Grey text is never hex grey — it’s always the base black with a transparency applied so it’s tinted toward the color it’s over.
Icons:
Every icon comes from the same set. “Here’s an icon font. Use this instead of pulling individual SVGs from Zeplin or InVision.” 🙌🏽
This kind of guidance will set your developers up for success, and I promise you that they’ll do a kickass job. Tools like Zeplin have helped us translate design specs to developers faster than ever, and teaching your developers to fish will ensure that extra layer of polish.
Be a selfless and charitable designer. Your influence goes up, down, far, and wide. Make others look good, and you’ll all look good together.
In my final article in this series, I’ll cover groups who manage quality control. In the meantime, subscribe below to get this in your inbox, and see what we’re up to over at UX Power Tools.
Who are we designing for? The production team (Part 2 of 3) was originally published in UX Power Tools on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community