When Design Systems became A Thing with Jina Anne — #02

WEBVTT
1
00:00:00.860 --> 00:00:10.000
Suddenly we noticed the production engineers were copying and pasting our code. [laughs] And we were like, "Wait, so they do want our code. Okay."
2
00:00:10.220 --> 00:00:17.640
So that changed our roadmap, 'cause we were thinking, oh, we'll build this for us and then we'll address production development later.
3
00:00:18.090 --> 00:00:28.419
And we've had to be like, okay, we need to go all in on supporting production development 'cause they're already copy and pasting our code, and that's not how we want them to use this. It just became real at that point.
4
00:00:28.600 --> 00:00:40.840
That's when our team pivoted to working on this new design system which would end up becoming the Lightning Design System. [upbeat music] This is On Theme: Design Systems in Depth, and I'm Elise Holiday.
5
00:00:41.520 --> 00:00:47.080
Together we'll be exploring how successful design systems get built, maintained, and deliver impact.
6
00:00:47.900 --> 00:00:55.769
Design systems is due for a major reinvention moment, and I wanna share what's working from design system practitioners out there forging the way.
7
00:00:56.820 --> 00:01:05.900
We can't look forward without knowing where we've been though, so we're kicking off season one with a journey back in time to how design systems as we know them today came into being.
8
00:01:07.000 --> 00:01:19.140
As you listen, text the show with your thoughts, aha moments, and questions by clicking the text link in the show notes. Before we begin, a quick thank you and word from our generous sponsor, Into Design Systems.
9
00:01:19.960 --> 00:01:25.750
Into Design Systems is back with their annual virtual conference May 28 through 30, 2025.
10
00:01:26.380 --> 00:01:37.580
Visit intodesignsystems.com/ontheme to get your ticket to three days of practical hands-on sessions showing the what, why, and how of design systems.
11
00:01:37.640 --> 00:01:43.620
This year the conference is focused on developer hand-off, accessibility, multi-brand theming, and governance.
12
00:01:44.260 --> 00:01:51.740
You'll get hands-on knowledge you can put to use at work immediately, files and resources to take away, and hear from very well-known industry speakers.
13
00:01:52.340 --> 00:02:06.460
Get your ticket at intodesignsystems.com/ontheme, and I'll see you at the conference in May. All right, let's dive into the show. Today I'm so excited to have Jina Anne on the show.
14
00:02:06.640 --> 00:02:20.150
Jina, who I'm sure you definitely know, is a Bay Area-based design systems advocate and a designer who codes and no codes. And of course, she is extraordinarily well-known and influential in the design system space.
15
00:02:20.720 --> 00:02:30.500
Jina founded Clarity, like, the design systems community conference. They manage the Design Systems Slack, which has, I don't know, something like 30,000 members or something like that.
16
00:02:31.160 --> 00:02:43.960
Jina co-chairs the Design Tokens community group amongst a million other things in Jina's bio that we don't have time to go into. At Salesforce, Jina was the founding designer on Salesforce Lightning Design System.
17
00:02:44.680 --> 00:02:54.160
She helped create Design Tokens, which has completely transformed the way that we talk about design systems, and she has worked on design systems at Amazon, Google, Microsoft, and Asana.
18
00:02:54.170 --> 00:03:01.600
A truly as- astounding set of big name companies. Of course, she's a regular conference speaker, podcast guest, and all that good stuff.
19
00:03:01.780 --> 00:03:12.120
Jina, I could not imagine starting this podcast and not having you come on as a guest. Thank you so much for coming to hang out. I'm so excited you did this.
20
00:03:12.220 --> 00:03:20.220
I remember when you were doing your Clarity talk everybody was like, "You need to start a podcast." Oh, I know. And so I'm so excited to see you do it. [laughs] The peer pressure, it's real. I know.
21
00:03:20.640 --> 00:03:23.500
I'm excited too, and, you know, I think it's gonna be a lot of fun.
22
00:03:23.660 --> 00:03:35.500
I think we are at a very interesting place for design systems as an industry, and there's so much that I wanna talk about and so much that I wanna hear from people about where, where are we going?
23
00:03:35.580 --> 00:03:44.520
Where can we go from here? And that's really why I wanted to have you on the podcast because, you know, Brad Frost and I talked about the very early era.
24
00:03:44.640 --> 00:03:54.100
We were trying to work on this problem that was like, oh, if I need to update a button I have to update the hex color on 80 pages, you know, literally 80 files. You know?
25
00:03:54.120 --> 00:03:58.210
This was, like, pre-React, pre-Design Tokens, pre... Like, all of this.
26
00:03:58.680 --> 00:04:09.600
And obviously design guidelines, style guides, all of that had been around a really long time in the design space, but, uh, I really wanted to chat with you about, you know, kind of what happened next.
27
00:04:09.660 --> 00:04:24.460
Like, how did design systems become a thing? How did it become a thing that has its own conference and, you know, its, its own little, like, niche cottage industry, like, inside the design and development industry?
28
00:04:25.040 --> 00:04:39.440
So let's... Yeah, let's go back to the beginning. How did you first hear about and kind of start in on design systems in your work? Yeah. [laughs] Where to start? [laughs] Um, yeah.
29
00:04:39.580 --> 00:04:53.300
So, like, I'll start first with, like, before I knew to call them design systems, like, I'd heard so many terms for them. But, like, the first, I guess, foray into this was I was calling my...
30
00:04:53.320 --> 00:05:06.520
And the agency I was working for was calling it a style guide. And, you know, I was still documenting the CSS, but I was doing it as a printed document designed in Quark. [laughs] Quark. So- Wow. Yeah. Remember Quark?
31
00:05:06.659 --> 00:05:14.419
[laughs] No. I don't. [laughs] I don't think I ever actually worked in Quark. Yeah. I think a lot of people skipped Quark. I did not.
32
00:05:14.500 --> 00:05:23.560
[laughs] But, yeah, so I was an intern at a design agency and I was working on this project, and I was initially just supposed to help out with some CSS.
33
00:05:24.220 --> 00:05:36.550
The agency contracted another agency that was supposed to write most of the CSS, and they didn't really have a good grasp of modularity or maintainability or anything like that.
34
00:05:36.570 --> 00:05:44.040
And honestly, I was new to it too, but at some point they just asked me, like, "Do you think you can take this on?" And I was like, "I'll give it a try. Sure."
35
00:05:44.360 --> 00:05:54.520
[laughs] And so yeah, I was, like, writing a lot more CSS for that project and then documenting it, and then documenting the brand, documenting the layout and, and all that.
36
00:05:54.660 --> 00:06:05.320
I really enjoyed the process of it, but none of the other projects I'd ever worked on had that as part of it. And so I was always kind of, like, thinking about that project in other projects I was doing.
37
00:06:05.580 --> 00:06:13.050
And fast-forward, I guess, like, not too long after that IUh, moved to the, uh, the Bay Area and I was working for Apple.
38
00:06:13.670 --> 00:06:28.650
And there I was doing, um, CSS mostly for the online store, but I was wanting to document the architecture of it, the organization, like all of that. And so this time around I was using WordPress [laughs]
39
00:06:28.750 --> 00:06:35.530
instead of, uh, Quark. But, you know, still not quite calling it a design system yet. Design system. I was just kinda calling it a style guide.
40
00:06:36.150 --> 00:06:44.090
And then, you know, I saw, I think YUI had come out some time around then, so like that was I think the first...
41
00:06:44.130 --> 00:06:50.390
That was the Yahoo, um, UI library which I think everybody was using the phrase pattern library around that time. Mm-hmm.
42
00:06:50.570 --> 00:06:59.330
So I saw that, and there, there were a few other things like that, that I was like, "Oh, that's cool." But I, I guess I wasn't really thinking about these two things as like the same thing.
43
00:06:59.390 --> 00:07:07.570
Like, I kinda saw them as like two different assets, efforts. I don't know, [laughs] whatever you wanna call them. Yeah. I think the design and code was very separate then.
44
00:07:07.590 --> 00:07:19.389
I mean, I came from the CSS side so, you know, I was doing- Yeah... a lot of the same stuff. It was like document the CSS architecture, like define these... You know, we didn't have variables in CSS. We didn't have Sass.
45
00:07:19.470 --> 00:07:27.950
We didn't have, you know, you could bare- you could like split things into different files, like that was about the extent of it. Mm-hmm. Your global styles, your, you know, individual component files.
46
00:07:27.990 --> 00:07:37.310
Like, we were starting to develop those ideas in CSS land. Right. And then I think on the design side we were doing the same thing, you know, in- Right... it was like, okay, Photoshop.
47
00:07:37.350 --> 00:07:47.750
Here's kind of like a, a sticker sheet in Photoshop where like a- Yeah... visual set of like here's what all of the, you know, cards and buttons and inputs are supposed to look like.
48
00:07:47.770 --> 00:07:56.830
But there was zero connection between those two things, and I think I, I have the same experience where it was like they all just felt like one-off things we were doing on projects.
49
00:07:56.890 --> 00:08:02.290
It was really just turning into like a capital T thing. [laughs] Yeah.
50
00:08:02.300 --> 00:08:13.970
And so I think what kind of made me start to combine those two things was actually the same time that I got into, uh, Sass, and that was when I was working at Engine Yard.
51
00:08:14.030 --> 00:08:23.410
They told me like, "If you're gonna contribute to CSS, you have to use Sass." And initially I was like, "I don't need Sass. I write great CSS. I don't need it." And then I fell in love with Sass.
52
00:08:23.550 --> 00:08:25.990
[laughs] I think a lot of people have had that. Yeah.
53
00:08:26.030 --> 00:08:40.110
So then I was documenting instead of using a third-party thing like WordPress, I was just doing it straight on the app, like as a separate page, and that was the first time I was doing it as like, you know, what w- I think I was calling back then like living style guides.
54
00:08:40.190 --> 00:08:48.490
[laughs] And somebody w- that was at my talk referred to it as style guide driven development, [laughs] which I thought was hilarious. Everybody's always trying to give it some name like that.
55
00:08:49.210 --> 00:08:58.790
And then it wasn't too long after that that, yeah, I was contributing to the Sass project 'cause I, I loved it so much I wanted to help out with the, the design.
56
00:08:59.270 --> 00:09:15.020
And so I did a style guide on that site, and that was actually the first time that I took YAML data to store my name and values for colors, spacing, type, and I was converting them into variables and classes and stuff like that.
57
00:09:15.339 --> 00:09:18.170
'Cause I was using Middleman and it had a really easy way to do that.
58
00:09:18.179 --> 00:09:27.550
And that's actually what I presented to my team when I started at Salesforce, and that ended up spawning Theo, which was the first design token generator so- Yeah. Yeah...
59
00:09:27.560 --> 00:09:33.730
it's kind of funny how it all just like connects, you know? [laughs] Yeah, totally. So when... What year was that? When did you start at Salesforce?
60
00:09:34.070 --> 00:09:41.410
That, so that was around 2014, and I think we were still kinda calling it a style guide around then.
61
00:09:41.490 --> 00:09:51.350
And then once we really started launching like design tokens into our platform, it's just something in our language changed and we started calling it a design system.
62
00:09:51.850 --> 00:10:06.630
And there's also design tokens that was based on how we were implementing design in the product, so it's a very Salesforce-centric term that we were using, and it just kinda surprised me that the whole industry just latched onto that same terminology.
63
00:10:07.270 --> 00:10:14.690
But yeah, so th- so are, have you ever had to like tokenize data for like localization? Mm-hmm. Yeah. So like you wanna pass in...
64
00:10:14.790 --> 00:10:28.390
So they didn't use anything like Sass, so they were actually using token strings in the code and then passing in XML data. And so we were storing XML data for f- font sizes, colors, like all that stuff.
65
00:10:28.910 --> 00:10:40.810
And so then we created Theo 'cause we wanted to continue using Sass on the design team, but then we also had partner teams that were working in, you know, Angular, React, using Less, Stylus.
66
00:10:40.850 --> 00:10:49.970
Like, every time we would acquire a company, we had to inherit whatever stack that they were on. Um, so that's- I feel like you're just name dropping a bunch of tools that like people just don't even know about anymore.
67
00:10:50.020 --> 00:10:57.410
[laughs] This is such an amazing throwback. Stylus? Yeah. [laughs] Yeah. Rem... I, I mean, I don't even know if anyone uses Stylus anymore, but...
68
00:10:57.570 --> 00:11:02.290
[laughs] Whoever, the one person listening to this that still uses Stylus, call me. Yeah.
69
00:11:02.350 --> 00:11:09.650
[laughs] But yeah, so we were generating our, our stuff to all those different platforms, which is basically why we started doing tokens.
70
00:11:09.710 --> 00:11:16.370
At that point when we were rebranding our teams, we used to be a visual design team and then we were coming up with a name.
71
00:11:16.490 --> 00:11:26.110
Um, initially we were calling ourselves Creative Systems, and then that didn't really stick, and then we were just Systems, but then people had no idea what that meant. [laughs] And then at some point we're like, "Okay.
72
00:11:26.170 --> 00:11:39.050
We're the Design Systems team." That was the first time actually being on an official team doing design systems. Yeah. So. I, I wonder if... Was that, do you think that was like the origin of that phrase? I have no idea.
73
00:11:39.310 --> 00:11:49.020
I, I, I don't like to try to take claim to phrases like that 'cause I always feel like there's somewhere that that had to have been used before, but I do think it helped popularize it. Mm-hmm. Yeah.
74
00:11:49.050 --> 00:11:53.470
So I will, I will say that. Yeah. Yeah. Yeah. I mean, I think one of the themes,
75
00:11:54.390 --> 00:12:03.510
th- Brad Frost and I talked about this, and I feel like it's coming out really strongly in our conversation now, is how much of these concepts were just kind of in the air, you know? Mm-hmm. You were talking about it.
76
00:12:03.650 --> 00:12:14.630
You were talking about it at SassConf. You were talking about it at Clarity Conf. Like, Theo, the design tokens thing got popular, but lots of agencies were doing things like this. Lots of people were doing style guides.
77
00:12:14.650 --> 00:12:24.658
I'm talking about Brad Frost and Anna Debenham doing Pattern Lab. Right. Styleguides.io. I mean, it was just very much in the-In the air with us.
78
00:12:24.678 --> 00:12:35.068
But I also think it's really interesting to kind of try to track that etymology, not for like a credit reason, but just like somebody was the first person to say that, you know? To like put the- Yeah...
79
00:12:35.148 --> 00:12:45.298
concept and those words together, and it might have been your team at Salesforce, which I think is kind of amazing. That would be cool if it's true. I, I won't make that claim 'cause I don't know it to be true.
80
00:12:45.358 --> 00:12:51.518
I don't know either. But it would be cool if it was. [laughs] Yeah. Anybody else- Yeah... any OGs, if you know. Yeah, that's amazing.
81
00:12:51.558 --> 00:12:59.557
And I, you know, I think Theo, looking back, it feels like Theo as a design token tool to take the structured data...
82
00:12:59.588 --> 00:13:09.608
For, for any non-technical designers listening, you know, when she was talking about localization, right, you're taking a structured data where you have, you know, an ID and a value pair, and you're just saying...
83
00:13:09.718 --> 00:13:15.018
You know how tokens work now. It's a variable. It's like the name, the ID, and then the value. But this is really kind of
84
00:13:16.078 --> 00:13:26.628
for use in a design way, and especially for use in a multi-platform, multi-language way, was actually really kind of ahead of its time. I mean, I- Yeah...
85
00:13:26.698 --> 00:13:38.458
I think multi-platform is one of the big challenges facing design systems now. Like, how do we do Android, iOS, React, Angular, Vue, you know, like all of these different things- Yeah... well?
86
00:13:38.518 --> 00:13:44.058
And yeah, I mean, y'all were thinking about that almost a decade ago, which is- I mean, it-... pretty amazing... it was a decade ago.
87
00:13:44.218 --> 00:13:53.298
We hit our 10-year anniversary last year, and it cracks me up 'cause I still see people say like, "Oh, design tokens are like this new thing." I'm like, "No, it's-" No... "literally over 10 years old."
88
00:13:53.688 --> 00:14:07.908
[laughs] Let's go on- Yeah... a little design token tangent. How do you feel about the choke hold that tokens have on the design system industry right now? Oh. [laughs] Okay, that was a leading question.
89
00:14:07.938 --> 00:14:16.478
How do you feel about design tokens these days? [laughs] Well, obviously I'm still a fan of tokens, and I'm working on token stuff right now at work.
90
00:14:16.538 --> 00:14:31.778
I, I love it, but sometimes I, I do think people are tokenizing when they don't need to tokenize, and they're overcomplicating things. And sometimes I'm like, "I think we created a monster." [laughs] Yeah.
91
00:14:31.858 --> 00:14:40.308
I, I wonder sometimes if the idea of having... It, it's a special thing. It's tokens. I'm like, really they're just fancy variables, you know? Yeah.
92
00:14:40.338 --> 00:14:47.328
And like in a lot of cases for a lot of teams, like at Salesforce with Theo, you really were taking something else- Mm-hmm...
93
00:14:47.328 --> 00:14:58.898
YAML data or JSON data or whatever, and turning that into variables in lots of different languages. And so there was an abstraction token. But I think for a lot of design system teams, they're just writing variables.
94
00:14:59.358 --> 00:15:10.308
Exactly. Like, they're just writing CSS custom properties or Sass variables, and so it's like just, then just do that. [laughs] Yeah, we turned it into something like supposedly- Yeah... very magical. Uh, but it's...
95
00:15:10.788 --> 00:15:25.058
I love, I love that the design space has picked up on the power of- Mm-hmm... variables, you know, from the engineering side. I mean, obviously variables have been around in code forever. Yeah. Yeah, it's actually...
96
00:15:25.238 --> 00:15:40.418
It's exciting that design tools are, are implementing this now and, and I look forward to seeing that advance further. Um, I don't think it's fully there yet, so I can't go all in quite yet, but I think it's promising.
97
00:15:40.438 --> 00:15:56.148
Going back to our, going back to our story, early Salesforce days, we've coined this design system team. Tell us about like what were early days of developing that as a system, as a thing? Where did Lightning come from?
98
00:15:56.178 --> 00:16:01.538
What kind of work were y'all doing then? What did that early design system look like? Yeah.
99
00:16:01.578 --> 00:16:09.748
So initially when I joined the team, they had already built a beautiful looking style guide, and it's actually what attracted me to join the team.
100
00:16:10.278 --> 00:16:15.658
I was on another team at Salesforce that they were planning to sunset, and so I needed to pick a new team anyway.
101
00:16:16.598 --> 00:16:25.918
But coincidentally, I was actually already in talks with this team 'cause I was like, "Ooh, I wanna do this." So the timing all worked out. But they had like...
102
00:16:25.978 --> 00:16:34.178
So back then they were using Sketch, so they had a Sketch sheet that was like visually laying out all the colors and, you know, they even named them.
103
00:16:34.238 --> 00:16:38.858
So it was almost like a visual representation of what would become the tokens at some point.
104
00:16:39.257 --> 00:16:48.318
And they had the style guide that was built on Angular and using, I guess these days we call it atomic classes, but back then we were calling them single purpose classes.
105
00:16:48.358 --> 00:16:59.498
But it's basically like if you're familiar with Tailwind or there's, there was... What's the one Adam Morris did? I'm blanking on it. Well, not- It'll come to me later, but-... not Nicole Sullivan and OCSS. I don't know.
106
00:16:59.538 --> 00:17:08.698
No, it came after that, but he had written his own. There were a few libraries that had come out- Yeah... like this, but he was on the team actually, and so that's why they had gone with that approach.
107
00:17:09.077 --> 00:17:22.918
[laughs] But anyway, the thing that was interesting, a lot of the production engineers that I was talking to just were like, "Yeah, we look at it for like knowing the direction that the team is going in, but this isn't code that we would use.
108
00:17:22.978 --> 00:17:37.038
And so we don't use any of this code. So only the design team is using this code for like prototyping or whatever." And so I was wanting to, um, fix that. And so we had the design tokens initiative stuff happening.
109
00:17:37.098 --> 00:17:40.958
I was working with production engineering to like refactor the code to use the tokens.
110
00:17:41.368 --> 00:17:51.538
And then at the same time, you know, I was really hoping that we could actually have a CSS library that people actually wanted to use. And so I was like pushing the idea of that.
111
00:17:51.728 --> 00:17:59.778
And then, um, I actually had a lot of pushback initially. People were like, either- Really?... "Why wouldn't we..." Yeah, it was like, "Why wouldn't we just use Bootstrap?"
112
00:17:59.998 --> 00:18:06.058
Or I also heard like, "Oh, it'll be like five years before we even implement the button."
113
00:18:06.138 --> 00:18:14.068
And so finally, like my team and I, we were just kinda like, "Let's just build it anyway for us, and maybe one day others will start to use it."
114
00:18:14.698 --> 00:18:27.288
So we started to build it, and we actually hired a, a CSS developer to be the main architect on it. Like, I had started it out, but then we wanted somebody who would like just like lead the CSS part.
115
00:18:27.298 --> 00:18:31.038
And then Brandon and I were like kind of focusing on some of the other aspects.
116
00:18:31.118 --> 00:18:39.518
Like, I was a little bit more design centric, he was more dev centric, so he was helping with some of the like wiring up components to React and like that kind of stuff.
117
00:18:39.578 --> 00:18:50.062
AnywaySuddenly we noticed the production engineers were copying and pasting our code. [laughs] And we were like, "Wait, so they do want our code. Okay."
118
00:18:50.302 --> 00:18:58.512
So that basically changed our roadmap, 'cause we were thinking, oh, we'll build this for us and then we'll address production development later.
119
00:18:58.522 --> 00:19:06.662
And we had to be like, okay, we need to go all in on supporting production development 'cause they're already copy and pasting our code, and that's not how we want them to use this.
120
00:19:07.022 --> 00:19:18.372
You know, it just became real at that point. And then that's kind of when our team pivoted to, like, working on this new design system, which would end up becoming the Lightning Design System.
121
00:19:18.942 --> 00:19:26.732
Initially, we were code naming it Landmark. I chose that 'cause first of all, it's the name of the building that we were working in, Landmark's like up on Market.
122
00:19:27.182 --> 00:19:37.562
But second of all, I was thinking like a lot of the libraries I was looking at, like Bootstrap, Foundation, they sound like starting out. I wanted something that was more aspirational that you're trying to drive towards.
123
00:19:37.602 --> 00:19:40.972
So I was like, I like Landmark 'cause it's like you're looking ahead. Mm-hmm.
124
00:19:41.022 --> 00:19:51.362
And so, so yeah, we were calling it Landmark for a while, and then at some point we knew that we probably wouldn't be able to launch with that, so we were actually just gonna be the Salesforce Design System.
125
00:19:52.002 --> 00:20:02.682
And so little known fact, the design system isn't called Lightning, like, as a title of the design system. A lot of people think that. No, they named the product Salesforce Lightning.
126
00:20:03.202 --> 00:20:12.022
So we were the design system for Salesforce Lightning. And so we- What do you know? Yeah. So a lot of people think, oh, Lightning is the design system. I'm like, no, Lightning's a lot of things.
127
00:20:12.342 --> 00:20:24.442
[laughs] The design system is just one piece of that. I found Adam Morse's, uh... It's Tachyons. Tachyons. Thank you. Yes, that was it. [laughs] I did have to look it up. There's a...
128
00:20:24.502 --> 00:20:32.142
If you look at Tachyons, it's basically the old school version of what Tailwind is now. Same concept.
129
00:20:32.222 --> 00:20:43.182
I think it's so interesting, when you were just talking about that, thinking about modern design system discourse, and this whole conversation around adoption,
130
00:20:44.122 --> 00:21:00.022
I just really wanna call out what you just said about, you know, we started doing this thing, and then we discover that the production developers were using it before we were ready, kind of without our knowledge, in a way that was probably a real pain in the ass for them.
131
00:21:00.782 --> 00:21:10.802
[laughs] And I don't even know if I have anything profound to say, I just think it's so important to re- realize and remember that that is the value that a design system really should be bringing.
132
00:21:10.902 --> 00:21:18.582
It should be something that is helping your designers or your developers in a way that makes them like, "Yes, I would so much rather be using this."
133
00:21:19.002 --> 00:21:30.742
And, you know, the, the tools in the industry have changed a bunch, not just within design systems, but without, right? Like the development ecosystem. Um, but, you know, I think when we...
134
00:21:30.782 --> 00:21:39.442
at, especially in these early days, were solving these problems, we were really solving a pain point that developers were like, "Oh my God, you mean I don't have to try to figure out how to style this myself?
135
00:21:39.502 --> 00:21:47.022
You mean I can just use this and it will look like how my designer intended it to be?" Was, it's... That, that was really powerful. That's really cool.
136
00:21:47.042 --> 00:21:55.642
And I, and I think we get so distracted these days about, like, what is a design system, and how do I make a design system, that we've forgotten that that's what it's supposed to be like.
137
00:21:55.742 --> 00:21:59.002
That you're supposed to be making something that your team is like, "Oh my God, give it to me now."
138
00:21:59.602 --> 00:22:07.862
It's funny that you say that, 'cause the two people I mentioned before, the one that said, "Oh, it'll be like f- you know, five years before we implement that."
139
00:22:08.122 --> 00:22:16.582
He ended up becoming one of our biggest supporters and partners and champions on the production engineering side. And yeah, he was just wonderful to work with.
140
00:22:16.972 --> 00:22:25.862
The other guy who was like, "Oh, why wouldn't we just use Bootstrap?" Like, fell in love with the design system so much that he ended up inheriting the team under him.
141
00:22:26.182 --> 00:22:37.162
So he ended up becoming the VP over it at some point. [laughs] Eat your words, man. [laughs] Love that. Yeah. And so [laughs] it's just like, "Oh, feel differently now, huh?" [laughs] Yeah. Yeah.
142
00:22:37.442 --> 00:22:48.242
They're like, "Look at this cool thing that we made." Yeah. [laughs] Oh, that's so cool. So I- I... If I remember correctly, this is probably, you said 2014, so this is kinda like 2014, '15, '16.
143
00:22:48.862 --> 00:23:02.202
Tell me how Clarity Conf got started. How, how did we get to this moment where design systems was enough of a thing in the whole industry that you were like, "I'm gonna have an in-person event"? Well, yeah, it's funny.
144
00:23:02.282 --> 00:23:17.262
So I bought the domain name actually in 2014, but didn't actually launch the first event until 2016. So initially when I was like... I think I put up, like, a little, like, newsletter sign up page for more info.
145
00:23:17.742 --> 00:23:26.222
I think I actually called it initially a style guide conference instead of- Mm... a design system con- uh, conference. And now I'm curious if, if we can find that version of it up still.
146
00:23:26.302 --> 00:23:35.022
But yeah, so I, I had pushback in the community. I remember somebody on Twitter was like, "Really? You're gonna have a whole conference just about style guides?"
147
00:23:35.842 --> 00:23:45.982
And I'm thinking like, well, there's whole conferences dedicated to specific, you know, libraries or specific tools, like, why not? But yeah, so I was doing meetups.
148
00:23:46.062 --> 00:23:55.512
You know, I had the Sass meetup, which you had spoken at at one point, and I also had around that time was, like, starting up a design system meetup as well.
149
00:23:56.062 --> 00:24:04.702
I'd been speaking at conferences, and then I'd volunteered at a couple of them, and then when both of us helped out with SassConf, I helped out with some swag stuff.
150
00:24:04.762 --> 00:24:15.522
And so I kinda got the taste of, like, what organizing might be like. And one of my meetups actually had like 200 people show up, and I was- That's basically- This is conference size.
151
00:24:15.582 --> 00:24:28.742
Yeah, it was because the, the speakers was Nicole Sullivan and Mark Otto. No way. So, [laughs] That's, uh, OG CSS people. [laughs] Bootstrap creator. Yeah, no wonder. No wonder. Yeah. It drew a big crowd.
152
00:24:28.802 --> 00:24:34.262
But I was like, okay, maybe I could try my hand at organizing a conference.
153
00:24:34.482 --> 00:24:42.522
And so yeah, uh, as I mentioned, I bought the domain name and I was, like, figuring out the plan for it, just chatting with various people about it.
154
00:24:42.662 --> 00:25:03.474
But I still was, like, really nervous about doing the, that first one 'cause I, as far as I know, I had never seen any other conference dedicated to this particular topic, and so I just kind of-A- at that same time, the Alamo Drafthouse in San Francisco had just opened, and I was like, ooh, how cool would that be?
155
00:25:03.554 --> 00:25:15.394
[laughs] And was surprised to find out that it was a, a rate that, like, I would be able to afford with the ticket sales and all that. And so I was like, well, let's give it a go. That's great.
156
00:25:15.414 --> 00:25:27.804
And it was kind of a nice place to start at because when you book a day event like that, they come with, uh, food and AV, and so that takes care of two major [laughs] parts of running a conference.
157
00:25:28.223 --> 00:25:40.544
And so it did make it a lot easier starting out there. But yeah, um, it went surprisingly well. Lots of really good feedback. Yeah, it was one of my... It is one of my biggest, biggest career regrets- [laughs]...
158
00:25:40.544 --> 00:25:48.864
that I was getting married that week and didn't- Yeah... didn't make it. I'm still, like- Yeah. But we brought you on the second year, so. [laughs] I know. I know. I know.
159
00:25:48.864 --> 00:26:02.394
But still, I'm just like, go to my own wedding or go to Clarity Conf. It was a really hard choice. [laughs] Yeah. Well, I think you probably made the smarter choice. [laughs] My, my husband would probably agree with you.
160
00:26:02.474 --> 00:26:12.914
Yeah. What do you remember from those, that first year of talks? I mean, obviously you can go look at the Clarity Conf site. You keep up all the old talks- Yeah... which is amazing, all the old talk abstracts.
161
00:26:12.934 --> 00:26:21.684
But, you know, what do you remember content-wise from those early 2016, 2017? Yeah. The early content that we were diving into then. Yeah.
162
00:26:21.714 --> 00:26:28.194
You had some people that were already pretty knowledgeable about it, but, um, a lot of people were just kinda like getting into things.
163
00:26:28.244 --> 00:26:37.614
And so having Brad, uh, Frost give that first talk, which just kind of sort of set the tone of like, uh, was it, "The thing is design systems, the time is now."
164
00:26:37.834 --> 00:26:49.214
[laughs] And he goes into, like, breaks down, like, all the bits and pieces of, like, what a design system is, why you need it. And then I was like, okay, now that talk is done. Don't need any more talks like that.
165
00:26:49.334 --> 00:26:52.074
[laughs] So everything else can, like, dive in.
166
00:26:52.634 --> 00:27:09.794
And I, I knew that I didn't want every single talk to be about design systems 'cause I, I wanted there to be extra content that would be useful, so things around accessibility or whatever just seemed like might be important to know as a design systems person.
167
00:27:10.414 --> 00:27:11.414
I had a lot of...
168
00:27:11.514 --> 00:27:26.034
And I hate to say it, but usually dudes that would reach out wanting to speak, and they all wanted to kinda do, like, a show and tell of their latest design system that they launched, and I had decided I don't really want this conference to be a show and tell.
169
00:27:26.154 --> 00:27:37.934
I want everything to be like everyone can take something away, and, like, we've all seen a design system, so if you're up there saying, "We just launched this design system. Here's our colors. Here's our buttons," yawn.
170
00:27:38.074 --> 00:27:46.954
[laughs] You know? [laughs] So that's why I, I've never really... And if you're one of those people that submitted that, I'm so sorry. [laughs] But it's just not the approach I wanted to take, so.
171
00:27:47.114 --> 00:27:54.304
[laughs] No, I love, I love that that was this very intentional for you because I think that's one of the things that made Clarity so great as an event was
172
00:27:55.214 --> 00:28:02.494
there was very little to no content that was like, let me pitch you on this thing that I created, or like, let me just show you the thing that I did.
173
00:28:02.594 --> 00:28:12.884
I think the content was start-to-finish inspiring or theoretical in a good way, right? Like, what is the concept, the philosophy, or just kind of like eye-opening.
174
00:28:12.914 --> 00:28:24.174
Like, oh, how do I actually do this thing, rather than just, like, look at a thing. And then I, I liked the idea of having, like, sort of a inspirational keynote to end on.
175
00:28:24.254 --> 00:28:36.464
And so I was really excited 'cause right around that time, the NASA Graphic Standards Manual had just been, uh, re-released, and all the design, like, nerds were, like, collecting this manual.
176
00:28:36.654 --> 00:28:46.204
And I just, like, cold emailed the guy. I was like, "Would you be interested in speaking at my conference?" And he got back to me and was like, "Yeah, I would love that." Oh, wow.
177
00:28:46.274 --> 00:28:56.934
And it's cool 'cause he, he actually just released his memoir, like, a month or two ago, and Clarity's mentioned in there, and it's really cool 'cause he... It basically...
178
00:28:56.974 --> 00:29:08.494
This guy's, like, at the time I think he was like 84, and so he was still a practicing designer, but this, like, kicked off more speaking, and so he was just, like, speaking everywhere, and he actually...
179
00:29:08.954 --> 00:29:16.874
Yeah, like, the fact that he's still practicing and his work is still going into space and stuff is, like, really cool. [laughs] That's amazing. Um, yeah. So
180
00:29:17.834 --> 00:29:26.594
anyway, everything was kind of, like, stuff that I was interested in in the moment. I had a talk about motion design 'cause that was something that we were currently trying to tackle at work.
181
00:29:26.694 --> 00:29:30.494
Claudina was giving a talk around organizing components and stuff.
182
00:29:30.654 --> 00:29:43.054
I used to always put my CSS in one place, my JavaScript in another place, and she was the f- first person that made me start changing to where I wanted all my component folders to have everything related to that component in that folder.
183
00:29:43.234 --> 00:29:48.994
Pre-React, pre-component- Yeah. [laughs]... JSX. [laughs] And it was like this was, like, a big deal, you know? And I- Yeah...
184
00:29:49.134 --> 00:30:07.674
I, I just can't emphasize enough to people who are, you know, either new in your career or new into design systems, if you've come into this landscape in the last couple of years with React, with JSX, it is so self-evident to you that you make a component and all of the stuff goes together, and the functionality, and the tokens, and the variables, and the CSS, and, like, whatever.
185
00:30:08.394 --> 00:30:17.684
It was so different at that time. Yeah. When you started Clarity Conf, most companies were not fully on board with the React train, right? Yeah.
186
00:30:17.774 --> 00:30:28.534
You basically started a new project, um, or, or migrating your project to use React. You maybe started on one little part or, like, one new area. It was, like, a big migration.
187
00:30:29.174 --> 00:30:38.434
Um, and so these conversations that we were having around, oh my God, let's put the style part and the code part, the CSS part, and the JavaScript part, and then the functionality, and the HTML.
188
00:30:38.454 --> 00:30:45.674
Like, this was shockingly novel. Yeah. Uh, which is so funny to, you know, looking back now it's like, well, of course. Yeah.
189
00:30:45.914 --> 00:30:56.664
'Cause I had come from, especially having worked at companies that were really into, like, Sass and Ruby, you know, everything was, like, very organized. There was literally a folder called Style Sheets- Mm-hmm...
190
00:30:56.744 --> 00:31:02.794
and, like, all the styles would go in there. And then it felt foreign to me to have things not in that folder.
191
00:31:03.334 --> 00:31:13.818
Yeah, uh, it, it's kind of funny 'cause-Like 2016, it is a long time ago, but it's still not that long ago, but so much has changed since then. It's wild.
192
00:31:13.878 --> 00:31:21.538
Like, a lot of my thinking and, and how I approach things has changed since then. But there's still things that hold true. [laughs] Yeah, absolutely.
193
00:31:21.558 --> 00:31:31.178
I think a lot of the foundational, the, the concepts, right, that we were really establishing then about, you know, what is a component? What should it do? How do we, you know, put these concerns together?
194
00:31:31.598 --> 00:31:43.748
How do we keep them separate? How do we abstract things? What's too much abstraction? Uh, what's overcomplicating? What's too genericizing? I think a lot of that still holds really true when we think about
195
00:31:45.118 --> 00:31:59.738
a, a piece of any size that can be reused. Right. So thinking back to that time, what were the, the changes that you started to pick up that made you feel like, oh, this is going kind of, kind of mainstream?
196
00:32:00.018 --> 00:32:12.188
In the mini-sode for this podcast, I was talking about Gartner in the fall of 2024. They actually put design systems on their hype cycle graph, and it's not even fully peaked yet. Mm-hmm.
197
00:32:12.188 --> 00:32:23.138
So obviously we're coming from inside the niche, you know, where 2016 we were early adopters before design system would've even appeared on the Gartner hype cycle graph. But
198
00:32:24.678 --> 00:32:37.198
I still think that there was a lot of movement in- Mm-hmm... 2017, 2018, 2019. I feel like suddenly design systems became, like... Companies were like, "We need a design system. We need to hire a design system team."
199
00:32:37.238 --> 00:32:47.798
And it feels like it happened really fast. Mm-hmm. What were you picking up on then that was making you go like, "Oh man, this is like a thing"? There were a couple different things.
200
00:32:47.878 --> 00:32:59.898
First of all, watching the Slack blow up from, like, 12 people to thousands of people in a very short time span was wild. [laughs] So there's that one indicator.
201
00:33:00.418 --> 00:33:04.658
But then also you were just seeing so many people starting to put theirs public.
202
00:33:04.788 --> 00:33:16.818
That used to be something not too many companies would wanna do, 'cause they were always worried about proprietary, you know, confidential whatever. But I think it be- started to become popular to do that.
203
00:33:16.878 --> 00:33:31.118
And so it felt like almost every day somebody was launching a new one and, and it was really, really cool to see that. And then also just the number of design systems tools as a product that were starting to come out.
204
00:33:31.618 --> 00:33:44.228
I think a lot of us were custom building stuff because none of this stuff really existed. And now it was like, oh, now you've got this tool or that tool or that tool. [laughs] Storybook. Yeah. Navsa- Yeah... c.
205
00:33:44.228 --> 00:33:53.638
Zero Height. Yeah, Zero Height. Yeah, all of that. I mean, yeah, and I mean, those are kind of the winners. Those are the big ones. Mm-hmm. But there were all kinds of smaller tools. So many.
206
00:33:54.138 --> 00:34:09.788
First it was Sketch, you know, InVision was really big. Figma came out, and I, I think you're right. The way that we created and grew tools for ourself- Mm-hmm... was a flywheel for also being able to do the thing.
207
00:34:09.838 --> 00:34:16.518
It became easier to do the thing. It became faster to do the thing. Mm-hmm. Once we got to another little kink and we were like, "Oh, let's build another kind of tool."
208
00:34:16.538 --> 00:34:26.438
And those things were growing, and there really was an audience for it, and it was really cool to see just h- how fast that was. I mean, I think it was like five years. Yeah, it was really fast.
209
00:34:27.098 --> 00:34:39.138
I really wish I had a time machine sometimes. I think it was, like, 2012-ish, I was actually pitching the idea of a style guide product to somebody.
210
00:34:39.678 --> 00:34:51.087
It was basically a tool that would help make it easy to document and organize, you know, your styles and all that stuff, and the devs I was talking to said it was too niche and it wouldn't sell. Yeah.
211
00:34:51.138 --> 00:35:04.178
And so we didn't do it, and now I see all these, like, million and billion dollar companies and I'm just like, damn, we would've been early. [laughs] Too, too early, Jina. It was too early. Yeah. That's the thing.
212
00:35:04.258 --> 00:35:15.518
I, I was too early. [laughs] But yeah, I kick myself about that sometimes. [laughs] Well, when you, when you get your time machine, let us know. Yes. Okay. Will do.
213
00:35:15.718 --> 00:35:33.398
[laughs] But yeah, a- and then the other thing I think was you would see, like, some key people doing a lot of stuff for the community, but then there was this explosion of so many people were contributing to the community, so that was another big thing where I'm like, wow, this is really, like,
214
00:35:34.398 --> 00:35:36.318
you know, it's, it's so hot right now.
215
00:35:36.398 --> 00:35:50.118
[laughs] Like, so I mean, the fact that there's been design system awards, there's been, you know, there's a university, there's, there's just, like, everything that you can imagine, there's a design system thing for it.
216
00:35:51.048 --> 00:36:05.908
[laughs] I, I think for me, the moment that I realized, oh, like, this is a, a capital T thing, uh, this is more recent. This might be, like, more 2019, 2020 kind of era, was realizing there are new grads,
217
00:36:07.018 --> 00:36:24.538
like- Mm-hmm... first job being like, "I wanna get into design systems." Yeah. [laughs] And I'm just like, whoa. Yeah. That was not possible even a couple years prior to that. That really blew my mind. Yeah.
218
00:36:24.918 --> 00:36:31.158
A, a f- few weeks ago, I was a guest speaker f- at CCA, which is a art school here.
219
00:36:31.458 --> 00:36:47.478
Josh Silverman's, like, one of the chairs of the design program there, and so he invited me to his class, and yeah, they were, like, asking me about getting started in design systems and it just, like, blew my mind 'cause it was like when I was in art school, like, this wasn't even a topic.
220
00:36:47.678 --> 00:36:58.238
[laughs] Yeah. What did, what did you tell them? Because I'm kind of of the mind that you can't and shouldn't do design systems if you've never built any products. I was real with them.
221
00:36:58.258 --> 00:37:03.478
I was like, "Look, like, I've enjoyed my career in this, but I will tell you it's kind of hard."
222
00:37:03.528 --> 00:37:15.354
And I told them some of the realities of, like, you being seen as, like, doing the supporting work and not leading the work, and so, you know-Growing in your career sometimes can be more challenging depending on where you land.
223
00:37:15.494 --> 00:37:25.654
I was like, I'm not trying to scare you in this, but I'm just being real. You need to love this to go into this. [laughs] Like Yeah. Truly, I think every product designer
224
00:37:27.034 --> 00:37:40.114
and many engineers could really benefit from spending some time thinking about how components and systems work and how these processes work, and how you actually standardize the building of UI.
225
00:37:40.874 --> 00:37:51.894
Um, and I think a lot of people who are in design systems, like more or less permanently, really benefit from product. Like I took a couple years off. I built my own business. I actually did some product work.
226
00:37:51.954 --> 00:38:00.074
I freelanced for a year and built an entire product, like design and dev, and coming back into design systems, I was like, "Oh, right."
227
00:38:00.914 --> 00:38:08.654
Like, building a product made me remember what all the benefits of having a design system are, and like why it's actually useful.
228
00:38:09.194 --> 00:38:22.004
I think these days it's so easy to think of a design system as I made a Figma kit and I made a couple React components. I made my own little, you know, miniature material UI. Like done. I'm done. I did it. Yeah.
229
00:38:22.034 --> 00:38:31.234
I made a design system, and- [laughs]... you know, it's like, well, that's a nice portfolio project that you just did, but the reality is a lot more complicated. Yeah.
230
00:38:32.774 --> 00:38:47.194
Yeah, exactly, and that's the whole like thinking of design systems as a thing versus thinking of it as a practice, and I always try to remind people to stop thinking of it as a thing and think of it as a practice 'cause it...
231
00:38:47.214 --> 00:38:57.073
There's more to it than just the thing that you ship, you know? [laughs] Yeah, but that's hard, Jina. We don't wanna- Yeah, I know... that hard work. That's like pe- people work, and process, and- [laughs]...
232
00:38:57.104 --> 00:39:06.724
talking sales. They're like, "Man, that stuff's hard. Can't we just make components?" [laughs] Believe me, like there are times where I'm like, I miss when I would just push pixels. [laughs] Mm-hmm.
233
00:39:06.734 --> 00:39:19.304
But then I'm like, do I really wanna go back? Grass is always greener, I guess. [laughs] That's true. So when would you say was like peak design system? Have we not even reached peak design system yet- [laughs]...
234
00:39:19.354 --> 00:39:31.304
or is that still to come? I saw a leader that works in the previous organization that I worked in, I won't name which one, but the post that he posted on LinkedIn felt like,
235
00:39:32.214 --> 00:39:40.844
yeah, we did all this design systems work, but was this really the right work kind of attitude. And, and I feel like a lot of people are taking sort of a negative view of design systems.
236
00:39:40.854 --> 00:39:46.674
There's a lot of like disillusioned, like the- Yeah... broken promises of design systems, like- Yeah. Yeah.
237
00:39:46.774 --> 00:39:54.954
I'm seeing a lot of that kind of stuff, and you know, I'll be honest, I'm also burnt out and jaded from doing this for like 20 years, and I have my own cynical views.
238
00:39:54.994 --> 00:40:04.144
But I, I definitely don't think that this was a mistake or broken promise or anything like that. It kind of comes back to balance, which I think I touched on earlier.
239
00:40:04.244 --> 00:40:15.314
People going too far into this that they're focusing on the wrong things, and then, yeah, of course you're not reaching the goals that you wanted to achieve 'cause you're focusing on the wrong things.
240
00:40:15.354 --> 00:40:21.434
I was gonna save this for the spicy take, but I'll just talk about it now. No, we... This is a spicy take podcast. We love it. Okay, cool. Bring it on. Great.
241
00:40:21.654 --> 00:40:35.094
[laughs] I kind of jokingly said earlier, like created a monster thing, but I do wonder if we've kind of, I hate to use this phrase, but I can't think of a replacement, but shot ourselves in the foot where we've taken on too much as practitioners.
242
00:40:35.514 --> 00:40:44.354
We're basically maintaining product quality. We're making sure it's efficient, but these are things everybody should be doing, and everybody should be working on that works on the product.
243
00:40:44.814 --> 00:40:56.194
But like what I have seen, and especially in some of the organizations I've worked on, the design system team kind of becomes, uh, too responsible for things, and they become a bottleneck.
244
00:40:56.334 --> 00:41:08.794
Like all the quality reviews are going through the team, and then the team can't ship at a rate that they want to ship at because they're constantly having to pivot as the company objectives are pivoting.
245
00:41:08.874 --> 00:41:16.874
And then the company looks at the design system team of like, "Well, what have you really done for us?" It's like, are you kidding me? Like, we've done everything for you. [laughs] Everything. Yeah. Yeah. Yeah.
246
00:41:17.134 --> 00:41:29.814
So when I have my own jaded feelings, it's really around that, is like I feel like we have taken on too much and it maybe has hurt us. It's like, how do we balance this out better where we're sharing...
247
00:41:29.854 --> 00:41:35.834
We, we'll help guide the work, but we should be sharing this responsibility. Yeah. I don't think there's any maybe about it.
248
00:41:35.974 --> 00:41:48.334
I feel like you just summed up the whole reason that I wanted to start this podcast, and the kind of conversations that I wanna be having on this show because we design systems practitioners and design systems teams.
249
00:41:48.914 --> 00:41:59.594
You know, if there are broken promises around design systems, like it's been us making those promises. It's been us saying- Mm... yeah, we'll take that on. Yes, we'll increase our scope. Yes, we will review every design.
250
00:41:59.694 --> 00:42:10.754
We will become the design police. We'll be responsible for all of this stuff, and then we wonder why our execs have this idea that a design system is supposed to be 100% of your front-end code.
251
00:42:10.894 --> 00:42:26.674
And, you know, it, it's absolutely appalling that you think a design system team could and should be reviewing all of the designs, especially as a team gets bigger or like an organization gets bigger. Like it just...
252
00:42:26.734 --> 00:42:32.064
That is such a misunderstanding, I think, of the value that a team like this- Yeah, and it-... can bring.
253
00:42:32.754 --> 00:42:42.924
And it's not just reviewing designs, but what I've seen is like you basically become the front end shop for the whole company. Like, everybody just assumes all component Oh, I need this feature. HTML, CSS.
254
00:42:42.924 --> 00:42:49.704
It's a component, put it in the system, and then we'll build it. And you become this component request machine, you know. No. It's just... Yeah.
255
00:42:50.394 --> 00:43:05.494
I've seen it, uh, in all sorts of different forms and factors at various companies, and we need to find a way to like have a more realistic impact that isn't burning us out and having us take on too much. Yeah.
256
00:43:05.734 --> 00:43:19.782
100% agree. I mean, there... This is what I think of as peak design systems, right? I think this was- Yeah... kind of like 2019-15 to 22 was the era of that, of like we're gonna have this massive design system team.
257
00:43:19.902 --> 00:43:28.762
We are going to build any component that any feature team might need so that it can be in the system, and then we're blocking their releases.
258
00:43:29.162 --> 00:43:40.872
I really, really hope that we can, I don't wanna say get back on track, but I really, really hope that we can adjust the way that we talk about design systems in organizations to ourselves- Yeah...
259
00:43:40.912 --> 00:43:49.762
within our niche, but especially within organizations and to teams. Going back to, you know, 2013, 2016, like we were so excited.
260
00:43:49.802 --> 00:43:58.312
I say we design system practitioners were so excited because we were seeing things like we started working on something and all the engineers were like, "Ooh, gimme. Ooh, can I have that?" Yeah.
261
00:43:58.322 --> 00:44:08.842
The designers were like, "Ooh, I want that. Ooh, make me one." Yeah. Like, it was so exciting because we were actually really providing efficiency or consistency.
262
00:44:09.402 --> 00:44:17.512
In, in the podcast episode with Brad Frost, he said something that has really stuck with me. And he said, you know, at the time, efficiency was about respect. Mm-hmm.
263
00:44:17.542 --> 00:44:25.982
Efficiency was like, it is not a good use of your time and your expertise and your intellect to be updating the hex value on 800 pages. Like, we can automate this.
264
00:44:26.022 --> 00:44:35.342
We can find a better way to do it, and efficiency is such a capitalism buzzword now. He just called out like- Yeah... that was a problem. Like, that was a thing.
265
00:44:35.422 --> 00:44:44.882
We were solving a really different problem then, and I think it's 2025. Like, what problems are we solving now, and how do we do that in a way that makes more sense?
266
00:44:45.802 --> 00:45:01.402
You know, one of the things I was concerned with at one of the previous roles that I had where I was managing a team, one of the leaders that was trying to help give us like our mandate and basically like what he wanted from us, and it was accelerate.
267
00:45:01.562 --> 00:45:10.952
And I was just like, "Oh my God, we're already trying to champion efficiency. Like, how much faster can we go?" [laughs] All right. We're running.
268
00:45:12.082 --> 00:45:24.002
[laughs] So well, since we kind of naturally got here, I'm curious, where do you think design systems as an industry, a practice, where do you think we need to go in the future?
269
00:45:24.062 --> 00:45:29.402
What are some of your hopes or wishes, you know, that you think would be an improvement?
270
00:45:30.802 --> 00:45:40.922
I, I've given a couple talks about this, but with everybody talking about AI and all that, um, usually they're talking about generating components or code and stuff.
271
00:45:41.022 --> 00:45:53.862
But I'd really like to see us find ways to potentially use AI or machine learning to actually deliver a really custom experience to our end users.
272
00:45:53.922 --> 00:46:06.582
That's what's really interesting to me, and it's like, yeah, we've been designing buttons and cards and tabs, but how can we actually deliver the best UI that that person needs in that context, in that time, in that place, all of those things.
273
00:46:06.702 --> 00:46:15.342
This wouldn't be something only on design systems. It would obviously be a collaboration with product, but I, I'm really excited about the potential of what could be done.
274
00:46:15.442 --> 00:46:23.982
It's such a natural fit, I think, for design systems though because if you- Yeah... think about even at a simple kind of component level, like to be able to say like,
275
00:46:24.902 --> 00:46:33.042
oh, you know, it's not just a primary button or a secondary button or a card like this or a card like that. It's like, oh, can we pick up what's happening in their browser?
276
00:46:33.202 --> 00:46:42.512
You know, dark mode, light mode is a really, really simple one, but, you know, I'm just thinking about very, very simple things that could be in a design system that have nothing to do with business- Yeah... logic.
277
00:46:42.592 --> 00:46:53.402
Right. But parts of it could be based on personalizing, so it's like am I left-handed? Am I right-handed? Can we change the UI to make it more comfortable- Mm-hmm... for left-handed people?
278
00:46:53.562 --> 00:47:01.622
I haven't really seen anyone really explore that fully, and obviously, you know, people are really into, like, consistency. The button's always in the same place.
279
00:47:01.682 --> 00:47:12.002
I'm like, well, does it have to be in the same place for this other person? You can have consistency for each person, but [laughs] maybe it doesn't need to be across all people. So I'm excited about that.
280
00:47:12.222 --> 00:47:30.362
The other thing that I think is more of a community thing that I'm hoping for is just to see us help support each other in our careers more as a community 'cause I feel like design system teams are often hit during layoffs, and obviously I was hit by one not long ago.
281
00:47:30.442 --> 00:47:40.762
And, you know, obviously we wanna share tools, we wanna share products and things, but I'd love to see us share more, like, helpful resources so we can grow in our careers.
282
00:47:40.892 --> 00:47:50.502
I, I feel like that was such a, like, Miss America-type answer, but [laughs] I just really feel that way. You know, I wanna see more of that. Well, you know what? We'll allow it. We'll allow it.
283
00:47:50.582 --> 00:48:06.362
You, you can be our design system queen for- [laughs]... all, the whole time really. No, it's true though because design system work can be... There's a lot of words people use, right? It can be lonely.
284
00:48:06.402 --> 00:48:11.372
I'm a team of one. You know, I have an amazing team. I love my team. I love my company. They're fantastic.
285
00:48:11.762 --> 00:48:20.772
There's a couple designers and engineers who I really do get to spend time with thinking about components and processes and systems. I'm still the only one who's responsible for this at my company.
286
00:48:21.242 --> 00:48:32.682
Even when you have a team, you have a team of three, five, I don't know, 10, somewhere big, but you're still so small in comparison to your whole organization. And you touched on this with the layoffs thing, like
287
00:48:33.802 --> 00:48:47.221
w- you're not necessarily the work that's getting really highlighted or, you know, shown in all hands or, you know, g- uh, connected to a KPI or, you know, conversion metric or a dollar metric.
288
00:48:47.342 --> 00:48:52.122
Um, and so I think a lot of us in the design system space have had this experience where we're like
289
00:48:53.742 --> 00:48:59.202
p- individual people may be telling you, like, "Oh, this was really helpful," or, "I learned a lot," or, "I'm so glad I have this tool."
290
00:48:59.842 --> 00:49:06.082
But it can also be very hard to justify your work or talk about it in a way that really shows
291
00:49:07.102 --> 00:49:23.842
the value of what you're bringing, and especially as, again, in that peak design system era where it was like suddenly, like, design system teams were responsible for, like, the entire design quality of the entire product and you're just like-At, at least I need somebody to like gripe with who understands- Yeah...
292
00:49:23.892 --> 00:49:29.742
my complaint. No, no, I mean, not like product and feature designers and engineers don't have their own frustrations.
293
00:49:29.752 --> 00:49:35.822
[laughs] But, you know, I think there are a lot of really, really great spaces and I would love to see more. Obviously, Design Systems Slack is a good one.
294
00:49:35.902 --> 00:49:40.622
You know, Ben Callahan has been doing The Question, which is a really, a really- Yeah... really great community space.
295
00:49:40.802 --> 00:49:50.002
SIL into Design Systems is making some really cool events, some really cool meetups that they're bringing back. So I think there are a number of, of them, but I, yeah, full support.
296
00:49:50.082 --> 00:50:00.942
Like, I wanna hang out in person with design leaders. Napsack was doing those design leadership summits. That was a great, really small group. I want more of that in- Mm-hmm... in the future. Yeah. Me too.
297
00:50:01.142 --> 00:50:11.482
[laughs] Are meetups back? Can we bring meetups back? You know, I would love to find a way to bring meetups back. I just gotta figure out locations. [laughs] Le- let us know. We're, we're- Yeah...
298
00:50:11.502 --> 00:50:17.742
we're, we're so excited. Jina, this was so fun. It was such a fun little, like, walk back through history. You know, I think- Yeah...
299
00:50:17.802 --> 00:50:32.382
it's so important to understand where we've been when we think about where we need to go in the future, and I think you really hit the nail on the head earlier when you were talking about some of the really negative, you know, pessimistic, like, did we screw up with design systems?
300
00:50:32.462 --> 00:50:40.072
Like, did we... Did... Was this a terrible, terrible idea? You know, I think the future of design systems is really bright. I think that this is- Mm-hmm...
301
00:50:40.472 --> 00:50:50.772
you know, this is a thing that I, I totally stole from you, but, you know, I... This is just how we build UI now. This is- Yeah... the way that we are doing things. We're using components. Yes. We're reusing things.
302
00:50:50.862 --> 00:50:58.662
We've got design and code tools that make that easy, and I don't think you can put that back in the box. Like- Yeah...
303
00:50:58.702 --> 00:51:08.202
this is just how we're gonna do it, so how do we do it in a way that is valuable and shows that value and isn't an absurd scope that burns the design system team out and doesn't actually do what is...
304
00:51:08.242 --> 00:51:19.942
you know, they wanted. Yeah. So thank you so much for taking us through it all. Yeah. No problem. [laughs] Thanks for letting me blab on. [laughs] We- What am I doing? [laughs] What am I... Get off my lawn.
305
00:51:20.682 --> 00:51:35.782
[laughs] You kids these days with your tokens. Okay. To wrap up, I am asking everybody who comes on this show to give us a Jina spicy take on design systems. No notes, just tell us, like, the spiciest take you got.
306
00:51:36.862 --> 00:51:46.232
Ooh, I might ge- get some hate for this, but I'm just gonna say it. See, it wouldn't be a spicy take if it wasn't gonna make somebody kinda like pissed. I...
307
00:51:46.282 --> 00:51:51.342
People at Figma, please don't be mad at me, but I don't think any of our design tools are there yet.
308
00:51:52.042 --> 00:52:12.622
I still look at design tools as, like, a communication tool and not the source, and it makes me sad that I see so many people spending so much time in these design tools, like, getting it pixel perfect when it's just gonna get rebuilt, and I don't see it really truly connecting to code yet, so I'm not a fan of current design tools.
309
00:52:13.282 --> 00:52:22.812
[laughs] I'm 100% with this take. Sorry. Yeah. [laughs] No apologies. There are zero apologies for spicy takes. You know- [laughs]... I think you're so right. Design, we're making a picture.
310
00:52:22.942 --> 00:52:32.272
It's not a true representation of the actual product, which is built in code. As I've been talking to guests on this show, like, this topic actually has been coming up a bunch because- Mm-hmm...
311
00:52:32.322 --> 00:52:41.802
it is a communication tool, and we're doing all this work to generate code off a picture, and I'm like, "Yo, we already have the code." Yeah. Like, I- Get it in the code. [laughs] I... Yeah.
312
00:52:42.462 --> 00:52:52.072
Yeah, I think there are some big changes that are gonna happen over the next, let's say, three to five years. Obviously, Figma's doing a ton of work. I was actually just- Yeah...
313
00:52:52.082 --> 00:53:02.482
checking out Penpot, which is doing a ton of really cool things. Oh, yeah. So Penpot actually uses CSS Grid and Flexbox instead of just, you know, vector layouts. So it- Say more.
314
00:53:02.522 --> 00:53:09.262
I wanna play with it because when I heard that, I was like, "Ooh." Mm. Um, but yeah, and you know, I do wanna shout out Webflow.
315
00:53:09.342 --> 00:53:20.702
I think they do a good job with their product, and I wish our product design tools could be more like Webflow, where it's actually code behind the scenes. That would be amazing. I think we're gonna get there.
316
00:53:21.242 --> 00:53:28.502
I think we're- Yeah... gonna get to a place where we are really working much closer, you know, in, in the medium. I think it's inevitable.
317
00:53:29.122 --> 00:53:38.882
I don't know what that looks like, but I'm really eager for that future too, because I think a lot of- Yeah... design system work right now is, like, replicating stuff in Figma.
318
00:53:39.151 --> 00:53:44.552
And to be clear, I don't think it's Figma that's the problem. I think it's- Yeah, and that's why I kept saying design tools. Mm, yep.
319
00:53:44.582 --> 00:53:51.542
I didn't wanna put all the, you know, aim at Figma, and I do love, you know, you guys at Figma- No, we love... You love Figma, yeah... if you're listening. I love you.
320
00:53:51.682 --> 00:54:05.182
[laughs] I mean, it's a really incredible tool, and regardless of what tool it is, man, if, if we say the words bridge the design and dev gap one more time, like, we still haven't really bridged that gap.
321
00:54:05.262 --> 00:54:15.642
It's like, get rid of the gap. No more gap. Don't bridge it, just get rid of it. No more gap. [laughs] Oh, well, amazing. On that note, Jina, thank you for your time.
322
00:54:15.842 --> 00:54:23.362
Your work in this space, your influence of over the last, yeah, 10 plus years, 20 years, just such a pleasure.
323
00:54:23.462 --> 00:54:34.222
Thank you so much for coming on the podcast, and I can't wait to talk to you again in the future and see what has changed. [laughs] Yes. [laughs] Thank you so much. [outro music] Thanks for listening to On Theme.
324
00:54:34.482 --> 00:54:48.902
This is a brand-new podcast, so if you like what you're hearing, please subscribe now on your favorite podcast platform and at designsystemsontheme.com to stay in the loop. See you next episode. [outro music]