WEBVTT
1
00:00:01.680 --> 00:00:08.620
Hello, Design System friends. It is so nice to be back in your ears after a nice long summer break.
2
00:00:08.660 --> 00:00:19.860
I'm not gonna lie, after I dropped the final episode of season one, I think I didn't look at LinkedIn for easily six weeks, and that was kind of glorious. I hope you have all had a great summer.
3
00:00:19.920 --> 00:00:35.460
I hope you had a vacation in there, and I hope you're excited to go back to school. Honestly, I feel like the best part of Q4 is the back to school feeling, like I am buying a new journal, I am buying new pens.
4
00:00:35.560 --> 00:00:49.120
Even though the end of the year is always just bananas, so busy, so many things going on at work, so many things going on, kids are back to school, holidays are coming up. I still, I love this time of year.
5
00:00:49.200 --> 00:01:01.600
I love getting back into it. Season one of the show was amazing. We had 17 episodes with guests. We hit over seventy-five hundred downloads since launch.
6
00:01:02.000 --> 00:01:12.880
I'm recording this in the middle of September, so we still have plenty of downloads to go. I would love to see that hit ten thousand. So if there's an episode you've been meaning to listen to, now is the time.
7
00:01:13.920 --> 00:01:20.110
I'm also really excited because the show has been averaging about two hundred downloads per episode in the first week after they launch.
8
00:01:20.640 --> 00:01:30.680
Industry data says that hitting twenty-seven downloads in the first week puts you in the top half of podcasts. So I think we're doing pretty well.
9
00:01:30.760 --> 00:01:36.500
Even better, we are hitting 80 downloads a week per week every week continually.
10
00:01:36.620 --> 00:01:50.980
I get an email in my inbox every Monday that's like, "Here's your last week report, sixty, eighty, a hundred downloads," which means people are still discovering episodes, listening to episodes, going back and re-listening to episodes, and I just think that is so amazing.
11
00:01:51.060 --> 00:02:04.080
That's exactly what I wanted. I wanted this to be sticky, so thank you so much for listening. I think my favorite stat update is that we're also seeing a solid about sixty-five percent average completion rate.
12
00:02:04.200 --> 00:02:17.540
In monetized shows and on YouTube, the completion rate, how long people actually listen to the episode or watch the video, that's what you get paid for, and we're getting a really incredible amount of completion.
13
00:02:17.580 --> 00:02:21.440
Like, people are sticking around for the whole conversation, which is just unbelievably cool.
14
00:02:21.980 --> 00:02:29.740
I'm gonna be dropping a handful of minisodes throughout the end of the year before we dive into a full-fledged season two in twenty twenty-six.
15
00:02:30.780 --> 00:02:40.180
Today I'm sharing how I think things have changed just in the year or even really over the summer since the end of season one, and what I see coming up.
16
00:02:40.220 --> 00:02:50.880
In season two, we're gonna be back with some new guests, more deep dives, but also I think I'm gonna mix it up a little bit with the format. I got a lot of feedback that you loved the short and sweet minisodes.
17
00:02:52.060 --> 00:03:09.700
Maybe this is because we're all just addicted to short form content, but I actually think there's something really nice about a concise drop of info, maybe more minisodes, maybe more multi-guest single topic shows, so getting a hot take from multiple people on the same topic in one episode.
18
00:03:10.360 --> 00:03:12.300
I've been tossing around a couple different ideas.
19
00:03:13.040 --> 00:03:23.800
If there's anything that you really wanna hear about on the show, if there's any guests that you think definitely need to be on the On Theme podcast, if you wanna be on the On Theme podcast, or if you have ideas for format, please send me a note.
20
00:03:23.860 --> 00:03:35.900
I would love to hear your thoughts. Okay, on to the actual content. I wanna dive into just how the vibes have shifted on AI, if you will.
21
00:03:36.420 --> 00:03:49.480
When I was recording season one at the end of twenty twenty-four and the beginning of twenty twenty-five, I felt like the design system industry's attitude on AI was just flat negative.
22
00:03:50.460 --> 00:03:59.710
Every time I had a conversation with somebody in all the communities that I'm in, it was just, "No, we hate it. We don't wanna use it. We don't want it to take our jobs.
23
00:03:59.720 --> 00:04:10.640
It's gonna generate only shitty components, and we just are flat out pissed and upset." Obviously, there was a huge amount of hype at that time.
24
00:04:10.660 --> 00:04:21.140
There was a lot of uncertainty at that time, but it's been really interesting because over the summer I feel like people's attitudes have changed a little bit.
25
00:04:21.930 --> 00:04:31.840
I went from hearing just flat out, "No," and, "No, I don't even wanna learn about it, and I don't even wanna talk about it," to people in the design system space actually being willing to do a little bit of experimentation.
26
00:04:32.720 --> 00:04:46.280
We're starting to get a little bit more sophisticated about what AI tools can actually do for us in the design system space, in the product software design engineering space in general, but specifically in design systems.
27
00:04:48.280 --> 00:04:56.800
Earlier this year, the only things that I were hearing were it can generate components, and it can generate docs, and maybe it can generate storybook stories.
28
00:04:57.420 --> 00:05:03.760
Caylig dropped an early custom ChatGPT project to allow you to write storybook stories, which was very cool.
29
00:05:03.780 --> 00:05:16.900
But I always felt like these were very simplistic use cases and probably not actually the most valuable use cases. I'm gonna break these down. First, let's talk about writing components.
30
00:05:18.460 --> 00:05:25.480
Yes, an LLM can write you an input, but an input is an input is an input, and they just don't get that different.
31
00:05:25.540 --> 00:05:35.360
If you've listened to my content, you know that I feel really strongly that design system teams building a whole bunch of custom components is often, I'm just gonna say it, kind of a waste of time.
32
00:05:35.760 --> 00:05:48.260
There are so many existing libraries out there. There are so many existing tools out there. There's existing inputs out there, probably in your own code base to start from. And we historically, design system teams, have
33
00:05:49.700 --> 00:06:11.192
really spent a ton of time just, like, getting way in the weeds about how to build the perfect input, and I'm not gonna beat that dead horse anymore, butI don't feel like we're building enough basic atomic level components for LLM build me an input to really be a core use case for AI and design systems.
34
00:06:12.022 --> 00:06:23.432
Do I think if you gave a really good requirements doc to an LLM, could it generate a really good input for you? Sure. Not disputing that. Just not sure that this is a core need.
35
00:06:23.592 --> 00:06:33.812
For most of us, we're doing a whole lot of other things, and the other stuff that we do as a design system practitioner is far more valuable to our organization than building the button, building the input.
36
00:06:34.952 --> 00:06:41.612
The second thing is documentation. Now, I feel really strongly that this is actually a terrible use case for LLMs.
37
00:06:42.412 --> 00:07:02.092
A significant portion of the human written documentation for design system components is actually more about the technical implementation, and humans may still need some of that information, but the engineers often can read it from the code, but more importantly, the LLMs can read it from the code.
38
00:07:02.612 --> 00:07:15.912
So in some new world where we're having a lot of LLM generated output by our engineers, they can interact directly with the LLM, and so they can say, "What are the properties? What are the variants? What are the options?
39
00:07:16.492 --> 00:07:19.432
Hey, use this component and fill in the data."
40
00:07:19.772 --> 00:07:33.772
A lot of the documentation that we write explaining the technical implementation can be automatically generated, but I'm not even sure it's necessary to automatically generate it anymore because it's already computer code that the computers can already read.
41
00:07:35.302 --> 00:07:39.412
The other stuff that we write is the how and the why.
42
00:07:40.192 --> 00:07:54.052
When you ask an LLM to write documentation for, say, your input, it's gonna write a bunch of stuff that sounds like the worst design doc system documentation that you've ever read, like an input is an element that a user can type into.
43
00:07:55.192 --> 00:08:08.022
Is that actually the documentation your team needs? Probably not. The documentation that your team actually needs is, when do I use this? Why do I use it? What is the design language around this?
44
00:08:08.072 --> 00:08:15.712
Are there certain icons I can use with it? What other interaction patterns does this go with? An LLM is not going to have that information.
45
00:08:16.892 --> 00:08:25.852
I've got a lot more to say on this topic around how we give our AI tools the context of our design language, but we'll get into that another time.
46
00:08:25.932 --> 00:08:41.292
Since spring, I'm starting to hear a lot more really interesting use cases for how AI can actually integrate into our system teams process and product teams. I feel like the attitude has really shifted.
47
00:08:41.352 --> 00:08:48.252
We're not seeing quite as much of the doom and gloom, it's gonna replace all our jobs kind of attitude.
48
00:08:48.992 --> 00:09:00.832
At this point, I think it's pretty clear that companies who are doing layoffs and saying it's because of AI are pretty much using that as an excuse to reduce headcount for whatever other business reasons.
49
00:09:01.432 --> 00:09:16.572
I'm not seeing the absolutely dramatic ROI claims come true, right? Like, oh, it'll make you 30% more effective. I'm not seeing an AI agent that is just like a whole nother engineer or especially another designer.
50
00:09:17.292 --> 00:09:29.132
What I am seeing is ways that these tools can help us break down silos, do more collaboration, learn and grow, and shift the boundaries of roles in ways that I think are really interesting.
51
00:09:30.112 --> 00:09:41.072
I've used it for writing storybook stories. I've seen a lot of people use it for writing tests, and you have to be careful here because the output, of course, can really vary.
52
00:09:41.632 --> 00:09:57.352
LLMs really like to mock fake stuff in tests and not really test things, but it can be a really nice head start. I'm seeing a lot of interesting work around prototyping, which I'm excited to talk about more.
53
00:09:57.372 --> 00:10:10.592
Prototyping can mean a whole bunch of things, right? It can mean generating some flows to build alignment with your PM, your designer, your engineer, or just to show what something might look or feel like.
54
00:10:11.332 --> 00:10:20.352
Prototyping could mean building or iterating on a component, a new component, an existing component, or even a non-design system component, right?
55
00:10:20.392 --> 00:10:24.862
Like, using design system components to make some kind of interaction pattern.
56
00:10:26.952 --> 00:10:40.682
I am seeing a ton of good uses around code refactors and migrations, writing automated migration scripts, or actually having the LLM do or support code refactors.
57
00:10:41.152 --> 00:10:46.702
This is a really, really nice way to help your teams actually upgrade the version of the design system they're on.
58
00:10:47.492 --> 00:10:57.752
I'm seeing designers have learning opportunities to understand code better, explore interactivity, to explore routing, flows, animations.
59
00:10:57.792 --> 00:11:04.092
Even if the outputs aren't production ready, just really speeding up early collaboration and, like, we love a learning moment, right?
60
00:11:04.132 --> 00:11:12.212
We love to get in there and actually have a better understanding of what the output in code of the thing that we're building or designing might be.
61
00:11:13.452 --> 00:11:24.512
And I think the most exciting use cases are the ones that are still to come. How do we design in the browser? How do we design and edit on existing product? How do we get designers in production?
62
00:11:25.172 --> 00:11:41.932
How do we have a Figma-like UI experience in real production code? I-- Here's your spicy take of the show. I am really baffled by the focus in the design system space on generating code out of Figma.
63
00:11:42.852 --> 00:11:55.732
It's still a majorly hot topic, and I'm just not convinced that's the right way to go about things. I'm seeing a lot of token pipeline AI tools, things like that, which very cool and can be a really powerful tool.
64
00:11:56.592 --> 00:12:10.812
But generating the code out of Figma mocks is funny to me because we already have all of the code components, and it's just not really possible to have 100% one-to-one parity between Figma and code.
65
00:12:11.292 --> 00:12:30.140
There's always gonna be in code more options, more variations, more props, ways to deal with data that's coming in.That you just can't replicate in Figma, and there's gonna be CSS styling layout things that Figma just can't really do because it's a vector program and not a browser.
66
00:12:30.730 --> 00:12:39.300
Shout out to Penpot, who I know is working really hard on this problem, but I'm of the opinion that we should be letting designers build and design
67
00:12:40.560 --> 00:12:52.280
with the production code components and all of the variations and flexibility that entails, rather than being in Figma where we have to recreate a lot of things, and the output is not gonna be exactly realistic.
68
00:12:53.120 --> 00:13:06.490
There's definitely still a place for Figma. I am not anti-Figma. But I would really love to see a workflow that looks more like the following, starting with sketches and flow charts,
69
00:13:07.420 --> 00:13:21.760
taking that into an interactive prototype tool, getting something that is 60 to 70% of the way there. The flow is there. Maybe all the details aren't exactly there, but the concept is there.
70
00:13:21.820 --> 00:13:36.640
Or even just having a wireframe in Figma that is tagged somehow with which component it should be, and then you can put that into an LLM or a tool and actually have it apply the components on top.
71
00:13:38.000 --> 00:13:41.680
And then the place where Figma is still really valuable is when you're doing visual design.
72
00:13:42.120 --> 00:13:55.500
But when you're really thinking about the visuals, the feel of something, you actually do need to be able to go in to build hi-fi mocks. LLMs so far are not very good at that. They're not really good at design.
73
00:13:55.520 --> 00:13:57.420
They're not really good at understanding design language.
74
00:13:57.460 --> 00:14:09.320
Like, yes, they can output a UI, but when we think about really good design, when we think about apps and projects that are interesting or beautiful or just work really well, that's the product of a lot of design thinking.
75
00:14:09.560 --> 00:14:14.520
So we talk a lot in the design system space about does the design system stifle creativity?
76
00:14:15.240 --> 00:14:22.710
When you're building UI that fits in with things that you've already built, you're building another form, you have these design concepts already,
77
00:14:24.020 --> 00:14:37.380
you don't necessarily need to be doing super hi-fi designs because you know this is a text field, this is a select field, we want this amount of spacing between them, we always do primary and a secondary button, and you should be able to layer the system over that.
78
00:14:38.040 --> 00:14:44.820
We've been really lucky at Color to be an early customer of Dessin. That's D-E-S-S-I-N, dessin.ai.
79
00:14:45.040 --> 00:14:58.840
Their team is working on a LLM-based tool that actually uses your design system and allows designers to build prototypes, build and edit components, and actually work directly in the code.
80
00:14:59.430 --> 00:15:03.810
There's just inklings and glimmerings of this future really coming to pass.
81
00:15:04.280 --> 00:15:17.700
I am firmly in the camp of having designers be working with the real production design system, the real code components, rather than trying to generate code out of Figma. So we'll see how this plays out.
82
00:15:17.720 --> 00:15:28.600
At the beginning of this podcast, in the trailer, I said design systems work is due for a major reinvention moment, and I wanna talk about it. I think we are in the middle of that reinvention.
83
00:15:28.620 --> 00:15:51.660
Things are really, really having to change, and I'm so excited to continue to explore what that is gonna look like in the future, to talk with all of you and bring to you the ways that people are changing their design system processes, the ways that they are working with new tools, the things that haven't changed, and how we figure it out in the future.
84
00:15:52.500 --> 00:16:06.380
Now for some design system industry and conference news. The Zeroheight Design System Awards are back this year. I'm so excited that the On Theme podcast was shortlisted for the best podcast category.
85
00:16:06.500 --> 00:16:08.120
I also have the pleasure of being a judge.
86
00:16:08.140 --> 00:16:25.700
Obviously, I don't get to judge the podcast category, but really excited to see all of the incredible teams, case studies, documentation sites, articles, events, community builders, everybody who got nominated for that shortlist, just so excited about all of your work.
87
00:16:26.120 --> 00:16:34.220
Really can't wait to dive into all of these nominations and, of course, see who the community is voting for. But of course, I have to plug myself.
88
00:16:34.380 --> 00:16:49.560
If you liked the On Theme podcast, if you listened to it this year, if you were one of my 7,500 downloads this year, wow, please go to awards.zerohight.com and vote for me, would really, really appreciate it.
89
00:16:51.160 --> 00:17:01.860
Second, I'm gonna be speaking at Zeroheight's Converge conference in Bristol, UK, in about a month. It's October 30th. It is not too late to get a ticket. You can go to converge.zerohight.com.
90
00:17:02.520 --> 00:17:08.780
If you are in Europe or, like me, if you would like a little UK vacation, go get your ticket. I would love to see you there.
91
00:17:09.440 --> 00:17:20.060
We're gonna have some amazing speakers, Annie Bell, John Voss, Donnie D'Amato, a couple past podcast guests, Natalia Shelburne, Guy Segal, and just the whole lineup looks incredible.
92
00:17:20.070 --> 00:17:32.380
All of the topics are gonna be around the future of design systems, AI tools, how things are changing, how we use and approach the tools that we have, and of course, the classic how do we talk about and sell the value of design systems.
93
00:17:32.960 --> 00:17:48.860
Also really excited because Gab and Nim at Dessin are also gonna be there, so if you want to get a demo of Dessin, check it out, talk to them, see how they're thinking about prototyping and giving designers access to design in the code.
94
00:17:49.340 --> 00:18:04.220
You do not wanna miss that. We may also be having a special little event for people who are interested in Dessin, so if you are gonna be there, please send me a DM ASAP so we can get that on the calendar.
95
00:18:05.500 --> 00:18:17.420
And last but certainly not least, we have Camp Clarity. I cannot believe it has been 10 years of Clarity Conf, and I cannot wait to see what Jina has up her sleeve for us this year.
96
00:18:17.430 --> 00:18:30.840
It's gonna be December 2 through 4 at the Ace Hotel in Palm Springs. We are gonna get a little, like, winter desert sunshine camp vibes. Just so excited for this really interesting format.
97
00:18:30.880 --> 00:18:39.930
I think we're gonna have time to hang out and play and experiment and workshop and just generally be together, go outside, and not just sit in a room and listen to talks.
98
00:18:40.260 --> 00:18:44.420
I get, I think, within an hour of the email going out. Please go get yours.
99
00:18:44.580 --> 00:18:56.960
I know it feels like everything is coming up so fast this fall, but I am so stoked for all of these events and so excited to see some old faces and make some new friends. So let me know if you're gonna be there.
100
00:18:57.000 --> 00:19:05.990
Go get your ticket and come and say hi when you are there. And if I don't see you there, don't worry, you know that I will be talking about it here on the On Theme podcast.
101
00:19:06.460 --> 00:19:19.160
As always, thank you so much for listening, for your support, for your comments. Really excited to dive into season two with you. Stay tuned for more minisodes, and I will see you on the internet.
102
00:19:19.580 --> 00:19:26.920
[mouse clicking]
1
00:00:01.680 --> 00:00:08.620
Hello, Design System friends. It is so nice to be back in your ears after a nice long summer break.
2
00:00:08.660 --> 00:00:19.860
I'm not gonna lie, after I dropped the final episode of season one, I think I didn't look at LinkedIn for easily six weeks, and that was kind of glorious. I hope you have all had a great summer.
3
00:00:19.920 --> 00:00:35.460
I hope you had a vacation in there, and I hope you're excited to go back to school. Honestly, I feel like the best part of Q4 is the back to school feeling, like I am buying a new journal, I am buying new pens.
4
00:00:35.560 --> 00:00:49.120
Even though the end of the year is always just bananas, so busy, so many things going on at work, so many things going on, kids are back to school, holidays are coming up. I still, I love this time of year.
5
00:00:49.200 --> 00:01:01.600
I love getting back into it. Season one of the show was amazing. We had 17 episodes with guests. We hit over seventy-five hundred downloads since launch.
6
00:01:02.000 --> 00:01:12.880
I'm recording this in the middle of September, so we still have plenty of downloads to go. I would love to see that hit ten thousand. So if there's an episode you've been meaning to listen to, now is the time.
7
00:01:13.920 --> 00:01:20.110
I'm also really excited because the show has been averaging about two hundred downloads per episode in the first week after they launch.
8
00:01:20.640 --> 00:01:30.680
Industry data says that hitting twenty-seven downloads in the first week puts you in the top half of podcasts. So I think we're doing pretty well.
9
00:01:30.760 --> 00:01:36.500
Even better, we are hitting 80 downloads a week per week every week continually.
10
00:01:36.620 --> 00:01:50.980
I get an email in my inbox every Monday that's like, "Here's your last week report, sixty, eighty, a hundred downloads," which means people are still discovering episodes, listening to episodes, going back and re-listening to episodes, and I just think that is so amazing.
11
00:01:51.060 --> 00:02:04.080
That's exactly what I wanted. I wanted this to be sticky, so thank you so much for listening. I think my favorite stat update is that we're also seeing a solid about sixty-five percent average completion rate.
12
00:02:04.200 --> 00:02:17.540
In monetized shows and on YouTube, the completion rate, how long people actually listen to the episode or watch the video, that's what you get paid for, and we're getting a really incredible amount of completion.
13
00:02:17.580 --> 00:02:21.440
Like, people are sticking around for the whole conversation, which is just unbelievably cool.
14
00:02:21.980 --> 00:02:29.740
I'm gonna be dropping a handful of minisodes throughout the end of the year before we dive into a full-fledged season two in twenty twenty-six.
15
00:02:30.780 --> 00:02:40.180
Today I'm sharing how I think things have changed just in the year or even really over the summer since the end of season one, and what I see coming up.
16
00:02:40.220 --> 00:02:50.880
In season two, we're gonna be back with some new guests, more deep dives, but also I think I'm gonna mix it up a little bit with the format. I got a lot of feedback that you loved the short and sweet minisodes.
17
00:02:52.060 --> 00:03:09.700
Maybe this is because we're all just addicted to short form content, but I actually think there's something really nice about a concise drop of info, maybe more minisodes, maybe more multi-guest single topic shows, so getting a hot take from multiple people on the same topic in one episode.
18
00:03:10.360 --> 00:03:12.300
I've been tossing around a couple different ideas.
19
00:03:13.040 --> 00:03:23.800
If there's anything that you really wanna hear about on the show, if there's any guests that you think definitely need to be on the On Theme podcast, if you wanna be on the On Theme podcast, or if you have ideas for format, please send me a note.
20
00:03:23.860 --> 00:03:35.900
I would love to hear your thoughts. Okay, on to the actual content. I wanna dive into just how the vibes have shifted on AI, if you will.
21
00:03:36.420 --> 00:03:49.480
When I was recording season one at the end of twenty twenty-four and the beginning of twenty twenty-five, I felt like the design system industry's attitude on AI was just flat negative.
22
00:03:50.460 --> 00:03:59.710
Every time I had a conversation with somebody in all the communities that I'm in, it was just, "No, we hate it. We don't wanna use it. We don't want it to take our jobs.
23
00:03:59.720 --> 00:04:10.640
It's gonna generate only shitty components, and we just are flat out pissed and upset." Obviously, there was a huge amount of hype at that time.
24
00:04:10.660 --> 00:04:21.140
There was a lot of uncertainty at that time, but it's been really interesting because over the summer I feel like people's attitudes have changed a little bit.
25
00:04:21.930 --> 00:04:31.840
I went from hearing just flat out, "No," and, "No, I don't even wanna learn about it, and I don't even wanna talk about it," to people in the design system space actually being willing to do a little bit of experimentation.
26
00:04:32.720 --> 00:04:46.280
We're starting to get a little bit more sophisticated about what AI tools can actually do for us in the design system space, in the product software design engineering space in general, but specifically in design systems.
27
00:04:48.280 --> 00:04:56.800
Earlier this year, the only things that I were hearing were it can generate components, and it can generate docs, and maybe it can generate storybook stories.
28
00:04:57.420 --> 00:05:03.760
Caylig dropped an early custom ChatGPT project to allow you to write storybook stories, which was very cool.
29
00:05:03.780 --> 00:05:16.900
But I always felt like these were very simplistic use cases and probably not actually the most valuable use cases. I'm gonna break these down. First, let's talk about writing components.
30
00:05:18.460 --> 00:05:25.480
Yes, an LLM can write you an input, but an input is an input is an input, and they just don't get that different.
31
00:05:25.540 --> 00:05:35.360
If you've listened to my content, you know that I feel really strongly that design system teams building a whole bunch of custom components is often, I'm just gonna say it, kind of a waste of time.
32
00:05:35.760 --> 00:05:48.260
There are so many existing libraries out there. There are so many existing tools out there. There's existing inputs out there, probably in your own code base to start from. And we historically, design system teams, have
33
00:05:49.700 --> 00:06:11.192
really spent a ton of time just, like, getting way in the weeds about how to build the perfect input, and I'm not gonna beat that dead horse anymore, butI don't feel like we're building enough basic atomic level components for LLM build me an input to really be a core use case for AI and design systems.
34
00:06:12.022 --> 00:06:23.432
Do I think if you gave a really good requirements doc to an LLM, could it generate a really good input for you? Sure. Not disputing that. Just not sure that this is a core need.
35
00:06:23.592 --> 00:06:33.812
For most of us, we're doing a whole lot of other things, and the other stuff that we do as a design system practitioner is far more valuable to our organization than building the button, building the input.
36
00:06:34.952 --> 00:06:41.612
The second thing is documentation. Now, I feel really strongly that this is actually a terrible use case for LLMs.
37
00:06:42.412 --> 00:07:02.092
A significant portion of the human written documentation for design system components is actually more about the technical implementation, and humans may still need some of that information, but the engineers often can read it from the code, but more importantly, the LLMs can read it from the code.
38
00:07:02.612 --> 00:07:15.912
So in some new world where we're having a lot of LLM generated output by our engineers, they can interact directly with the LLM, and so they can say, "What are the properties? What are the variants? What are the options?
39
00:07:16.492 --> 00:07:19.432
Hey, use this component and fill in the data."
40
00:07:19.772 --> 00:07:33.772
A lot of the documentation that we write explaining the technical implementation can be automatically generated, but I'm not even sure it's necessary to automatically generate it anymore because it's already computer code that the computers can already read.
41
00:07:35.302 --> 00:07:39.412
The other stuff that we write is the how and the why.
42
00:07:40.192 --> 00:07:54.052
When you ask an LLM to write documentation for, say, your input, it's gonna write a bunch of stuff that sounds like the worst design doc system documentation that you've ever read, like an input is an element that a user can type into.
43
00:07:55.192 --> 00:08:08.022
Is that actually the documentation your team needs? Probably not. The documentation that your team actually needs is, when do I use this? Why do I use it? What is the design language around this?
44
00:08:08.072 --> 00:08:15.712
Are there certain icons I can use with it? What other interaction patterns does this go with? An LLM is not going to have that information.
45
00:08:16.892 --> 00:08:25.852
I've got a lot more to say on this topic around how we give our AI tools the context of our design language, but we'll get into that another time.
46
00:08:25.932 --> 00:08:41.292
Since spring, I'm starting to hear a lot more really interesting use cases for how AI can actually integrate into our system teams process and product teams. I feel like the attitude has really shifted.
47
00:08:41.352 --> 00:08:48.252
We're not seeing quite as much of the doom and gloom, it's gonna replace all our jobs kind of attitude.
48
00:08:48.992 --> 00:09:00.832
At this point, I think it's pretty clear that companies who are doing layoffs and saying it's because of AI are pretty much using that as an excuse to reduce headcount for whatever other business reasons.
49
00:09:01.432 --> 00:09:16.572
I'm not seeing the absolutely dramatic ROI claims come true, right? Like, oh, it'll make you 30% more effective. I'm not seeing an AI agent that is just like a whole nother engineer or especially another designer.
50
00:09:17.292 --> 00:09:29.132
What I am seeing is ways that these tools can help us break down silos, do more collaboration, learn and grow, and shift the boundaries of roles in ways that I think are really interesting.
51
00:09:30.112 --> 00:09:41.072
I've used it for writing storybook stories. I've seen a lot of people use it for writing tests, and you have to be careful here because the output, of course, can really vary.
52
00:09:41.632 --> 00:09:57.352
LLMs really like to mock fake stuff in tests and not really test things, but it can be a really nice head start. I'm seeing a lot of interesting work around prototyping, which I'm excited to talk about more.
53
00:09:57.372 --> 00:10:10.592
Prototyping can mean a whole bunch of things, right? It can mean generating some flows to build alignment with your PM, your designer, your engineer, or just to show what something might look or feel like.
54
00:10:11.332 --> 00:10:20.352
Prototyping could mean building or iterating on a component, a new component, an existing component, or even a non-design system component, right?
55
00:10:20.392 --> 00:10:24.862
Like, using design system components to make some kind of interaction pattern.
56
00:10:26.952 --> 00:10:40.682
I am seeing a ton of good uses around code refactors and migrations, writing automated migration scripts, or actually having the LLM do or support code refactors.
57
00:10:41.152 --> 00:10:46.702
This is a really, really nice way to help your teams actually upgrade the version of the design system they're on.
58
00:10:47.492 --> 00:10:57.752
I'm seeing designers have learning opportunities to understand code better, explore interactivity, to explore routing, flows, animations.
59
00:10:57.792 --> 00:11:04.092
Even if the outputs aren't production ready, just really speeding up early collaboration and, like, we love a learning moment, right?
60
00:11:04.132 --> 00:11:12.212
We love to get in there and actually have a better understanding of what the output in code of the thing that we're building or designing might be.
61
00:11:13.452 --> 00:11:24.512
And I think the most exciting use cases are the ones that are still to come. How do we design in the browser? How do we design and edit on existing product? How do we get designers in production?
62
00:11:25.172 --> 00:11:41.932
How do we have a Figma-like UI experience in real production code? I-- Here's your spicy take of the show. I am really baffled by the focus in the design system space on generating code out of Figma.
63
00:11:42.852 --> 00:11:55.732
It's still a majorly hot topic, and I'm just not convinced that's the right way to go about things. I'm seeing a lot of token pipeline AI tools, things like that, which very cool and can be a really powerful tool.
64
00:11:56.592 --> 00:12:10.812
But generating the code out of Figma mocks is funny to me because we already have all of the code components, and it's just not really possible to have 100% one-to-one parity between Figma and code.
65
00:12:11.292 --> 00:12:30.140
There's always gonna be in code more options, more variations, more props, ways to deal with data that's coming in.That you just can't replicate in Figma, and there's gonna be CSS styling layout things that Figma just can't really do because it's a vector program and not a browser.
66
00:12:30.730 --> 00:12:39.300
Shout out to Penpot, who I know is working really hard on this problem, but I'm of the opinion that we should be letting designers build and design
67
00:12:40.560 --> 00:12:52.280
with the production code components and all of the variations and flexibility that entails, rather than being in Figma where we have to recreate a lot of things, and the output is not gonna be exactly realistic.
68
00:12:53.120 --> 00:13:06.490
There's definitely still a place for Figma. I am not anti-Figma. But I would really love to see a workflow that looks more like the following, starting with sketches and flow charts,
69
00:13:07.420 --> 00:13:21.760
taking that into an interactive prototype tool, getting something that is 60 to 70% of the way there. The flow is there. Maybe all the details aren't exactly there, but the concept is there.
70
00:13:21.820 --> 00:13:36.640
Or even just having a wireframe in Figma that is tagged somehow with which component it should be, and then you can put that into an LLM or a tool and actually have it apply the components on top.
71
00:13:38.000 --> 00:13:41.680
And then the place where Figma is still really valuable is when you're doing visual design.
72
00:13:42.120 --> 00:13:55.500
But when you're really thinking about the visuals, the feel of something, you actually do need to be able to go in to build hi-fi mocks. LLMs so far are not very good at that. They're not really good at design.
73
00:13:55.520 --> 00:13:57.420
They're not really good at understanding design language.
74
00:13:57.460 --> 00:14:09.320
Like, yes, they can output a UI, but when we think about really good design, when we think about apps and projects that are interesting or beautiful or just work really well, that's the product of a lot of design thinking.
75
00:14:09.560 --> 00:14:14.520
So we talk a lot in the design system space about does the design system stifle creativity?
76
00:14:15.240 --> 00:14:22.710
When you're building UI that fits in with things that you've already built, you're building another form, you have these design concepts already,
77
00:14:24.020 --> 00:14:37.380
you don't necessarily need to be doing super hi-fi designs because you know this is a text field, this is a select field, we want this amount of spacing between them, we always do primary and a secondary button, and you should be able to layer the system over that.
78
00:14:38.040 --> 00:14:44.820
We've been really lucky at Color to be an early customer of Dessin. That's D-E-S-S-I-N, dessin.ai.
79
00:14:45.040 --> 00:14:58.840
Their team is working on a LLM-based tool that actually uses your design system and allows designers to build prototypes, build and edit components, and actually work directly in the code.
80
00:14:59.430 --> 00:15:03.810
There's just inklings and glimmerings of this future really coming to pass.
81
00:15:04.280 --> 00:15:17.700
I am firmly in the camp of having designers be working with the real production design system, the real code components, rather than trying to generate code out of Figma. So we'll see how this plays out.
82
00:15:17.720 --> 00:15:28.600
At the beginning of this podcast, in the trailer, I said design systems work is due for a major reinvention moment, and I wanna talk about it. I think we are in the middle of that reinvention.
83
00:15:28.620 --> 00:15:51.660
Things are really, really having to change, and I'm so excited to continue to explore what that is gonna look like in the future, to talk with all of you and bring to you the ways that people are changing their design system processes, the ways that they are working with new tools, the things that haven't changed, and how we figure it out in the future.
84
00:15:52.500 --> 00:16:06.380
Now for some design system industry and conference news. The Zeroheight Design System Awards are back this year. I'm so excited that the On Theme podcast was shortlisted for the best podcast category.
85
00:16:06.500 --> 00:16:08.120
I also have the pleasure of being a judge.
86
00:16:08.140 --> 00:16:25.700
Obviously, I don't get to judge the podcast category, but really excited to see all of the incredible teams, case studies, documentation sites, articles, events, community builders, everybody who got nominated for that shortlist, just so excited about all of your work.
87
00:16:26.120 --> 00:16:34.220
Really can't wait to dive into all of these nominations and, of course, see who the community is voting for. But of course, I have to plug myself.
88
00:16:34.380 --> 00:16:49.560
If you liked the On Theme podcast, if you listened to it this year, if you were one of my 7,500 downloads this year, wow, please go to awards.zerohight.com and vote for me, would really, really appreciate it.
89
00:16:51.160 --> 00:17:01.860
Second, I'm gonna be speaking at Zeroheight's Converge conference in Bristol, UK, in about a month. It's October 30th. It is not too late to get a ticket. You can go to converge.zerohight.com.
90
00:17:02.520 --> 00:17:08.780
If you are in Europe or, like me, if you would like a little UK vacation, go get your ticket. I would love to see you there.
91
00:17:09.440 --> 00:17:20.060
We're gonna have some amazing speakers, Annie Bell, John Voss, Donnie D'Amato, a couple past podcast guests, Natalia Shelburne, Guy Segal, and just the whole lineup looks incredible.
92
00:17:20.070 --> 00:17:32.380
All of the topics are gonna be around the future of design systems, AI tools, how things are changing, how we use and approach the tools that we have, and of course, the classic how do we talk about and sell the value of design systems.
93
00:17:32.960 --> 00:17:48.860
Also really excited because Gab and Nim at Dessin are also gonna be there, so if you want to get a demo of Dessin, check it out, talk to them, see how they're thinking about prototyping and giving designers access to design in the code.
94
00:17:49.340 --> 00:18:04.220
You do not wanna miss that. We may also be having a special little event for people who are interested in Dessin, so if you are gonna be there, please send me a DM ASAP so we can get that on the calendar.
95
00:18:05.500 --> 00:18:17.420
And last but certainly not least, we have Camp Clarity. I cannot believe it has been 10 years of Clarity Conf, and I cannot wait to see what Jina has up her sleeve for us this year.
96
00:18:17.430 --> 00:18:30.840
It's gonna be December 2 through 4 at the Ace Hotel in Palm Springs. We are gonna get a little, like, winter desert sunshine camp vibes. Just so excited for this really interesting format.
97
00:18:30.880 --> 00:18:39.930
I think we're gonna have time to hang out and play and experiment and workshop and just generally be together, go outside, and not just sit in a room and listen to talks.
98
00:18:40.260 --> 00:18:44.420
I get, I think, within an hour of the email going out. Please go get yours.
99
00:18:44.580 --> 00:18:56.960
I know it feels like everything is coming up so fast this fall, but I am so stoked for all of these events and so excited to see some old faces and make some new friends. So let me know if you're gonna be there.
100
00:18:57.000 --> 00:19:05.990
Go get your ticket and come and say hi when you are there. And if I don't see you there, don't worry, you know that I will be talking about it here on the On Theme podcast.
101
00:19:06.460 --> 00:19:19.160
As always, thank you so much for listening, for your support, for your comments. Really excited to dive into season two with you. Stay tuned for more minisodes, and I will see you on the internet.
102
00:19:19.580 --> 00:19:26.920
[mouse clicking]
