Both have a similar influence on two different jobs, design and development, creating a new division of labor.

Design systems and the designer roles

Design systems are somewhat new. Even if everybody in the design sphere is talking about them right now, the consequences of their introduction in big companies are yet to be fully understood.

  • System designers usually have a greater capacity to envision the entire system — potentially involving numerous brands, products, variants — to extract the common denominators or patterns between those components, products, or brands. They create rules and rationales around foundational elements like a color palette or border radii and deeply care about UI…


Great article! I wonder how you could automate the result of the contrast between 2 colors with a plugin in your design tool of choice.


What I learned by building a design system from scratch

Radiant documentation portal
Radiant documentation portal
Accessible at radiant.thoughtspot.com

Context

I was hired in February 2018 by the VP of Experience to build the design system of the company. A couple of attempts had been made before my time, but none had gained the necessary momentum.


… and no, it doesn’t have to be how to code.

Why it’s not necessary for designers to know how to code

One very simple reason: division of labor.


Z le maudit

Who wants a better solution than throwing a random number in a z-index and hope for the best?

The situation

In a complex application, developers will always compete for the highest number to put an element on top of the rest, without easily knowing what layers are already in place.

.my-modal {
z-index: calc(on-top-of-the-page);
}
.tooltip-on-my-modal {
z-index: calc(on-top-of-my-modal);
}

So most of the time you end up in a situation like this:


The Sketch Library version.

Part of our work on Radiant — Thoughtspot’s design system — was to recreate our Avatar component, and more specifically its crescent shape when we need to display more than one at a time.

.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: solid 1px white
}

As a side note, I often ask candidates to create a round-shaped element to see if they’ll use border-radius:50%, it gives me an indication on how much they know about CSS.


Now that I’m close to having 20 years of experience (shhhh 🙊) as a designer and front-end developer, I’m realizing that I’m constantly operating based on a few principles. Here there are — in no particular order — in case you’re looking for inspiration.

1. Use the right tool for the right job.

A good tool is designed to be good for a few use cases only. That means:


Eugene Onegin and Vladimir Lensky’s duel - Ilya Repin

As a UX Engineer at Thoughtspot and manager of Radiant (the company’s design system), one of my goals is to improve the code base of our product and especially the CSS: I’m focusing on getting visual consistency across the board (243 unique colors!) but also trying to improve the scalability and robustness of our code.

Why change?

While Less and Sass offer very…


The United States Capitol.

Being a designer means influencing your user to do the right thing — or at least to do the right things in the product you designed.
But let’s make a more general and bolder statement: designers are influencing users.
And because most of us want to solve real users’ problems — as we all should — we’re trying to make users’ lives better. When we’re lucky enough to succeed, then we’re definitely changing people’s lives. Our products do.


Tools. They’re all meant for a purpose. Seriously.

Like a lot of UI designers, I moved on from Photoshop to Illustrator, and from Illustrator to Sketch. But when I look back, I feel like something is missing.

ventrebleu

Challenger of habituation on a mission to improve humanity, one idea at a time. UX Engineer Manager for the Intuit Design System.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store