บทถอดความฉบับเต็มของ Token Thinking w/ Garth Braithwaite| Wireframe Live

ahead and give it a shot. Uh so let's 00:04:14.159 --> 00:04:17.430 say me too, right? And luckily, if you 00:04:17.440 --> 00:04:20.069 don't know about my system out here, uh 00:04:20.079 --> 00:04:22.469 I'm don't use my computer to stream. I 00:04:22.479 --> 00:04:25.670 just go ahead and uh use my my box to 00:04:25.680 --> 00:04:27.590 stream out here. So, let's see. I just 00:04:27.600 --> 00:04:30.550 need I need I need Oops. How do I 00:04:30.560 --> 00:04:34.550 restart? Let's see. Restart. 00:04:34.560 --> 00:04:36.469 Restart. 00:04:36.479 --> 00:04:39.030 Where are my options? 00:04:39.040 --> 00:04:45.030 Really? Okay. Go to start. Is it here? 00:04:45.040 --> 00:04:46.870 There it is. Right. Power. Here we go. 00:04:46.880 --> 00:04:50.070 Okay. I don't I don't use the computer 00:04:50.080 --> 00:04:53.110 behind me very often. So, we're going to 00:04:53.120 --> 00:04:55.590 uh we're going to give this a shot and 00:04:55.600 --> 00:04:57.830 then I'll I'll restart. But anyway, um 00:04:57.840 --> 00:04:59.030 yeah, those are some of the events that 00:04:59.040 --> 00:05:01.189 are happening in October. Uh so, in the 00:05:01.199 --> 00:05:02.950 event that you folks are interested in 00:05:02.960 --> 00:05:04.150 events that are going on in New York 00:05:04.160 --> 00:05:06.230 City, uh you can check out those things. 00:05:06.240 --> 00:05:07.830 Uh I do post them in the Discord. So, 00:05:07.840 --> 00:05:09.830 the discord.d ds.house in the event that 00:05:09.840 --> 00:05:12.150 you want to be a part a part of that 00:05:12.160 --> 00:05:17.110 sort of thing. Um that could be fun. Uh 00:05:17.120 --> 00:05:18.950 I post links about things that are going 00:05:18.960 --> 00:05:22.310 on uh in in around the you know the 00:05:22.320 --> 00:05:25.350 internet. Um so there's also the 00:05:25.360 --> 00:05:28.070 newsletter uh which is at news.ds.house. 00:05:28.080 --> 00:05:30.710 Uh I did post it kind of late yesterday 00:05:30.720 --> 00:05:32.390 uh with a couple of links and undefined 00:05:32.400 --> 00:05:33.990 is also in there. The wireframe episodes 00:05:34.000 --> 00:05:35.990 that we had last week are also in there. 00:05:36.000 --> 00:05:39.990 Um detecting device. Okay. Um, 00:05:40.000 --> 00:05:42.070 and uh, let's see what else what else is 00:05:42.080 --> 00:05:44.390 going on. Uh, I have a couple of side 00:05:44.400 --> 00:05:45.990 projects that I'm trying to wrap up. Uh, 00:05:46.000 --> 00:05:48.150 one's a really big topography project 00:05:48.160 --> 00:05:51.029 that's uh, happening uh, that uh, we're 00:05:51.039 --> 00:05:52.870 going to get to at some point. We're 00:05:52.880 --> 00:05:54.310 going to I'm going to release uh, 00:05:54.320 --> 00:05:56.870 shortly. Uh, let's see here. We're going 00:05:56.880 --> 00:06:00.790 to skip this later. 00:06:00.800 --> 00:06:02.710 Okay. 00:06:02.720 --> 00:06:03.990 All right. Apparently, we're updating 00:06:04.000 --> 00:06:09.670 Steam for some reason. Cancel. 00:06:09.680 --> 00:06:12.629 Okay, very good. And then we're going to 00:06:12.639 --> 00:06:14.230 go to the internet here and we're going 00:06:14.240 --> 00:06:20.710 to connect and see if we can get back 00:06:20.720 --> 00:06:29.590 to where we need to be. 00:06:29.600 --> 00:06:31.029 Thank you for your patience, everyone. I 00:06:31.039 --> 00:06:34.629 know you're you're you're excited to 00:06:34.639 --> 00:06:36.870 uh to get into what's going on today. 00:06:36.880 --> 00:06:37.990 We're going to join now. Let's see what 00:06:38.000 --> 00:06:40.070 we got here. 00:06:40.080 --> 00:06:46.550 Uhhuh. 00:06:46.560 --> 00:06:50.550 Okay, I think we have him. 00:06:50.560 --> 00:06:52.309 Hey, G. 00:06:52.319 --> 00:06:55.909 >> We did it. [laughter] 00:06:55.919 --> 00:06:57.189 We did it. All right, I'm just hitting 00:06:57.199 --> 00:06:59.830 some buttons over here. Uh, how are you 00:06:59.840 --> 00:07:01.029 doing? 00:07:01.039 --> 00:07:02.230 >> I'm doing all right. 00:07:02.240 --> 00:07:03.909 >> Okay, good. I'm glad we could make this 00:07:03.919 --> 00:07:06.070 happen. I don't know why our computers 00:07:06.080 --> 00:07:07.990 decided that they didn't want to didn't 00:07:08.000 --> 00:07:10.629 want us to talk today, [snorts] but uh 00:07:10.639 --> 00:07:13.029 we we we pushed through. All we needed 00:07:13.039 --> 00:07:14.870 is a couple of very uh aggressive 00:07:14.880 --> 00:07:16.230 restarts, I guess, on our machines and 00:07:16.240 --> 00:07:18.469 we made it happen. [snorts] 00:07:18.479 --> 00:07:19.749 >> Yeah. 00:07:19.759 --> 00:07:21.670 >> Uh so we're live now. 00:07:21.680 --> 00:07:22.629 >> Um Oh, good. 00:07:22.639 --> 00:07:24.790 >> Because uh you know, I'm I'm also very 00:07:24.800 --> 00:07:27.110 uh specific on exactly when uh I start 00:07:27.120 --> 00:07:29.749 these things. So, uh, you know, let the 00:07:29.759 --> 00:07:31.430 folks know who you are and and what 00:07:31.440 --> 00:07:32.550 you're all about. We'll start from 00:07:32.560 --> 00:07:34.070 there, I guess. 00:07:34.080 --> 00:07:36.710 >> Yeah. So, um, my name is G. 00:07:36.720 --> 00:07:39.589 Braithweight. Um, I'm a design system 00:07:39.599 --> 00:07:43.270 engineer at Adobe. Um, I work on 00:07:43.280 --> 00:07:46.230 Spectrum, Adobe's design system. Uh, you 00:07:46.240 --> 00:07:49.270 just had Nate on recently, Nate Baldwin, 00:07:49.280 --> 00:07:50.950 and he's a co-orker of mine. We work 00:07:50.960 --> 00:07:52.950 pretty closely. He is more on the design 00:07:52.960 --> 00:07:55.430 side. I'm more on the engineering side. 00:07:55.440 --> 00:07:58.230 Um, but we both have a lot of overlap 00:07:58.240 --> 00:08:00.869 with the stuff we do. So, uh, yeah. What 00:08:00.879 --> 00:08:01.909 else do you want to know? 00:08:01.919 --> 00:08:03.749 >> I want to know it all, G. Whatever 00:08:03.759 --> 00:08:05.189 you're able to share with me, I want to 00:08:05.199 --> 00:08:06.309 know it

all. [laughter] 00:08:06.319 --> 00:08:08.150 >> I've got a cat right here who's napping 00:08:08.160 --> 00:08:09.350 whose name is Harold. 00:08:09.360 --> 00:08:11.270 >> Oh, hi Harold. Thank you for joining the 00:08:11.280 --> 00:08:11.589 show. 00:08:11.599 --> 00:08:12.150 >> Cut off. 00:08:12.160 --> 00:08:15.189 >> Yeah, absolutely. Um yeah, I mean so 00:08:15.199 --> 00:08:17.270 talking with Nate uh the other week uh 00:08:17.280 --> 00:08:18.950 he you know we kind of had a nice little 00:08:18.960 --> 00:08:21.830 uh you know segue into the show today um 00:08:21.840 --> 00:08:23.110 about you know getting into the 00:08:23.120 --> 00:08:25.350 technical stuff about the work that's 00:08:25.360 --> 00:08:28.150 happening to kind of make tokens more 00:08:28.160 --> 00:08:32.310 manageable and as you know because we've 00:08:32.320 --> 00:08:33.909 spoke a few years ago about the amount 00:08:33.919 --> 00:08:35.670 of tokens you've had and and Nate and I 00:08:35.680 --> 00:08:36.790 have talked about it on the side as 00:08:36.800 --> 00:08:41.110 well. Adobe um traditionally has had 00:08:41.120 --> 00:08:43.829 lots maybe even too many [laughter] 00:08:43.839 --> 00:08:47.750 design tokens. So I'm very curious about 00:08:47.760 --> 00:08:50.630 uh what's going into the work to try to 00:08:50.640 --> 00:08:52.790 make that more manageable is really what 00:08:52.800 --> 00:08:54.389 I want to start with. 00:08:54.399 --> 00:08:57.350 >> Yeah. Um thinking about like when we 00:08:57.360 --> 00:08:59.269 talked last the the big changes that 00:08:59.279 --> 00:09:01.110 have happened since then is I mean AI is 00:09:01.120 --> 00:09:01.750 a thing. 00:09:01.760 --> 00:09:05.350 >> Yeah. Um and that has has changed quite 00:09:05.360 --> 00:09:07.430 a bit of of the way that we're 00:09:07.440 --> 00:09:10.949 approaching um the design data. So um 00:09:10.959 --> 00:09:14.790 spectrum design data is uh a mono repo 00:09:14.800 --> 00:09:16.310 uh that is public and open source. So I 00:09:16.320 --> 00:09:17.990 can talk about everything um and anybody 00:09:18.000 --> 00:09:19.509 can go and play around with and look at 00:09:19.519 --> 00:09:23.430 it. Um but uh the spectrum tokens are an 00:09:23.440 --> 00:09:25.110 npm package that are published out of 00:09:25.120 --> 00:09:27.750 there. Um they're pretty close to the 00:09:27.760 --> 00:09:31.670 the W3C um token spec format. uh there's 00:09:31.680 --> 00:09:34.389 a little bit of difference um but we 00:09:34.399 --> 00:09:37.269 just added support to export um that 00:09:37.279 --> 00:09:39.430 that format as well if anybody wants to 00:09:39.440 --> 00:09:43.030 use that specific format um but design 00:09:43.040 --> 00:09:47.269 data uh sits a level above that. So um 00:09:47.279 --> 00:09:49.350 trying to structure the data that we 00:09:49.360 --> 00:09:51.829 have and point out things um 00:09:51.839 --> 00:09:53.590 inconsistencies 00:09:53.600 --> 00:09:56.070 um naming convention inconsistencies or 00:09:56.080 --> 00:09:59.829 typos or problems um as well as uh 00:09:59.839 --> 00:10:02.630 opening the the data and the structure 00:10:02.640 --> 00:10:05.269 up to something that humans and AI can 00:10:05.279 --> 00:10:06.790 understand better. 00:10:06.800 --> 00:10:07.269 >> Okay. 00:10:07.279 --> 00:10:08.550 >> So 00:10:08.560 --> 00:10:11.190 >> yeah. Um, so let's talk about the humans 00:10:11.200 --> 00:10:12.710 and AI can understand better because I 00:10:12.720 --> 00:10:15.030 I've had a couple of people I'll say 00:10:15.040 --> 00:10:19.269 like PJ Onori for example on the show 00:10:19.279 --> 00:10:21.670 talking about what a a design system 00:10:21.680 --> 00:10:24.389 documentation spec looks like uh and I 00:10:24.399 --> 00:10:26.150 was actually just speaking um you know 00:10:26.160 --> 00:10:28.310 uh about the the workshop that I was 00:10:28.320 --> 00:10:30.630 with with NAPSAC just yesterday and we 00:10:30.640 --> 00:10:33.030 were also talking about this idea of 00:10:33.040 --> 00:10:35.670 specifications and and data and design 00:10:35.680 --> 00:10:38.069 and you know there is there is this kind 00:10:38.079 --> 00:10:39.590 of 00:10:39.600 --> 00:10:41.910 conversation I guess that we I don't 00:10:41.920 --> 00:10:43.750 know if anyone's really landed on about 00:10:43.760 --> 00:10:46.069 you know who's the data for right 00:10:46.079 --> 00:10:47.430 there's there's you know obviously 00:10:47.440 --> 00:10:49.670 before AI it was all for largely for 00:10:49.680 --> 00:10:52.710 humans now that AI is in here now we're 00:10:52.720 --> 00:10:55.509 thinking about how is the data just for 00:10:55.519 --> 00:10:58.150 AI is it also for humans how are you 00:10:58.160 --> 00:11:00.389 balancing you know between those two 00:11:00.399 --> 00:11:01.990 things so so what are you thinking on 00:11:02.000 --> 00:11:03.430 your side 00:11:03.440 --> 00:11:07.910 >> yeah so um it it it is for humans still 00:11:07.920 --> 00:11:11.829 um but a AI is enabling it to be for uh 00:11:11.839 --> 00:11:14.069 more humans in more cases. Uh we don't 00:11:14.079 --> 00:11:15.670 have to build the specific tooling or 00:11:15.680 --> 00:11:18.870 the specific view or any um any specific 00:11:18.880 --> 00:11:23.110 thing for individual types of users. Um 00:11:23.120 --> 00:11:26.310 for example, we have a a program manager 00:11:26.320 --> 00:11:30.310 um and she has our AI tools tied into um 00:11:30.320 --> 00:11:34.069 her AI product. So um she mostly uses 00:11:34.079 --> 00:11:35.829 the desktop applications for the AI 00:11:35.839 --> 00:11:38.150 products. um she'll she's comfortable 00:11:38.160 --> 00:11:39.990 using the CLI if she needs to, but for 00:11:40.000 --> 00:11:42.710 the most part she doesn't. Um but she's 00:11:42.720 --> 00:11:45.990 able to ask questions and query uh her 00:11:46.000 --> 00:11:48.949 LLM, her AI through um this desktop 00:11:48.959 -->

00:11:51.190 application and using the AI tools, it 00:11:51.200 --> 00:11:53.509 can give her a lot of insight into 00:11:53.519 --> 00:11:56.069 what's in the design data. Um if we 00:11:56.079 --> 00:11:58.230 wanted to build a specific view or tools 00:11:58.240 --> 00:12:00.310 for her to be able to do that previous 00:12:00.320 --> 00:12:02.470 to AI, that would have been really hard. 00:12:02.480 --> 00:12:03.590 um because it would have been hard for 00:12:03.600 --> 00:12:05.350 her to even put into words what she was 00:12:05.360 --> 00:12:07.110 really actually looking for. 00:12:07.120 --> 00:12:08.790 >> Um and then it's gotten to the point 00:12:08.800 --> 00:12:10.710 where uh she actually made a pull 00:12:10.720 --> 00:12:12.550 request recently to do a snapshot 00:12:12.560 --> 00:12:14.629 release of a version of the design data. 00:12:14.639 --> 00:12:16.550 We were we were considering tweaking 00:12:16.560 --> 00:12:19.590 something. Um and then the design tokens 00:12:19.600 --> 00:12:22.629 that we have um are used by multiple 00:12:22.639 --> 00:12:25.750 platforms. So at Adobe on Spectrum um 00:12:25.760 --> 00:12:28.629 we've got uh web desktop mobile um and 00:12:28.639 --> 00:12:30.949 even within web we have react spectrum 00:12:30.959 --> 00:12:32.550 and spectrum web components which are 00:12:32.560 --> 00:12:34.629 also both public and open source so 00:12:34.639 --> 00:12:37.190 people can play with those. Um but she 00:12:37.200 --> 00:12:38.949 wanted to see what some of these changes 00:12:38.959 --> 00:12:42.069 would look like not just in Figma uh but 00:12:42.079 --> 00:12:46.150 live in the web view and working with um 00:12:46.160 --> 00:12:47.670 the engineers on the spectrum web 00:12:47.680 --> 00:12:51.030 components they created a um release 00:12:51.040 --> 00:12:53.190 from our snapshot build. Okay, so she 00:12:53.200 --> 00:12:54.470 made a pull request. 00:12:54.480 --> 00:12:57.269 >> I made a snapshot release of Spectrum 00:12:57.279 --> 00:12:59.590 tokens. Uh, Spectrum Web Components 00:12:59.600 --> 00:13:02.069 brought that in and made a version of 00:13:02.079 --> 00:13:03.750 Storybook that she could play with all 00:13:03.760 --> 00:13:06.310 within I don't know less than a couple 00:13:06.320 --> 00:13:07.910 hours at most. And that was with like 00:13:07.920 --> 00:13:09.509 communication delays. 00:13:09.519 --> 00:13:12.389 >> Um, so like that's something that would 00:13:12.399 --> 00:13:14.870 have been a lot different to do. 00:13:14.880 --> 00:13:16.470 >> And I didn't even need to know why 00:13:16.480 --> 00:13:19.350 exactly she was doing things. Um, like I 00:13:19.360 --> 00:13:21.430 I very much trusted what her motivation 00:13:21.440 --> 00:13:23.110 was and the working relationship that we 00:13:23.120 --> 00:13:24.470 have and that we have with Spectrum Web 00:13:24.480 --> 00:13:27.110 Components. Um, but like I didn't need 00:13:27.120 --> 00:13:29.910 to be precious

about my time with it and 00:13:29.920 --> 00:13:31.990 she was able to investigate and dig into 00:13:32.000 --> 00:13:35.509 things. So yeah, we we need to talk 00:13:35.519 --> 00:13:38.230 about specs because um I I' I've got 00:13:38.240 --> 00:13:41.350 opinions on that sort of stuff. Um, but 00:13:41.360 --> 00:13:43.670 as far as like how AI is working with 00:13:43.680 --> 00:13:47.590 stuff, it is changing the way, 00:13:47.600 --> 00:13:49.030 it's funny, every time I think like this 00:13:49.040 --> 00:13:51.030 will make it easier for AI to use it, 00:13:51.040 --> 00:13:52.310 >> it's always something I'm like, I 00:13:52.320 --> 00:13:53.430 probably should have done that for the 00:13:53.440 --> 00:13:56.230 humans, too. Like we have a glossery or 00:13:56.240 --> 00:13:57.750 a registry where we're just defined 00:13:57.760 --> 00:13:59.590 terms that we use in our design data. 00:13:59.600 --> 00:14:03.030 So, um, a primary or a call to action 00:14:03.040 --> 00:14:05.990 button. Um, yeah, it's nice for AI to be 00:14:06.000 --> 00:14:07.350 able to know what that means inside of 00:14:07.360 --> 00:14:09.269 the the the structure of our system. 00:14:09.279 --> 00:14:09.590 Yeah, 00:14:09.600 --> 00:14:10.870 >> but it would have been good for humans 00:14:10.880 --> 00:14:12.949 to know too. 00:14:12.959 --> 00:14:14.790 >> So yeah, every time I'm like, ah, this 00:14:14.800 --> 00:14:17.509 is just for AI. The structure primarily 00:14:17.519 --> 00:14:19.030 for AI the way that we have it 00:14:19.040 --> 00:14:19.910 structured. 00:14:19.920 --> 00:14:22.949 >> Um, but still it's it's much easier to 00:14:22.959 --> 00:14:25.430 build tools for humans on top of this 00:14:25.440 --> 00:14:27.590 structure than it was uh to just have 00:14:27.600 --> 00:14:30.069 our our name value strings that we had 00:14:30.079 --> 00:14:32.069 previously. So 00:14:32.079 --> 00:14:35.430 >> yeah. Yeah. Uh, a lot in there. Uh I 00:14:35.440 --> 00:14:37.990 will say in terms of you know my 00:14:38.000 --> 00:14:40.470 thinking when it cames to the data for 00:14:40.480 --> 00:14:43.110 humans and AI and I was talking with PJ 00:14:43.120 --> 00:14:44.470 as kind of like a you know off-the- cuff 00:14:44.480 --> 00:14:46.470 situation was you know one of the things 00:14:46.480 --> 00:14:48.870 that I was uh or I guess he was noticing 00:14:48.880 --> 00:14:51.189 is like you know the the the AI needs a 00:14:51.199 --> 00:14:53.189 lot more context. So it's like okay you 00:14:53.199 --> 00:14:54.790 know sometimes the designer already 00:14:54.800 --> 00:14:56.550 knows about you know certain rules that 00:14:56.560 --> 00:14:58.150 are happening in the system from from 00:14:58.160 --> 00:15:00.230 their experience and the AI may maybe 00:15:00.240 --> 00:15:02.389 doesn't necessarily know that right? So 00:15:02.399 --> 00:15:04.550 you find yourself having to add a lot 00:15:04.560 --> 00:15:08.470 more context to the AI documentation at 00:15:08.480 --> 00:15:11.910 least in in some some folks um um you 00:15:11.920 --> 00:15:14.949 know practices. But in my view, I always 00:15:14.959 --> 00:15:17.590 was like, that sounds like footnotes to 00:15:17.600 --> 00:15:19.829 me. And I feel like those footnotes 00:15:19.839 --> 00:15:21.670 would be really helpful just for anyone, 00:15:21.680 --> 00:15:23.269 just exactly like you're saying. Yeah. 00:15:23.279 --> 00:15:26.230 >> Like why if if I can understand why it 00:15:26.240 --> 00:15:29.110 might be distracting in normal pros, 00:15:29.120 --> 00:15:30.629 right, the normal documentation that's 00:15:30.639 --> 00:15:32.710 just able to, you know, 00:15:32.720 --> 00:15:34.870 >> kind of unblock you very quickly. But 00:15:34.880 --> 00:15:36.389 for a person who really wants to get 00:15:36.399 --> 00:15:38.150 into the nitty-gritty of about okay well 00:15:38.160 --> 00:15:41.269 what why does this decision this way or 00:15:41.279 --> 00:15:43.189 you know why does this happen in this in 00:15:43.199 --> 00:15:44.629 this manner and we can get some history 00:15:44.639 --> 00:15:46.470 in there you can 00:15:46.480 --> 00:15:48.629 >> put that in a footnote and then anybody 00:15:48.639 --> 00:15:50.870 who's interested AI or human 00:15:50.880 --> 00:15:53.030 >> can go follow the footnote and and go in 00:15:53.040 --> 00:15:54.790 that direction and and and have a good 00:15:54.800 --> 00:15:57.749 time so I always I always you know also 00:15:57.759 --> 00:15:59.670 thought that like there really shouldn't 00:15:59.680 --> 00:16:01.269 be any difference between what we 00:16:01.279 --> 00:16:04.150 provide to the humans and AI except for 00:16:04.160 --> 00:16:06.230 Maybe again that structured data part 00:16:06.240 --> 00:16:08.389 which can be really overwhelming for the 00:16:08.399 --> 00:16:09.749 humans of course. 00:16:09.759 --> 00:16:10.470 >> Yeah. Yeah. 00:16:10.480 --> 00:16:10.870 >> Yeah. 00:16:10.880 --> 00:16:12.949 >> So the the main interface that we have 00:16:12.959 --> 00:16:17.189 for for AI um anyway to that point I 00:16:17.199 --> 00:16:18.389 would say that it feels like just 00:16:18.399 --> 00:16:19.990 another level of accessibility. 00:16:20.000 --> 00:16:20.230 >> Sure. 00:16:20.240 --> 00:16:21.110 >> Right. Like 00:16:21.120 --> 00:16:23.829 >> alt text again nothing that most humans 00:16:23.839 --> 00:16:26.069 ever interact with um when it comes to 00:16:26.079 --> 00:16:27.670 images but when you need it you really 00:16:27.680 --> 00:16:29.749 need it. And the same thing for for AI. 00:16:29.759 --> 00:16:31.910 A lot of these things they're just 00:16:31.920 --> 00:16:35.030 additional context. Um, but what we ran 00:16:35.040 --> 00:16:39.749 into is if we try to load I mean 00:16:39.759 --> 00:16:42.150 one of the iterations of Spectrum in the 00:16:42.160 --> 00:16:45.350 past did have tokens that 00:16:45.360 --> 00:16:47.110 >> we really we really should dig

into a 00:16:47.120 --> 00:16:49.350 little bit of this but okay um there was 00:16:49.360 --> 00:16:50.870 there was way too much. 00:16:50.880 --> 00:16:51.910 >> Um 00:16:51.920 --> 00:16:55.670 >> and it was um a JSON file that was so 00:16:55.680 --> 00:16:57.990 big that editors had a hard time opening 00:16:58.000 --> 00:16:58.230 them. 00:16:58.240 --> 00:16:58.550 >> Wow. 00:16:58.560 --> 00:17:01.670 >> Like your desktop editor. Um, so 00:17:01.680 --> 00:17:03.670 thinking in terms of of AI in the 00:17:03.680 --> 00:17:05.189 context that you were talking about with 00:17:05.199 --> 00:17:07.510 I'm talking with PJ, which he's doing 00:17:07.520 --> 00:17:09.909 he's doing great work um with with his 00:17:09.919 --> 00:17:11.350 documentation stuff. 00:17:11.360 --> 00:17:14.309 >> Um, but the 00:17:14.319 --> 00:17:16.230 >> the the context with AI, if I tried to 00:17:16.240 --> 00:17:18.710 load all of the information about uh 00:17:18.720 --> 00:17:20.870 spectrum into the context, it would blow 00:17:20.880 --> 00:17:24.150 out the the context capacity. Um, so 00:17:24.160 --> 00:17:26.390 what what we really needed was an 00:17:26.400 --> 00:17:31.430 interface that allowed um the AI to 00:17:31.440 --> 00:17:34.710 query just like a human kind of does and 00:17:34.720 --> 00:17:36.549 follow a trail to what it actually 00:17:36.559 --> 00:17:39.750 needs. Um, and so what we have is is 00:17:39.760 --> 00:17:42.630 we've got the the the AI tools. Um, 00:17:42.640 --> 00:17:44.070 there are two different ones, but really 00:17:44.080 --> 00:17:45.430 they're the same thing. Actually, I 00:17:45.440 --> 00:17:47.029 could argue that there's three or four, 00:17:47.039 --> 00:17:49.750 but they're all the same thing, which is 00:17:49.760 --> 00:17:51.909 um there's a there's an agent skill and 00:17:51.919 --> 00:17:53.990 there's an MCP server. 00:17:54.000 --> 00:17:58.230 >> Um and both of them are released um as 00:17:58.240 --> 00:18:00.310 npm packages just because of ease of 00:18:00.320 --> 00:18:01.190 installation. 00:18:01.200 --> 00:18:01.590 >> Yeah. 00:18:01.600 --> 00:18:04.150 >> Um but what it really is is just a a 00:18:04.160 --> 00:18:06.870 small set of instructions on how the the 00:18:06.880 --> 00:18:09.669 um data is structured and then there is 00:18:09.679 --> 00:18:11.750 an embedded database, but it could have 00:18:11.760 --> 00:18:13.590 just as easily just been JSON data. 00:18:13.600 --> 00:18:16.310 >> Sure. Um, but it's an embedded database 00:18:16.320 --> 00:18:19.350 with an API that allows it to traverse 00:18:19.360 --> 00:18:21.190 the data. So, it can query what it needs 00:18:21.200 --> 00:18:23.350 when it needs it and it doesn't load 00:18:23.360 --> 00:18:25.029 everything into context. And that even 00:18:25.039 --> 00:18:28.150 keeps the um on on MCP there are a lot 00:18:28.160 --> 00:18:29.909 of people who are concerned about um if 00:18:29.919 --> 00:18:32.310 you load in too many MCPS. Mhm. 00:18:32.320 --> 00:18:33.669 >> If you have a if anybody out there 00:18:33.679 --> 00:18:34.630 hasn't played, I don't know how 00:18:34.640 --> 00:18:35.909 technical people are, but if you haven't 00:18:35.919 --> 00:18:38.950 played with MCP, it's it's just a um a 00:18:38.960 --> 00:18:41.110 standard for building tools for 00:18:41.120 --> 00:18:43.110 interacting with with AI or giving it to 00:18:43.120 --> 00:18:46.870 AI to use. Um but the the tool 00:18:46.880 --> 00:18:48.549 footprint, if you have too many MCP 00:18:48.559 --> 00:18:50.950 servers installed on your in your 00:18:50.960 --> 00:18:54.070 context or too many tools on each MCP, 00:18:54.080 --> 00:18:55.510 that can also mess with stuff. So, we 00:18:55.520 --> 00:18:57.110 tried to keep that fairly small, and 00:18:57.120 --> 00:18:59.430 there's some tweaking we can still do. 00:18:59.440 --> 00:19:01.430 Um but really it's it's more here are 00:19:01.440 --> 00:19:03.110 the instructions and here is the 00:19:03.120 --> 00:19:05.270 querying tools and from there you can 00:19:05.280 --> 00:19:06.630 get everything that you need. 00:19:06.640 --> 00:19:07.510 >> Yeah. So 00:19:07.520 --> 00:19:09.590 >> yeah, because yeah, what I've been 00:19:09.600 --> 00:19:11.510 learning certainly is is there's a lot 00:19:11.520 --> 00:19:15.669 to trying to optimize what is put into 00:19:15.679 --> 00:19:18.230 context and you will be surprised about 00:19:18.240 --> 00:19:19.990 what actually ends up in context 00:19:20.000 --> 00:19:23.190 depending on how you end up configuring 00:19:23.200 --> 00:19:25.029 your harness, I guess, is what people 00:19:25.039 --> 00:19:26.310 have been calling this thing, right? Is 00:19:26.320 --> 00:19:28.630 just this, you know, if you if you think 00:19:28.640 --> 00:19:29.750 that you're just connecting a whole 00:19:29.760 --> 00:19:31.830 bunch of MCPS and and and the and the 00:19:31.840 --> 00:19:33.669 agents are just going to use it as they 00:19:33.679 --> 00:19:35.750 need, that's not necessarily the case, 00:19:35.760 --> 00:19:39.750 right? because you you need to be uh 00:19:39.760 --> 00:19:41.190 deliberate in terms of what you're 00:19:41.200 --> 00:19:43.430 you're turning on and turning off in 00:19:43.440 --> 00:19:44.789 some ways because it doesn't sound like 00:19:44.799 --> 00:19:46.870 they're smart enough to know, okay, I'm 00:19:46.880 --> 00:19:49.350 going to use this MCP and then use this 00:19:49.360 --> 00:19:51.590 one part of the MCP cuz it's grabbing 00:19:51.600 --> 00:19:53.270 especially if the MCP isn't well 00:19:53.280 --> 00:19:55.110 designed itself, right? Because then 00:19:55.120 --> 00:19:56.070 you're you're going to get a whole bunch 00:19:56.080 --> 00:19:57.750 of junk in there that you probably don't 00:19:57.760 --> 00:19:59.990 need to. So you have to be very careful 00:20:00.000 --> 00:20:01.350 about what you're putting into those 00:20:01.360 --> 00:20:04.390 those

those systems uh to to really 00:20:04.400 --> 00:20:05.750 reduce the number of tokens that you're 00:20:05.760 --> 00:20:08.150 using. And now of course in this in this 00:20:08.160 --> 00:20:09.750 in this uh you know show we're going to 00:20:09.760 --> 00:20:10.950 be talking about tokens in two different 00:20:10.960 --> 00:20:12.150 ways if you're not going to be confused 00:20:12.160 --> 00:20:15.270 over there listening. Um, but I do want 00:20:15.280 --> 00:20:17.750 to come back a little bit to uh your 00:20:17.760 --> 00:20:21.029 your partner that that had a request 00:20:21.039 --> 00:20:23.270 about the way something would look and 00:20:23.280 --> 00:20:26.870 you made a uh snapshot release of of 00:20:26.880 --> 00:20:29.190 that thing cuz the thing that you 00:20:29.200 --> 00:20:31.590 mentioned in that is I guess 00:20:31.600 --> 00:20:35.190 traditionally you'd have to 00:20:35.200 --> 00:20:39.110 >> weigh the amount of time it would take 00:20:39.120 --> 00:20:41.350 for you to engage in that sort of 00:20:41.360 --> 00:20:44.630 request and see like is this worth the 00:20:44.640 --> 00:20:47.669 the overall time as a as an engineer in 00:20:47.679 --> 00:20:50.399 Adobe I imagine you're pretty expensive 00:20:50.409 --> 00:20:52.789 [laughter] just generally speaking right 00:20:52.799 --> 00:20:55.909 so so you know for to have a request 00:20:55.919 --> 00:20:57.510 that's like that that granted like you 00:20:57.520 --> 00:20:59.590 said you know you trust that that uh 00:20:59.600 --> 00:21:02.310 motivation is valid for the organization 00:21:02.320 --> 00:21:05.270 and the needs but the the question prior 00:21:05.280 --> 00:21:09.750 to that has always been can we put a 00:21:09.760 --> 00:21:13.510 dollar amount to that request Right. And 00:21:13.520 --> 00:21:15.430 now because these requests are 00:21:15.440 --> 00:21:18.070 effectively cheap in quotes, right? 00:21:18.080 --> 00:21:19.990 >> Now we don't we don't we could you know 00:21:20.000 --> 00:21:23.909 kind of get these very uh down kind of 00:21:23.919 --> 00:21:25.909 dirty kind of prototypes or the snapshot 00:21:25.919 --> 00:21:27.669 release I guess is in your particular 00:21:27.679 --> 00:21:29.270 way way better word than dirt dirty 00:21:29.280 --> 00:21:31.990 prototype that I just said. Um but get 00:21:32.000 --> 00:21:33.669 this thing out there so that the person 00:21:33.679 --> 00:21:37.110 can use it. Now, does does that make it 00:21:37.120 --> 00:21:41.430 hard to keep track of states of things 00:21:41.440 --> 00:21:43.669 now that things are are so easy to 00:21:43.679 --> 00:21:45.190 produce? 00:21:45.200 --> 00:21:47.750 >> It it it can. It's interesting. Um, a 00:21:47.760 --> 00:21:49.110 lot of the stuff that that that's 00:21:49.120 --> 00:21:51.830 happening with um the way that AI is 00:21:51.840 --> 00:21:53.909 enabling certain workflows is it's 00:21:53.919 --> 00:21:56.230 really hammering back the importance of 00:21:56.240 --> 00:21:59.909 good um good best practices for 00:21:59.919 --> 00:22:02.630 developer operations, right? DevOps 00:22:02.640 --> 00:22:06.149 >> um or just like good good collaboration 00:22:06.159 --> 00:22:08.310 practices. And what's what's interesting 00:22:08.320 --> 00:22:10.710 is um it's freeing up and enabling a lot 00:22:10.720 --> 00:22:12.390 of people who don't have heavily 00:22:12.400 --> 00:22:15.110 technical um expertise in these areas to 00:22:15.120 --> 00:22:16.470 try things that they might have been 00:22:16.480 --> 00:22:19.110 intimidated by or completely unable to 00:22:19.120 --> 00:22:22.230 do previously. Um but it doesn't give 00:22:22.240 --> 00:22:24.789 them the expertise or the experience to 00:22:24.799 --> 00:22:27.190 know how to name certain things like the 00:22:27.200 --> 00:22:28.630 fact that I I called it a snapshot 00:22:28.640 --> 00:22:30.950 release. it means something significant 00:22:30.960 --> 00:22:33.110 which is we didn't do it on on the main 00:22:33.120 --> 00:22:35.590 branch of the GitHub repo. We created a 00:22:35.600 --> 00:22:38.070 branch. Um we made the changes in there 00:22:38.080 --> 00:22:40.950 and then uh we we created an npm 00:22:40.960 --> 00:22:44.149 package. Um published it from there with 00:22:44.159 --> 00:22:47.909 a specific tag that was um associated 00:22:47.919 --> 00:22:50.549 with it and it didn't interrupt anything 00:22:50.559 --> 00:22:52.950 for anybody else. there there was no if 00:22:52.960 --> 00:22:54.630 at any point we decided that we didn't 00:22:54.640 --> 00:22:57.750 want this work um it was not disruptive 00:22:57.760 --> 00:22:59.909 to just delete that branch delete the 00:22:59.919 --> 00:23:02.630 snapshot release um the npm package we 00:23:02.640 --> 00:23:04.390 could just uh deprecate it and say hey 00:23:04.400 --> 00:23:07.830 this isn't needed anymore um so the 00:23:07.840 --> 00:23:09.190 anytime that we have things that we've 00:23:09.200 --> 00:23:12.630 lost track of what they end up being is 00:23:12.640 --> 00:23:14.310 uh they're just these npm packages that 00:23:14.320 --> 00:23:16.149 I forgot to go in and specifically mark 00:23:16.159 --> 00:23:17.830 as deprecated but nobody's trying to 00:23:17.840 --> 00:23:19.909 install them unless they are 00:23:19.919 --> 00:23:22.149 deliberately going and looking for Yeah. 00:23:22.159 --> 00:23:26.149 So, um it really comes down to it it it 00:23:26.159 --> 00:23:28.710 it highlights the weaknesses that you 00:23:28.720 --> 00:23:30.470 might have in your process. What it 00:23:30.480 --> 00:23:31.830 really does is it makes something else a 00:23:31.840 --> 00:23:33.909 bottleneck. Before it was me who was the 00:23:33.919 --> 00:23:34.950 bottleneck, right? 00:23:34.960 --> 00:23:37.430 >> Now, it's the understanding a specific 00:23:37.440 --> 00:23:38.870 part of the problem that becomes the 00:23:38.880 --> 00:23:40.630 bottleneck. And so, there's always

going 00:23:40.640 --> 00:23:42.789 to be a a bottleneck 00:23:42.799 --> 00:23:45.029 >> uh in any process. But um if you have 00:23:45.039 --> 00:23:48.070 good engineering practices um and good 00:23:48.080 --> 00:23:49.990 design practices like having a a 00:23:50.000 --> 00:23:52.549 wellorganized Figma file means more now 00:23:52.559 --> 00:23:54.390 if you're using the Figma MCP and you're 00:23:54.400 --> 00:23:56.149 trying to get it to look at something 00:23:56.159 --> 00:23:58.149 specific. Well, you got to organize it 00:23:58.159 --> 00:24:00.310 in a way that it knows how to to to view 00:24:00.320 --> 00:24:01.029 those things. 00:24:01.039 --> 00:24:01.430 >> Yeah. 00:24:01.440 --> 00:24:03.830 >> Um but what I worry about, and this is 00:24:03.840 --> 00:24:05.750 this is G, right? Not representing Adobe 00:24:05.760 --> 00:24:08.149 or anybody else in this um in this 00:24:08.159 --> 00:24:08.789 opinion. 00:24:08.799 --> 00:24:12.710 >> Yeah. uh is that I worry how do we teach 00:24:12.720 --> 00:24:15.350 the next generation of engineers and 00:24:15.360 --> 00:24:17.750 designers these best practices because 00:24:17.760 --> 00:24:20.390 we learned them through trial and error 00:24:20.400 --> 00:24:23.669 working with hard tools and these were 00:24:23.679 --> 00:24:27.990 um ways to avoid pitfalls um and it the 00:24:28.000 --> 00:24:31.430 things that I ask AI to do um I know the 00:24:31.440 --> 00:24:33.110 specific words for them because of my 00:24:33.120 --> 00:24:35.110 context even if I'm not writing code 00:24:35.120 --> 00:24:37.430 directly anymore or even designing in 00:24:37.440 --> 00:24:39.510 the same way that I used to design. The 00:24:39.520 --> 00:24:41.830 fact that I know those processes and I 00:24:41.840 --> 00:24:44.870 know the the the way to describe them in 00:24:44.880 --> 00:24:48.149 a common foundation, um it makes it a 00:24:48.159 --> 00:24:49.510 lot easier to work with them. So, I I 00:24:49.520 --> 00:24:51.669 really really really worry about how are 00:24:51.679 --> 00:24:53.590 we training junior devs, how are we 00:24:53.600 --> 00:24:55.350 hiring them and then how are we training 00:24:55.360 --> 00:24:56.310 them 00:24:56.320 --> 00:24:58.070 >> um to do these sorts of things. And I I 00:24:58.080 --> 00:25:00.230 haven't heard anybody with an adequate 00:25:00.240 --> 00:25:02.149 uh response to that. No, a little bit of 00:25:02.159 --> 00:25:02.870 a tangent. 00:25:02.880 --> 00:25:04.470 >> Similar similar. Yeah, I've spoken on 00:25:04.480 --> 00:25:06.149 the show with a couple of people now 00:25:06.159 --> 00:25:09.110 just kind of outcrying the difficulties 00:25:09.120 --> 00:25:11.750 of hiring overall with lots of different 00:25:11.760 --> 00:25:13.669 facets. So that's certainly its own 00:25:13.679 --> 00:25:15.909 topic and you know again I I I wish we 00:25:15.919 --> 00:25:16.950 were able to connect her a little 00:25:16.960 --> 00:25:18.630 earlier to to dive into some of that 00:25:18.640 --> 00:25:20.710 stuff. But I also wrote down, you know, 00:25:20.720 --> 00:25:22.230 the shared naming importance that you 00:25:22.240 --> 00:25:24.149 mentioned up at the top of that because, 00:25:24.159 --> 00:25:25.830 you know, you kind of mentioned already 00:25:25.840 --> 00:25:29.029 about, you know, the the importance of 00:25:29.039 --> 00:25:32.070 how do you even share that naming, 00:25:32.080 --> 00:25:34.390 right? That that that that language with 00:25:34.400 --> 00:25:36.390 folks. I mean, the the language of the 00:25:36.400 --> 00:25:38.549 the snapshot release is not something 00:25:38.559 --> 00:25:41.350 that, you know, is nec it's honestly the 00:25:41.360 --> 00:25:42.789 first time I've I think that I've heard 00:25:42.799 --> 00:25:44.870 it personally. Um, but it, like you 00:25:44.880 --> 00:25:46.630 said, it means something. And because it 00:25:46.640 --> 00:25:50.470 means something uh to a group um you 00:25:50.480 --> 00:25:52.310 can't just kind of throw that around as 00:25:52.320 --> 00:25:54.149 a term because it means something. We 00:25:54.159 --> 00:25:57.350 had a a similar thing in a in a uh in a 00:25:57.360 --> 00:25:59.350 team that I was working with with this 00:25:59.360 --> 00:26:01.430 term called golden images. Like there's 00:26:01.440 --> 00:26:03.990 this one team that made up this term for 00:26:04.000 --> 00:26:06.310 themselves for for their their purposes. 00:26:06.320 --> 00:26:08.950 And uh the engineering org was like that 00:26:08.960 --> 00:26:10.710 means something to us. You can't do 00:26:10.720 --> 00:26:12.870 that. We're going to be very confused. 00:26:12.880 --> 00:26:14.870 So that that shared language is so 00:26:14.880 --> 00:26:16.149 important which of course in design 00:26:16.159 --> 00:26:18.149 systems I mean shared language is is 00:26:18.159 --> 00:26:19.750 very much what we're all about in this 00:26:19.760 --> 00:26:21.590 thing. And actually you know speaking of 00:26:21.600 --> 00:26:23.190 shared language y 00:26:23.200 --> 00:26:26.630 >> the uh design token spec the the the W3C 00:26:26.640 --> 00:26:27.669 spec. 00:26:27.679 --> 00:26:28.950 >> I want to talk about that a little bit 00:26:28.960 --> 00:26:33.110 because you mentioned that you are 00:26:33.120 --> 00:26:35.990 uh loosely aligned to the spec largely 00:26:36.000 --> 00:26:37.669 and then have a little bit of tooling 00:26:37.679 --> 00:26:39.909 that gets it closer. I think that's what 00:26:39.919 --> 00:26:42.549 you mentioned right. Can you go through 00:26:42.559 --> 00:26:45.190 a little bit of your decision to align 00:26:45.200 --> 00:26:47.909 to that spec like why did you do it 00:26:47.919 --> 00:26:49.830 loosely as opposed to strict? Why didn't 00:26:49.840 --> 00:26:53.669 you do maybe veer off completely for for 00:26:53.679 --> 00:26:56.310 your own you know reasons? Cuz even uh 00:26:56.320 --> 00:26:58.630 what is it uh Salesforce

Lightning 00:26:58.640 --> 00:27:01.750 >> has which originated design tokens went 00:27:01.760 --> 00:27:03.990 off and don't even call it design tokens 00:27:04.000 --> 00:27:05.350 anymore. They call it style hooks. 00:27:05.360 --> 00:27:07.590 Right. So a lot of companies are going 00:27:07.600 --> 00:27:09.350 in lots of different directions on this 00:27:09.360 --> 00:27:11.269 particular space. So could you can you 00:27:11.279 --> 00:27:13.029 kind of uh enlighten me on on your 00:27:13.039 --> 00:27:15.029 decision-m process there? Yeah. [snorts] 00:27:15.039 --> 00:27:19.590 So, the the W3C spec um the this version 00:27:19.600 --> 00:27:22.549 of the design tokens that we publish um 00:27:22.559 --> 00:27:26.789 predates that. Um I was uh originally um 00:27:26.799 --> 00:27:29.750 with Kaig and Danny Banks from Amazon 00:27:29.760 --> 00:27:32.390 and Gina and from I don't even know 00:27:32.400 --> 00:27:36.070 where Gina is now, but um we were 00:27:36.080 --> 00:27:37.350 initially doing the initial 00:27:37.360 --> 00:27:39.350 conversations about what a spec would 00:27:39.360 --> 00:27:41.830 look like and and um Caleb invited me 00:27:41.840 --> 00:27:44.870 and and I was a part of that. Um and 00:27:44.880 --> 00:27:47.269 we've subsequently like Val Head from 00:27:47.279 --> 00:27:49.110 Adobe has been an editor. Yeah. 00:27:49.120 --> 00:27:52.630 >> Um on the spec. Um so Adobe has some 00:27:52.640 --> 00:27:54.710 interest in standards. Uh we always 00:27:54.720 --> 00:27:57.830 have. Um we've got a strong culture 00:27:57.840 --> 00:27:59.990 there. Uh we've got an engineer by the 00:28:00.000 --> 00:28:02.310 name of Alan Sterns who's who's heavily 00:28:02.320 --> 00:28:06.389 um involved in uh W3C standards. Um and 00:28:06.399 --> 00:28:10.149 it's it's uh it's actually inspiring the 00:28:10.159 --> 00:28:11.430 way that some of these people work. I'm 00:28:11.440 --> 00:28:13.750 very very um impressed. 00:28:13.760 --> 00:28:17.430 >> Um but it's not going to fit our needs 00:28:17.440 --> 00:28:18.870 >> um on Spectrum. 00:28:18.880 --> 00:28:22.149 >> Um and so the way that I treat the the 00:28:22.159 --> 00:28:25.269 what is it? DTCG is how most people um 00:28:25.279 --> 00:28:27.510 abbreviate it. The design token 00:28:27.520 --> 00:28:28.710 >> community group. 00:28:28.720 --> 00:28:30.389 >> Community group. Yeah. Thank you. Yeah. 00:28:30.399 --> 00:28:31.430 >> Um 00:28:31.440 --> 00:28:33.029 >> the way that I treat it is it's a 00:28:33.039 --> 00:28:35.350 transport format. It's a it's a format 00:28:35.360 --> 00:28:37.990 that anybody um could build a tool to 00:28:38.000 --> 00:28:39.190 and if you have a good strong 00:28:39.200 --> 00:28:44.470 specification with um uh strong tests or 00:28:44.480 --> 00:28:47.750 tools around it then validation u tools 00:28:47.760 --> 00:28:49.909 then you should be able to build a tool 00:28:49.919 --> 00:28:52.389 that can bring in all of that data 00:28:52.399 --> 00:28:55.750 through that format. So there are people 00:28:55.760 --> 00:28:57.430 who have gone through and tried ranking 00:28:57.440 --> 00:28:59.510 the different design systems on certain 00:28:59.520 --> 00:29:01.029 criteria and one of them that they throw 00:29:01.039 --> 00:29:03.430 on there is does it meet the W3C 00:29:03.440 --> 00:29:04.389 standard. 00:29:04.399 --> 00:29:06.630 >> Um so I would say we do because it 00:29:06.640 --> 00:29:08.389 outputs it that way but we don't store 00:29:08.399 --> 00:29:10.310 it that way because it limits us in the 00:29:10.320 --> 00:29:11.750 way that we are able to actually make 00:29:11.760 --> 00:29:13.350 connections between the data. 00:29:13.360 --> 00:29:16.230 >> Right? So uh the format that it it spits 00:29:16.240 --> 00:29:18.870 out right now which is the the primary 00:29:18.880 --> 00:29:22.630 format um that is very similar to the 00:29:22.640 --> 00:29:26.630 W3C um we are also exporting that format 00:29:26.640 --> 00:29:28.950 in a way that is not disruptive to the 00:29:28.960 --> 00:29:30.870 the products who are consuming it. 00:29:30.880 --> 00:29:33.269 >> Yeah. Um, again, it still doesn't have a 00:29:33.279 --> 00:29:34.870 lot of the relationships that we have in 00:29:34.880 --> 00:29:36.950 there, a lot of the uh context that 00:29:36.960 --> 00:29:39.909 would be helpful. And so, um, we have 00:29:39.919 --> 00:29:42.950 this higher level of data format, which 00:29:42.960 --> 00:29:44.710 I'm referring to as design data because 00:29:44.720 --> 00:29:46.950 it's the most descriptive that I can 00:29:46.960 --> 00:29:47.669 come up with. 00:29:47.679 --> 00:29:50.149 >> Yeah. Yeah. Yeah. I've uh I've recently 00:29:50.159 --> 00:29:53.350 been trying to also align two standards 00:29:53.360 --> 00:29:55.669 largely just to kind of have a better 00:29:55.679 --> 00:29:57.029 opinion about them because admittedly 00:29:57.039 --> 00:30:03.029 I've been pretty um uh I guess uh um 00:30:03.039 --> 00:30:04.230 what's the word I'm looking for? 00:30:04.240 --> 00:30:06.149 Disagreed uh dis I had a lot of 00:30:06.159 --> 00:30:08.789 disagreement about the specification. A 00:30:08.799 --> 00:30:10.950 lot of uh you know kind of hot takes 00:30:10.960 --> 00:30:12.950 about it when uh when it was coming 00:30:12.960 --> 00:30:15.430 around. Uh and still now today I mean I 00:30:15.440 --> 00:30:17.669 I still have hot takes about it. So uh 00:30:17.679 --> 00:30:20.230 but in order for me to really understand 00:30:20.240 --> 00:30:23.190 I guess you know what the you know what 00:30:23.200 --> 00:30:25.909 the pitfalls are past my initial kind of 00:30:25.919 --> 00:30:27.830 viewpoint on it is like okay let me use 00:30:27.840 --> 00:30:30.630 the thing and you know in using the 00:30:30.640 --> 00:30:32.630 thing I'm able to really identify like 00:30:32.640 --> 00:30:35.430 where all these you know these um these 00:30:35.440 --> 00:30:37.909 uh I

guess gaps are and what you say in 00:30:37.919 --> 00:30:39.590 the connections thing is actually really 00:30:39.600 --> 00:30:43.350 important to me um because I I too think 00:30:43.360 --> 00:30:45.350 that there should be connections uh like 00:30:45.360 --> 00:30:47.750 I remember uh the the big issue that 00:30:47.760 --> 00:30:50.149 Jacob Miller opened about theming, which 00:30:50.159 --> 00:30:51.669 is issue number 210. I'll never forget 00:30:51.679 --> 00:30:55.430 it. Um where where uh people were trying 00:30:55.440 --> 00:30:57.110 to figure out how theming is supposed to 00:30:57.120 --> 00:30:59.269 work in the specification, which was 00:30:59.279 --> 00:31:01.269 like I don't know, pages and pages of 00:31:01.279 --> 00:31:03.909 discussion in there. And I like, you 00:31:03.919 --> 00:31:05.510 know, one of the very easy things that I 00:31:05.520 --> 00:31:07.029 was like, we have to be able to import 00:31:07.039 --> 00:31:08.870 files to each other, be able to cross 00:31:08.880 --> 00:31:10.310 reference files, you know, because I 00:31:10.320 --> 00:31:12.230 don't want my color and topography all 00:31:12.240 --> 00:31:15.190 in the same file, right? I don't want uh 00:31:15.200 --> 00:31:17.190 my primitive and semantic tokens all in 00:31:17.200 --> 00:31:18.630 the same file. I don't need all that, 00:31:18.640 --> 00:31:21.750 right? I need to be able to organize in 00:31:21.760 --> 00:31:24.310 some way without it all being in in one 00:31:24.320 --> 00:31:26.789 file. And we need some way of cross 00:31:26.799 --> 00:31:30.310 referencing. So, uh luckily the resolver 00:31:30.320 --> 00:31:33.350 spec sort of does it 00:31:33.360 --> 00:31:37.350 >> right. But in in a in a kind of a weird 00:31:37.360 --> 00:31:39.029 way, like a way that I was like, this 00:31:39.039 --> 00:31:41.590 seems a little extra, you know? 00:31:41.600 --> 00:31:44.789 >> Yeah. Um, but I again I implemented as 00:31:44.799 --> 00:31:46.870 as far as I could and then you have to 00:31:46.880 --> 00:31:48.950 kind of, you know, take some liberties 00:31:48.960 --> 00:31:50.630 in some of this stuff, right? When 00:31:50.640 --> 00:31:52.470 you're when you're trying to, you know, 00:31:52.480 --> 00:31:54.310 uh, have something in the shape that 00:31:54.320 --> 00:31:56.789 you're expecting and the the work that I 00:31:56.799 --> 00:31:58.870 was doing most recently is kind of green 00:31:58.880 --> 00:32:00.950 field. So I I'm able I don't have any 00:32:00.960 --> 00:32:03.190 consumers necessarily yet, but even the 00:32:03.200 --> 00:32:04.630 consumers, it almost doesn't matter 00:32:04.640 --> 00:32:06.310 because it has to be CSS in the end of 00:32:06.320 --> 00:32:08.310 the day and and the CSS isn't going to 00:32:08.320 --> 00:32:11.029 match the DTCG, right? Right. Because 00:32:11.039 --> 00:32:12.389 it's exactly what you said. It's a 00:32:12.399 --> 00:32:14.630 transport kind of feeling, right? It's 00:32:14.640 --> 00:32:15.830 just like, okay, here's how we're going 00:32:15.840 --> 00:32:18.149 to transport this so that it can be sent 00:32:18.159 --> 00:32:20.149 to style dictionary and then transformed 00:32:20.159 --> 00:32:23.110 into the platforms that we need. So, 00:32:23.120 --> 00:32:24.630 >> yeah, I definitely align with that and 00:32:24.640 --> 00:32:27.029 I'm I'm always again curious about, you 00:32:27.039 --> 00:32:29.269 know, yes, standards are good, but then 00:32:29.279 --> 00:32:31.029 what if the standard isn't meeting your 00:32:31.039 --> 00:32:33.509 needs, like what do you do is is the big 00:32:33.519 --> 00:32:36.149 question I think a lot of people have. 00:32:36.159 --> 00:32:38.470 >> Yeah. And and I think the the fact that 00:32:38.480 --> 00:32:39.830 like if you if you treat it like a 00:32:39.840 --> 00:32:41.269 transport format, then it doesn't have 00:32:41.279 --> 00:32:43.430 to be everything. It's not it's not an 00:32:43.440 --> 00:32:45.509 intelligent way to do every single bit. 00:32:45.519 --> 00:32:47.509 It's not an intelligent way to optimize. 00:32:47.519 --> 00:32:49.029 >> Um for example, like when you were 00:32:49.039 --> 00:32:50.070 talking about you lose those 00:32:50.080 --> 00:32:52.310 relationships, right? Like if I hardcode 00:32:52.320 --> 00:32:56.149 into a token um the color uh in multiple 00:32:56.159 --> 00:32:58.310 places, the same color value in multiple 00:32:58.320 --> 00:33:01.590 places, that's not efficient. Um, and it 00:33:01.600 --> 00:33:03.669 definitely has the uh don't repeat 00:33:03.679 --> 00:33:05.509 yourself, the dry principle that we're 00:33:05.519 --> 00:33:07.430 breaking there. But as far as like being 00:33:07.440 --> 00:33:11.029 accurate, um, if something else has it 00:33:11.039 --> 00:33:13.430 um, if you have it stored in some other 00:33:13.440 --> 00:33:15.750 format that has those relationships 00:33:15.760 --> 00:33:18.630 intact and it's still readable, then it 00:33:18.640 --> 00:33:19.669 kind of doesn't matter that the 00:33:19.679 --> 00:33:22.470 transport format isn't perfect. Um, 00:33:22.480 --> 00:33:24.630 because I I also don't expect any of 00:33:24.640 --> 00:33:27.430 these tools to be things where uh, I'd 00:33:27.440 --> 00:33:29.509 be able to output from our design data. 00:33:29.519 --> 00:33:31.350 I don't expect to be able to output 00:33:31.360 --> 00:33:34.630 perfect CSS. Um, there's too much going 00:33:34.640 --> 00:33:37.990 into CSS. Um, and there's too much 00:33:38.000 --> 00:33:39.830 nuance that you really have to play 00:33:39.840 --> 00:33:42.149 around with in individual browsers that 00:33:42.159 --> 00:33:44.789 you don't want to write to the the the 00:33:44.799 --> 00:33:47.430 oddities of CSS, especially because uh 00:33:47.440 --> 00:33:49.990 Spectrum is not a web only platform, 00:33:50.000 --> 00:33:50.310 >> right? 00:33:50.320 --> 00:33:52.710 >> Um, we need to be worried about not just 00:33:52.720 -->

00:33:56.070 CSS but also iOS, Android um, and some 00:33:56.080 --> 00:33:59.430 other internal ones. Um, and as well as 00:33:59.440 --> 00:34:01.190 Figma, right? Like if you're talking 00:34:01.200 --> 00:34:03.509 about a single source of truth, Figma 00:34:03.519 --> 00:34:07.750 variables are a fairly useful tool, but 00:34:07.760 --> 00:34:11.829 a poor bucket to use um, as the source 00:34:11.839 --> 00:34:13.990 of truth of all of this information. 00:34:14.000 --> 00:34:16.389 >> Um, and so it becomes another export 00:34:16.399 --> 00:34:18.550 format. Right? So I have my design data. 00:34:18.560 --> 00:34:21.829 It can it can output to u design tokens 00:34:21.839 --> 00:34:25.190 to um the format that our our our 00:34:25.200 --> 00:34:27.109 applications are currently expecting as 00:34:27.119 --> 00:34:29.909 well as Figma variables like it it's I I 00:34:29.919 --> 00:34:31.430 hesitate to say one the single source of 00:34:31.440 --> 00:34:33.190 truth because there's no such thing but 00:34:33.200 --> 00:34:34.869 it's it gets closer to it. 00:34:34.879 --> 00:34:35.190 >> Yeah. 00:34:35.200 --> 00:34:37.190 >> Um and and that's that's really the goal 00:34:37.200 --> 00:34:39.750 is is trying to make store all of our 00:34:39.760 --> 00:34:41.669 stuff in a place that at least people 00:34:41.679 --> 00:34:43.349 know where to talk about it and where to 00:34:43.359 --> 00:34:44.790 look for things. Yeah. So, 00:34:44.800 --> 00:34:45.990 >> and you know, I think it's also 00:34:46.000 --> 00:34:47.750 interesting about, you know, you kind of 00:34:47.760 --> 00:34:49.349 dropping the there is no single source 00:34:49.359 --> 00:34:50.950 of truth because that's its own episode, 00:34:50.960 --> 00:34:52.230 you know, and I've had a couple of 00:34:52.240 --> 00:34:53.589 people on here in different in different 00:34:53.599 --> 00:34:56.230 ways talking about sources of truth and 00:34:56.240 --> 00:34:57.430 the ways that those things work. I'm 00:34:57.440 --> 00:34:59.289 going to leave that on the shelf for now 00:34:59.299 --> 00:34:59.990 [laughter] 00:35:00.000 --> 00:35:01.510 because that's its own thing. But I do 00:35:01.520 --> 00:35:03.270 actually want to talk about because you 00:35:03.280 --> 00:35:05.430 said you have a some some thoughts about 00:35:05.440 --> 00:35:06.470 specs. 00:35:06.480 --> 00:35:06.790 >> Yeah. 00:35:06.800 --> 00:35:08.550 >> And I want to I want to get those out of 00:35:08.560 --> 00:35:09.829 you as well while we're while we're 00:35:09.839 --> 00:35:11.030 here. So, what are your thoughts on that 00:35:11.040 --> 00:35:15.750 on that piece? So uh in true engineering 00:35:15.760 --> 00:35:19.030 nature, we built a new spec um for 00:35:19.040 --> 00:35:23.109 design data. So I'm in a place where I'm 00:35:23.119 --> 00:35:24.870 not expecting anybody else to use this 00:35:24.880 --> 00:35:25.670 spec. Okay. 00:35:25.680 --> 00:35:27.990 >> Um if they wanted to, that's fine. That 00:35:28.000 --> 00:35:31.270 that's not entirely the goal. um 00:35:31.280 --> 00:35:34.150 Spectrum and Adobe is a big enough 00:35:34.160 --> 00:35:36.550 ecosystem that building a spec just for 00:35:36.560 --> 00:35:39.270 us is actually plenty um of of 00:35:39.280 --> 00:35:41.829 complexity and customer base uh sort of 00:35:41.839 --> 00:35:42.870 stuff. 00:35:42.880 --> 00:35:47.349 >> Um but being able to uh borrow or 00:35:47.359 --> 00:35:49.349 outright steal the best parts of of 00:35:49.359 --> 00:35:51.190 everybody else. So yeah, 00:35:51.200 --> 00:35:53.670 >> um I was uh playing around with 00:35:53.680 --> 00:35:55.349 Impeccable and I wanted to say 00:35:55.359 --> 00:35:57.829 Impeccable is a um an agent skill that 00:35:57.839 --> 00:36:00.150 you can install um with your AI tools 00:36:00.160 --> 00:36:02.550 and it's primarily for front-end design. 00:36:02.560 --> 00:36:02.870 >> Yeah. 00:36:02.880 --> 00:36:05.750 >> Um in in web views. Um there's some some 00:36:05.760 --> 00:36:07.270 good things about it that you can use in 00:36:07.280 --> 00:36:09.030 other contexts, but I had heard a couple 00:36:09.040 --> 00:36:10.710 engineers talk about using it. So I was 00:36:10.720 --> 00:36:11.990 like, well, how well does it work with 00:36:12.000 --> 00:36:14.390 Spectrum? And it doesn't interact um it 00:36:14.400 --> 00:36:15.510 doesn't interface specifically with 00:36:15.520 --> 00:36:17.670 Spectrum at first. And so it's looking 00:36:17.680 --> 00:36:20.310 for the design.md file which is a spec 00:36:20.320 --> 00:36:22.870 that uh Google has released and it's a 00:36:22.880 --> 00:36:26.550 fine spec um but it's not useful for the 00:36:26.560 --> 00:36:28.390 majority of the complexity of spectrum. 00:36:28.400 --> 00:36:30.069 That doesn't mean that we can't use it. 00:36:30.079 --> 00:36:33.510 So um I I figured out just with a single 00:36:33.520 --> 00:36:36.390 prompt I was able to ask um uh our LLM 00:36:36.400 --> 00:36:38.550 to be like hey looking at design data 00:36:38.560 --> 00:36:42.069 how would you make a useful uh designm 00:36:42.079 --> 00:36:44.630 file? And I have I have plenty of um 00:36:44.640 --> 00:36:47.109 criticism for the the spec itself. Um 00:36:47.119 --> 00:36:49.270 the fact that like a single or even 00:36:49.280 --> 00:36:51.589 multiple markdown files would be able to 00:36:51.599 --> 00:36:53.190 hold the complexity of what you want and 00:36:53.200 --> 00:36:55.349 make it easy for AI or humans to be able 00:36:55.359 --> 00:36:57.670 to traverse. It's it's 00:36:57.680 --> 00:37:00.230 >> Yeah, PJ and I were yelling about that 00:37:00.240 --> 00:37:02.150 in particular on our show. You'll have 00:37:02.160 --> 00:37:03.750 it's very exciting at the end, by the 00:37:03.760 --> 00:37:04.310 way. 00:37:04.320 --> 00:37:05.270 >> Yeah. [laughter] 00:37:05.280 --> 00:37:07.109 But but at the same time, they were 00:37:07.119 --> 00:37:08.710 quick to get out with

something simple, 00:37:08.720 --> 00:37:10.710 >> right? And this is like it's part of the 00:37:10.720 --> 00:37:12.550 the gatekeeping that we just have to 00:37:12.560 --> 00:37:15.109 avoid in in general. Um if I try to 00:37:15.119 --> 00:37:17.829 define what a design system is. Uh it's 00:37:17.839 --> 00:37:19.430 it's a tough thing to nail down because 00:37:19.440 --> 00:37:20.870 if you're not careful, you'll end up 00:37:20.880 --> 00:37:22.790 like cutting people out. I'm of the 00:37:22.800 --> 00:37:24.310 opinion that everyone has a design 00:37:24.320 --> 00:37:25.750 system whether they intentionally call 00:37:25.760 --> 00:37:27.030 it that or not. 00:37:27.040 --> 00:37:29.349 >> Um just some are actively working on it 00:37:29.359 --> 00:37:31.349 in a way or organizing it in a specific 00:37:31.359 --> 00:37:34.069 way. Um but anytime we try to like 00:37:34.079 --> 00:37:36.950 reduce repetition or we try to make um 00:37:36.960 --> 00:37:38.870 design decisions accessible to multiple 00:37:38.880 --> 00:37:41.510 people like that's a design system. Uh 00:37:41.520 --> 00:37:44.470 so if you are just putting colors into a 00:37:44.480 --> 00:37:46.710 Google spreadsheet as a design system 00:37:46.720 --> 00:37:48.550 right like it it it may not be a very 00:37:48.560 --> 00:37:51.190 mature one. Um but there's nothing to to 00:37:51.200 --> 00:37:52.790 I don't want to ever stop somebody and 00:37:52.800 --> 00:37:54.550 be like n you're not quite doing it 00:37:54.560 --> 00:37:56.310 right because I'm not doing it right. 00:37:56.320 --> 00:37:57.990 Nobody is and we're all trying to 00:37:58.000 --> 00:38:00.230 improve the the ways that we work. Um, 00:38:00.240 --> 00:38:01.349 so I would say the same for the 00:38:01.359 --> 00:38:02.950 design.mmd file. It's possible that 00:38:02.960 --> 00:38:04.150 they're going to iterate on it and prove 00:38:04.160 --> 00:38:06.230 it and change it, but as it stands right 00:38:06.240 --> 00:38:08.150 now, it has its uses. I can throw it 00:38:08.160 --> 00:38:09.589 into impeccable and impeccable knows 00:38:09.599 --> 00:38:11.270 what to look out of that stuff and then 00:38:11.280 --> 00:38:12.710 it gives it instructions how to get 00:38:12.720 --> 00:38:15.270 further context um if it needs it. 00:38:15.280 --> 00:38:19.270 >> Um PJ's uh spec I have I have wholly 00:38:19.280 --> 00:38:20.790 stolen my favorite parts out of that 00:38:20.800 --> 00:38:21.430 one. There you go. 00:38:21.440 --> 00:38:25.109 >> Um we have our uh Spectrum documentation 00:38:25.119 --> 00:38:27.349 at spectrum.adobe.com adobe.com and 00:38:27.359 --> 00:38:29.670 that's primarily focused um on the 00:38:29.680 --> 00:38:32.230 design audience because our individual 00:38:32.240 --> 00:38:36.310 implementations have their own um and uh 00:38:36.320 --> 00:38:38.390 uh documentation and we are making 00:38:38.400 --> 00:38:40.069 efforts to try and unify some of those 00:38:40.079 --> 00:38:41.829 things but really a lot of the times it 00:38:41.839 --> 00:38:43.829 ends up being like go to their site go 00:38:43.839 --> 00:38:45.510 to react spectrum to go get the details 00:38:45.520 --> 00:38:46.630 about React Spectrum 00:38:46.640 --> 00:38:47.270 >> right 00:38:47.280 --> 00:38:51.349 >> um and so I built a tool that every time 00:38:51.359 --> 00:38:54.150 um our designers update the the website 00:38:54.160 --> 00:38:56.069 for the spectrum documentation 00:38:56.079 --> 00:38:59.430 Um, I have a g it uses a web hook to 00:38:59.440 --> 00:39:02.550 trigger a GitHub action that creates a 00:39:02.560 --> 00:39:06.230 pull request against our design data um 00:39:06.240 --> 00:39:08.630 that I can review. And all it's doing is 00:39:08.640 --> 00:39:10.790 it's it it takes all the markdown out of 00:39:10.800 --> 00:39:13.030 the changes that they made. And it 00:39:13.040 --> 00:39:14.870 doesn't embed images. It just uses the 00:39:14.880 --> 00:39:17.109 alt text and then includes the URL for 00:39:17.119 --> 00:39:19.750 where that image is publicly. And then 00:39:19.760 --> 00:39:21.829 um it brings all that markdown in and it 00:39:21.839 --> 00:39:24.150 it chunks it into specific parts because 00:39:24.160 --> 00:39:25.589 we have a specific structure. So we have 00:39:25.599 --> 00:39:27.670 our usage guidelines that are like the 00:39:27.680 --> 00:39:29.109 when you're looking at a component it's 00:39:29.119 --> 00:39:30.870 your dos and don'ts like don't do this, 00:39:30.880 --> 00:39:32.630 you should be doing this. 00:39:32.640 --> 00:39:35.349 >> So it's taking those exerpts which you 00:39:35.359 --> 00:39:37.349 can codify, you can turn some of those 00:39:37.359 --> 00:39:39.750 into code, but sometimes the description 00:39:39.760 --> 00:39:42.310 is is great. And so turning those into 00:39:42.320 --> 00:39:44.550 chunks of data as markdown still 00:39:44.560 --> 00:39:48.790 >> but in uh discrete parts. And then uh it 00:39:48.800 --> 00:39:50.230 brings that into the design data as a 00:39:50.240 --> 00:39:52.630 pull request. I review it. I merge it 00:39:52.640 --> 00:39:55.270 and then it automatically um creates a 00:39:55.280 --> 00:39:57.190 release of the 00:39:57.200 --> 00:40:00.710 >> AI tools. So if somebody's using the MCP 00:40:00.720 --> 00:40:02.150 and they're always using the latest 00:40:02.160 --> 00:40:03.829 version of it, uh they're always getting 00:40:03.839 --> 00:40:05.990 the latest version of the design data 00:40:06.000 --> 00:40:08.710 and that includes the spectrum 00:40:08.720 --> 00:40:11.190 documentation. So, previous to that, if 00:40:11.200 --> 00:40:13.030 you wanted to um know something about 00:40:13.040 --> 00:40:14.230 the documentation, you could 00:40:14.240 --> 00:40:16.950 specifically ask AI to go look at the 00:40:16.960 --> 00:40:19.589 docs, and that's a useful tool that 00:40:19.599 --> 00:40:20.630 works well. 00:40:20.640 --> 00:40:21.910 >>

Um some people are like, well, it 00:40:21.920 --> 00:40:23.270 doesn't have offline support. I don't 00:40:23.280 --> 00:40:24.390 really care about that. If you're using 00:40:24.400 --> 00:40:27.030 AI tools, you don't really Yeah, we're 00:40:27.040 --> 00:40:27.829 in trouble anyway. 00:40:27.839 --> 00:40:28.230 >> Exactly. 00:40:28.240 --> 00:40:31.829 >> Um but, um what what it has by having 00:40:31.839 --> 00:40:34.630 the benefit of it embedding it in um is 00:40:34.640 --> 00:40:36.710 one, it's version controlled. Mhm. 00:40:36.720 --> 00:40:39.349 >> So if I needed to um and we're still 00:40:39.359 --> 00:40:41.349 rolling out how this would work like the 00:40:41.359 --> 00:40:43.190 data is there. The question is how do we 00:40:43.200 --> 00:40:45.030 make it easy for someone to use? But if 00:40:45.040 --> 00:40:48.470 a product is using a specific version um 00:40:48.480 --> 00:40:51.349 or place in time from the design system 00:40:51.359 --> 00:40:52.950 would be nice if they could say hey I 00:40:52.960 --> 00:40:54.870 just want my AI to know about this 00:40:54.880 --> 00:40:56.790 version of the design system and don't 00:40:56.800 --> 00:40:58.390 go looking on the internet for stuff 00:40:58.400 --> 00:41:02.309 like go look here. Um and it also uh 00:41:02.319 --> 00:41:05.030 saves from some of the hallucinations by 00:41:05.040 --> 00:41:07.270 um trying it still can go out to the 00:41:07.280 --> 00:41:08.550 internet right like we're not limiting 00:41:08.560 --> 00:41:09.190 it 00:41:09.200 --> 00:41:12.550 >> but by trying to kind of corral it into 00:41:12.560 --> 00:41:14.230 first look at this data that you have 00:41:14.240 --> 00:41:16.150 locally available to you 00:41:16.160 --> 00:41:18.790 >> um we are getting more accurate results. 00:41:18.800 --> 00:41:21.990 Now I have to say that with a a huge 00:41:22.000 --> 00:41:24.710 caveat um or a grain of salt which is 00:41:24.720 --> 00:41:26.550 we're still working on how do we 00:41:26.560 --> 00:41:28.470 evaluate whether it's doing a good job 00:41:28.480 --> 00:41:30.790 or not. Um, and that's another huge 00:41:30.800 --> 00:41:34.950 problem that we have. Um, which so every 00:41:34.960 --> 00:41:37.430 time that I deal with design data or 00:41:37.440 --> 00:41:40.150 design decisions or what becomes design 00:41:40.160 --> 00:41:42.710 tokens, um, I say there's lots of places 00:41:42.720 --> 00:41:44.630 where you can store this information and 00:41:44.640 --> 00:41:46.470 some are more more useful than others. 00:41:46.480 --> 00:41:49.030 If you store it in a Figma file, at 00:41:49.040 --> 00:41:50.870 least it's it's somewhere where I can 00:41:50.880 --> 00:41:53.270 reference. Um, if I store it in CSS, 00:41:53.280 --> 00:41:54.550 that's somewhere where the engineers can 00:41:54.560 --> 00:41:57.109 easily reference. Um, and if you store 00:41:57.119 --> 00:41:59.990 it in our heads, that's the worst place 00:42:00.000 --> 00:42:01.190

you can store it. 00:42:01.200 --> 00:42:03.510 >> Um, and when it comes to evaluating 00:42:03.520 --> 00:42:05.589 whether something is using the design 00:42:05.599 --> 00:42:07.829 system or not correctly, that's usually 00:42:07.839 --> 00:42:10.069 where it ends up. It ends up in a few 00:42:10.079 --> 00:42:13.030 key people who end up being the auditors 00:42:13.040 --> 00:42:15.510 um, intentionally or otherwise. Uh, they 00:42:15.520 --> 00:42:17.510 get put in charge of, hey, is this 00:42:17.520 --> 00:42:19.510 spectrum enough? Um, 00:42:19.520 --> 00:42:21.430 >> and like if you wanted to try and score 00:42:21.440 --> 00:42:24.630 that, um, you might be able to, but like 00:42:24.640 --> 00:42:26.790 now we're at this place where again it's 00:42:26.800 --> 00:42:28.950 realizing that wasn't sufficient for 00:42:28.960 --> 00:42:31.430 humans and it's not sufficient for AI. 00:42:31.440 --> 00:42:33.109 We need to figure out how we can teach 00:42:33.119 --> 00:42:37.910 AI uh to be able to evaluate itself um 00:42:37.920 --> 00:42:41.349 or its output against u what we think 00:42:41.359 --> 00:42:43.430 should be optimal so that it's able to 00:42:43.440 --> 00:42:45.270 say yes we are spectrum we're meeting 00:42:45.280 --> 00:42:46.790 the guidelines and the recommendations 00:42:46.800 --> 00:42:49.510 of spectrum. Um but it's it's something 00:42:49.520 --> 00:42:50.790 that we're still struggling with and 00:42:50.800 --> 00:42:52.150 we've we've just got some ideas we're 00:42:52.160 --> 00:42:53.349 playing around with. But I think this is 00:42:53.359 --> 00:42:55.430 an interesting space um for design 00:42:55.440 --> 00:42:56.950 systems and AI in general. 00:42:56.960 --> 00:42:59.589 >> Yeah. Um I agree. Yeah. U just to 00:42:59.599 --> 00:43:01.349 clarify just real quick when you say 00:43:01.359 --> 00:43:04.710 specs uh you're are you uh just talking 00:43:04.720 --> 00:43:05.750 about 00:43:05.760 --> 00:43:07.510 >> uh are you talking about generally in in 00:43:07.520 --> 00:43:10.150 terms of the specs because uh I remember 00:43:10.160 --> 00:43:12.390 um PJ's is specifically for 00:43:12.400 --> 00:43:14.870 documentation. Are you having specs for 00:43:14.880 --> 00:43:16.630 components and tokens and all those 00:43:16.640 --> 00:43:18.309 other additional uh resources that are 00:43:18.319 --> 00:43:19.990 in the system as well when you say 00:43:20.000 --> 00:43:21.109 specs? 00:43:21.119 --> 00:43:21.510 >> Yeah. 00:43:22.000 --> 00:43:24.710 >> So, um it's a bit of a mouthful of a 00:43:24.720 --> 00:43:25.510 URL. 00:43:25.520 --> 00:43:25.910 >> Okay. 00:43:25.920 --> 00:43:26.870 >> Um but it's 00:43:26.880 --> 00:43:32.230 opensource.adobe.comspectrumdesign 00:43:32.240 --> 00:43:34.390 data. 00:43:34.400 --> 00:43:34.790 So, 00:43:34.800 --> 00:43:35.270 >> okay. 00:43:35.280 --> 00:43:37.270 >> It's it's it's it's a mouthful, but it's 00:43:37.280 --> 00:43:39.910 it's where um the monor repo is

a public 00:43:39.920 --> 00:43:41.829 GitHub monorreo for design data, 00:43:41.839 --> 00:43:42.790 spectrum design data. 00:43:42.800 --> 00:43:45.829 >> Okay. and it's on the Adobe or um and so 00:43:45.839 --> 00:43:48.230 this is where our GitHub pages websites 00:43:48.240 --> 00:43:50.150 get published to. So 00:43:50.160 --> 00:43:53.349 >> um but there is a spec a specification 00:43:53.359 --> 00:43:56.950 on there um that has Do you share 00:43:56.960 --> 00:43:58.069 screens on here? Do you want me to share 00:43:58.079 --> 00:43:58.710 my screen? 00:43:58.720 --> 00:43:59.910 >> I'm going to pause for Yeah, because I'm 00:43:59.920 --> 00:44:01.430 not ready for this for the screen share, 00:44:01.440 --> 00:44:03.270 but I'll definitely link to it in the in 00:44:03.280 --> 00:44:04.950 the comments below or the description. 00:44:04.960 --> 00:44:06.710 >> So a lot of the things that we've 00:44:06.720 --> 00:44:08.390 already talked about the idea of a 00:44:08.400 --> 00:44:11.109 taxonomy or a glossery with a we call it 00:44:11.119 --> 00:44:12.950 the registry and it's a poor name. I 00:44:12.960 --> 00:44:14.470 need to rename it because registry means 00:44:14.480 --> 00:44:16.550 something very different to engineers. 00:44:16.560 --> 00:44:18.870 >> Um but taxonomy or our glossery where we 00:44:18.880 --> 00:44:22.710 have um uh certain terms defined and 00:44:22.720 --> 00:44:24.550 then we've got the component format 00:44:24.560 --> 00:44:26.630 where we're making descriptions about a 00:44:26.640 --> 00:44:28.309 component specifically. 00:44:28.319 --> 00:44:30.710 >> And then we've got um what is called the 00:44:30.720 --> 00:44:32.470 cascade and the resolution 00:44:32.480 --> 00:44:35.030 >> and that refers to uh the way that we do 00:44:35.040 --> 00:44:36.870 multiplatform support. So we can go back 00:44:36.880 --> 00:44:37.829 to that one. 00:44:37.839 --> 00:44:40.309 >> And then we've got mode sets. Um, so 00:44:40.319 --> 00:44:42.710 light, dark, desktop, mobile, uh, 00:44:42.720 --> 00:44:46.390 wireframe, and then like the overlap of 00:44:46.400 --> 00:44:47.829 those things if you wanted to get into 00:44:47.839 --> 00:44:50.309 things that are like density, um, for a 00:44:50.319 --> 00:44:52.950 highly dense UI like Premiere, 00:44:52.960 --> 00:44:55.750 >> um, or a more open one like a web app. 00:44:55.760 --> 00:44:58.470 >> Um, and then we've got uh, things around 00:44:58.480 --> 00:44:59.910 accessibility. And then we've got our 00:44:59.920 --> 00:45:02.790 documentation blocks um which really I I 00:45:02.800 --> 00:45:06.710 I even reference um PJ's work in 00:45:06.720 --> 00:45:10.710 borrowing pros um typed pros blocks um 00:45:10.720 --> 00:45:13.349 in there and then the agent readable 00:45:13.359 --> 00:45:15.750 surface um and then we've got things 00:45:15.760 --> 00:45:18.470 around stuff like um how this system is 00:45:18.480 --> 00:45:21.190 is allowed to evolve um how it's

being 00:45:21.200 --> 00:45:22.870 versioned how those versions get rolled 00:45:22.880 --> 00:45:24.950 out and how that's going to introduce 00:45:24.960 --> 00:45:27.109 breaking changes which are inevitable 00:45:27.119 --> 00:45:27.750 >> right 00:45:27.760 --> 00:45:31.349 >> um and Then things like um even 00:45:31.359 --> 00:45:33.030 authoring like if you wanted to use the 00:45:33.040 --> 00:45:36.470 LLM to author or change design data. 00:45:36.480 --> 00:45:39.109 >> Um and then finally there's tokens and 00:45:39.119 --> 00:45:41.510 the relationship format. 00:45:41.520 --> 00:45:45.030 >> So talking about reducing tokens. Yeah. 00:45:45.040 --> 00:45:47.270 >> Um the we have what are what I call 00:45:47.280 --> 00:45:50.069 component token relationships. Um, and 00:45:50.079 --> 00:45:52.710 if you're familiar with um data modeling 00:45:52.720 --> 00:45:55.030 at all, this is a bit like a join table 00:45:55.040 --> 00:45:57.990 in a database, okay? Where you've got um 00:45:58.000 --> 00:46:00.790 I've got components um and they've got 00:46:00.800 --> 00:46:02.230 their states and they've got their 00:46:02.240 --> 00:46:03.829 properties, they've got their uh 00:46:03.839 --> 00:46:05.910 attributes, their anatomy. Um they've 00:46:05.920 --> 00:46:07.510 got all these things about the component 00:46:07.520 --> 00:46:09.670 that I have already defined in our spec. 00:46:09.680 --> 00:46:12.230 And then I've got tokens, which these 00:46:12.240 --> 00:46:14.470 are generic. Um they're not specific to 00:46:14.480 --> 00:46:16.390 a single component. They are something 00:46:16.400 --> 00:46:18.150 that should be across multiple 00:46:18.160 --> 00:46:20.630 components if not all components. Yeah, 00:46:20.640 --> 00:46:21.990 nothing goes across all of them but for 00:46:22.000 --> 00:46:23.750 the most part these are your colors, 00:46:23.760 --> 00:46:25.589 your dimensions with some semantic 00:46:25.599 --> 00:46:27.670 context that describe it's not just hey 00:46:27.680 --> 00:46:30.630 this is blue but uh this is our accent 00:46:30.640 --> 00:46:31.589 color. 00:46:31.599 --> 00:46:33.750 >> Um so describing those things and then 00:46:33.760 --> 00:46:35.190 the component token relationships 00:46:35.200 --> 00:46:36.790 describe how these two things work 00:46:36.800 --> 00:46:39.270 together. So it says um when a component 00:46:39.280 --> 00:46:41.349 has a certain property and it's in a 00:46:41.359 --> 00:46:45.030 certain state um you should change this 00:46:45.040 --> 00:46:48.710 aspect of this anatomy using this value 00:46:48.720 --> 00:46:51.510 and so we only keep track of what 00:46:51.520 --> 00:46:53.430 changes between those things. I don't 00:46:53.440 --> 00:46:55.270 need to if I needed to I can query and 00:46:55.280 --> 00:46:57.430 find out any combination that I want to 00:46:57.440 --> 00:46:59.030 but that's not what's stored in the in 00:46:59.040 --> 00:47:00.870 the actual design data. it's only stored 00:47:00.880 --> 00:47:04.069 is what is different and then the um 00:47:04.079 --> 00:47:06.950 component token relationship is able to 00:47:06.960 --> 00:47:11.109 um it's a bit like the um in CSS dealing 00:47:11.119 --> 00:47:13.990 with specificity it's able to know what 00:47:14.000 --> 00:47:16.870 overrides other stuff so if I'm making a 00:47:16.880 --> 00:47:18.790 query and I need to know what should I 00:47:18.800 --> 00:47:20.309 make this button in this state this 00:47:20.319 --> 00:47:23.589 background color um it's able to kind of 00:47:23.599 --> 00:47:25.750 traverse and query across all those 00:47:25.760 --> 00:47:26.870 things 00:47:26.880 --> 00:47:29.910 >> um so the spec is literally a spec Um 00:47:29.920 --> 00:47:33.670 it's written very similar to a W3C spec. 00:47:33.680 --> 00:47:36.790 >> Um and then I have tools around it. I 00:47:36.800 --> 00:47:38.390 have an SDK which is a standard 00:47:38.400 --> 00:47:39.589 development kit. 00:47:39.599 --> 00:47:43.109 >> Um which allows us to deploy these 00:47:43.119 --> 00:47:44.950 tools. They're mostly validation tools. 00:47:44.960 --> 00:47:46.710 So making sure that the data is correct, 00:47:46.720 --> 00:47:47.990 but there's some authoring and some 00:47:48.000 --> 00:47:49.990 querying tools in there. And I'm I built 00:47:50.000 --> 00:47:51.670 it in a generic enough way that we can 00:47:51.680 --> 00:47:53.829 use it in iOS. You can use it in any 00:47:53.839 --> 00:47:55.109 environment. I can build it and use it 00:47:55.119 --> 00:47:56.710 on the website if I wanted to because 00:47:56.720 --> 00:48:00.230 it's it's built in Rust. Um, and so I 00:48:00.240 --> 00:48:02.309 can actually then it generates a web 00:48:02.319 --> 00:48:04.069 assembly module which can be published 00:48:04.079 --> 00:48:06.069 as an npm package. The only place where 00:48:06.079 --> 00:48:09.829 you can't use these things well um is on 00:48:09.839 --> 00:48:12.550 Figma. You can't use web assembly 00:48:12.560 --> 00:48:15.430 modules currently in a FGMA plugin. 00:48:15.440 --> 00:48:16.870 >> So you'd either have to host it on the 00:48:16.880 --> 00:48:19.750 website, but um the option here still is 00:48:19.760 --> 00:48:22.230 this is a spec that has unit tests uh 00:48:22.240 --> 00:48:23.510 defined in it. So, even if you don't 00:48:23.520 --> 00:48:24.790 want to use any of the tools that I 00:48:24.800 --> 00:48:29.430 made, um you can still um you can still 00:48:29.440 --> 00:48:31.109 build your own tools to the same unit 00:48:31.119 --> 00:48:33.910 tests that that I have for this spec. Um 00:48:33.920 --> 00:48:36.309 so, yeah, if our iOS people are like, 00:48:36.319 --> 00:48:38.150 you know, I really don't like Rust, 00:48:38.160 --> 00:48:39.750 great. Don't don't use it. I really 00:48:39.760 --> 00:48:41.430 don't like CSS. We just don't want you 00:48:41.440 --> 00:48:43.589 to be turned off because of a tool, 00:48:43.599 -->

00:48:43.910 right? 00:48:43.920 --> 00:48:45.829 >> Um so, we'll meet you wherever you are. 00:48:45.839 --> 00:48:48.150 And for the most part um everything is 00:48:48.160 --> 00:48:49.990 in GitHub repos that they can they 00:48:50.000 --> 00:48:51.910 either reference our data or they manage 00:48:51.920 --> 00:48:54.069 it themselves in their own repo. 00:48:54.079 --> 00:48:56.069 >> Perfect. Yeah. Uh thank you for sharing 00:48:56.079 --> 00:48:58.069 that resource as well and we're again 00:48:58.079 --> 00:48:59.829 thankful that the you know this this 00:48:59.839 --> 00:49:01.750 system which is covering so many 00:49:01.760 --> 00:49:04.390 different platforms is open source 00:49:04.400 --> 00:49:06.230 largely available for people to peruse 00:49:06.240 --> 00:49:09.030 and look at. I just think probably you 00:49:09.040 --> 00:49:12.790 need something like an MCP or maybe a G 00:49:12.800 --> 00:49:15.030 to help you traverse it a little bit to 00:49:15.040 --> 00:49:16.950 know what what you need to look for in 00:49:16.960 --> 00:49:19.030 there, you know, with those those gnarly 00:49:19.040 --> 00:49:20.710 URLs. So, thank you for that. And again, 00:49:20.720 --> 00:49:22.390 I'm going to put that in the description 00:49:22.400 --> 00:49:24.870 uh when I have an opportunity. Now, 00:49:24.880 --> 00:49:27.589 >> you also uh did mention a little bit 00:49:27.599 --> 00:49:30.549 about trying to figure out evaluation, 00:49:30.559 --> 00:49:32.309 >> right? So, you're you're kind of uh 00:49:32.319 --> 00:49:35.349 trying to to to figure that out. And 00:49:35.359 --> 00:49:37.750 where are you on that? Right? Because I 00:49:37.760 --> 00:49:38.790 think a lot of people are trying to 00:49:38.800 --> 00:49:40.390 figure this out. So just curious of 00:49:40.400 --> 00:49:41.910 where you are. 00:49:41.920 --> 00:49:43.990 >> Yeah. So I'm I'm kind of of the opinion 00:49:44.000 --> 00:49:45.589 that the the the better the data 00:49:45.599 --> 00:49:46.950 structure and the better the tools for 00:49:46.960 --> 00:49:49.190 being able to allow AI to access the 00:49:49.200 --> 00:49:50.390 data in the way that you have it 00:49:50.400 --> 00:49:52.870 structured and semantically described 00:49:52.880 --> 00:49:54.710 makes it easier for it to know if it's 00:49:54.720 --> 00:49:56.710 using it well or not. And you're able to 00:49:56.720 --> 00:49:58.470 ask it and say, "Hey, how much of this 00:49:58.480 --> 00:49:59.990 did you make up? And how much of it do 00:50:00.000 --> 00:50:01.750 you have reasoning for?" 00:50:01.760 --> 00:50:03.750 >> And that's useful. I wouldn't say that 00:50:03.760 --> 00:50:06.230 it's perfect. Um, but that that's a a 00:50:06.240 --> 00:50:07.829 place to start from. So, that's a big 00:50:07.839 --> 00:50:08.950 motivation, 00:50:08.960 --> 00:50:10.870 >> a big part of my motivation for wanting 00:50:10.880 --> 00:50:14.150 to be able to um be very structured and 00:50:14.160 --> 00:50:15.750 and deliberate with the way that we 00:50:15.760 --> 00:50:17.510 describe the data. But at the end of the 00:50:17.520 --> 00:50:19.430 day, like if somebody took a screenshot 00:50:19.440 --> 00:50:21.750 of a Spectrum website or a website that 00:50:21.760 --> 00:50:23.750 uses Spectrum components or however you 00:50:23.760 --> 00:50:25.349 want to say it, they they are claiming 00:50:25.359 --> 00:50:27.990 that it is using Spectrum. um if I took 00:50:28.000 --> 00:50:29.430 a screenshot of it, I should be able to 00:50:29.440 --> 00:50:32.230 pass that to an LLM and say, "Hey, how 00:50:32.240 --> 00:50:33.990 good is this? How close is this to what 00:50:34.000 --> 00:50:37.190 we um are specifying to be in the in the 00:50:37.200 --> 00:50:40.150 spectrum uh design system?" And we are 00:50:40.160 --> 00:50:41.910 we're not there yet. And that that's 00:50:41.920 --> 00:50:43.510 part of the where I'm still interested 00:50:43.520 --> 00:50:45.430 in playing around. Um I think there 00:50:45.440 --> 00:50:46.870 might be opportunities for potentially 00:50:46.880 --> 00:50:48.549 local models or for tuning. Maybe 00:50:48.559 --> 00:50:50.069 Frontier models aren't the best place 00:50:50.079 --> 00:50:51.910 for this. Yeah. Um, that makes me a 00:50:51.920 --> 00:50:54.309 little bit sad because then like that 00:50:54.319 --> 00:50:56.150 that feels like it makes it harder for 00:50:56.160 --> 00:50:58.470 other teams to use those sorts of tools. 00:50:58.480 --> 00:51:02.069 Um, I'm I'm a very open uh public sort 00:51:02.079 --> 00:51:03.510 of person. That's the way that I've been 00:51:03.520 --> 00:51:04.950 able to work and I like to work that 00:51:04.960 --> 00:51:05.270 way. 00:51:05.280 --> 00:51:05.670 >> Yeah. 00:51:05.680 --> 00:51:07.750 >> Um, but there might be an opportunity 00:51:07.760 --> 00:51:10.470 here for um tooling there. There's a 00:51:10.480 --> 00:51:11.990 space where if somebody had a good 00:51:12.000 --> 00:51:13.109 solution to that, that might be 00:51:13.119 --> 00:51:14.150 interesting. Mhm. 00:51:14.160 --> 00:51:16.950 >> Um but again, if if if you can structure 00:51:16.960 --> 00:51:20.230 the data well, um and we can do the 00:51:20.240 --> 00:51:21.670 things that we should have been doing a 00:51:21.680 --> 00:51:23.109 long time ago, which is things like, 00:51:23.119 --> 00:51:25.349 hey, let's make lots of examples. Um 00:51:25.359 --> 00:51:27.510 let's have our designers actually try to 00:51:27.520 --> 00:51:29.990 build um a lot of these pages and make 00:51:30.000 --> 00:51:32.630 examples of not just components, but 00:51:32.640 --> 00:51:35.829 larger patterns and actual repeatable um 00:51:35.839 --> 00:51:38.069 aspects like a an app frame or a login 00:51:38.079 --> 00:51:39.270 page, like things that just about 00:51:39.280 --> 00:51:41.829 everybody needs some version of. Um, if 00:51:41.839 --> 00:51:43.990 we build more examples of these, and 00:51:44.000 -->

00:51:46.390 they don't have to be highly specific 00:51:46.400 --> 00:51:47.829 components, but the more of these sorts 00:51:47.839 --> 00:51:49.430 of examples that we can make, the easier 00:51:49.440 --> 00:51:51.670 it is for humans or for AI to be able to 00:51:51.680 --> 00:51:53.109 review them and say, "Yeah, I'm pretty 00:51:53.119 --> 00:51:55.349 close if I'm looking at these examples." 00:51:55.359 --> 00:51:57.270 Um, so yeah, we're hitting it kind of 00:51:57.280 --> 00:51:58.710 from multiple fronts, but I wouldn't say 00:51:58.720 --> 00:52:00.630 that that we've cracked it. Um, and 00:52:00.640 --> 00:52:02.230 there's still some opportunities there. 00:52:02.240 --> 00:52:03.589 >> Yeah, I think that's that's probably 00:52:03.599 --> 00:52:04.870 very fair. I mean, I think a lot of 00:52:04.880 --> 00:52:06.230 people of course are learning this. is 00:52:06.240 --> 00:52:08.470 just, you know, when when folks are out 00:52:08.480 --> 00:52:11.030 there learning, they look at the large 00:52:11.040 --> 00:52:12.870 companies. That's it's what what we've 00:52:12.880 --> 00:52:14.790 done for a very long time. Uh I mean 00:52:14.800 --> 00:52:16.390 just what you were kind of explaining 00:52:16.400 --> 00:52:18.309 about how you got involved with the 00:52:18.319 --> 00:52:19.990 community group of design tokens was 00:52:20.000 --> 00:52:21.670 basically like yeah we're going to bring 00:52:21.680 --> 00:52:23.349 a whole bunch of folks that are that are 00:52:23.359 --> 00:52:24.950 doing this at large scale and understand 00:52:24.960 --> 00:52:27.510 what they're doing and and seeing uh you 00:52:27.520 --> 00:52:30.710 know what uh what needs to be supported 00:52:30.720 --> 00:52:32.870 at this scale because you know a 00:52:32.880 --> 00:52:35.829 successful company could eventually get 00:52:35.839 --> 00:52:37.430 to that scale where they need to go 00:52:37.440 --> 00:52:38.790 ahead and solve those particular 00:52:38.800 --> 00:52:40.390 problems if they don't necessarily go to 00:52:40.400 --> 00:52:42.390 them now right I mean the the the 00:52:42.400 --> 00:52:44.390 problems of of multi-dimensional modes 00:52:44.400 --> 00:52:46.790 that Nate and I talk about. That's a 00:52:46.800 --> 00:52:51.109 very um specific problem for for just 00:52:51.119 --> 00:52:53.829 effectively large organizations uh more 00:52:53.839 --> 00:52:56.710 or less, right? So, you know, to have an 00:52:56.720 --> 00:52:59.109 answer to that is very helpful for 00:52:59.119 --> 00:53:01.190 organizations that get to that that uh 00:53:01.200 --> 00:53:03.750 that area. But for lots of other folks, 00:53:03.760 --> 00:53:05.270 I would say the majority of folks, they 00:53:05.280 --> 00:53:06.630 don't really need multi-dimensional 00:53:06.640 --> 00:53:07.990 modes. You got a light mode, you got a 00:53:08.000 --> 00:53:10.470 dark mode, and you're effectively okay. 00:53:10.480 --> 00:53:12.150 Right? And I say that with a large 00:53:12.160 --> 00:53:13.990 asterisk knowing that there's a lot more 00:53:14.000 --> 00:53:16.150 that you could be doing in that space. I 00:53:16.160 --> 00:53:18.870 did write a book about all that. But you 00:53:18.880 --> 00:53:21.109 know there's there's uh something to be 00:53:21.119 --> 00:53:22.870 looking toward for you know folks that 00:53:22.880 --> 00:53:24.470 are that are working in these large 00:53:24.480 --> 00:53:26.470 organizations and understanding you know 00:53:26.480 --> 00:53:27.990 what they're thinking about especially 00:53:28.000 --> 00:53:29.430 since they also have a lot of other 00:53:29.440 --> 00:53:31.829 resources right I mean you have some 00:53:31.839 --> 00:53:35.430 absolutely uh fantastic minds uh behind 00:53:35.440 --> 00:53:36.630 the stuff that you're doing yourself 00:53:36.640 --> 00:53:39.829 included certainly um that you know want 00:53:39.839 --> 00:53:42.150 to know what what uh what what people 00:53:42.160 --> 00:53:44.790 are thinking out there for for their uh 00:53:44.800 --> 00:53:47.212 you know for for their own purposes you 00:53:47.222 --> 00:53:47.589 >> [snorts] 00:53:47.599 --> 00:53:49.510 >> Yeah. And and that was an area of like 00:53:49.520 --> 00:53:50.950 the frustration that I had with 00:53:50.960 --> 00:53:54.150 something like the W3C spec um was the 00:53:54.160 --> 00:53:55.750 idea that like 00:53:55.760 --> 00:53:59.030 >> at first it was and I don't fault them. 00:53:59.040 --> 00:54:00.069 Um because they're trying to be 00:54:00.079 --> 00:54:02.549 everything to everybody. But where where 00:54:02.559 --> 00:54:04.150 I find frustration is when people are 00:54:04.160 --> 00:54:06.069 like, "Yeah, but most people don't need 00:54:06.079 --> 00:54:08.630 multimo modal." Right. Like except for 00:54:08.640 --> 00:54:11.030 the fact that like how many websites or 00:54:11.040 --> 00:54:12.390 web apps would you be comfortable with 00:54:12.400 --> 00:54:13.750 if it wasn't responsive? 00:54:13.760 --> 00:54:15.910 >> Yeah. Like we when responsive came out 00:54:15.920 --> 00:54:17.109 there was a lot of people like I don't 00:54:17.119 --> 00:54:18.790 want to invest into making my website 00:54:18.800 --> 00:54:20.230 responsive. That's a lot of time and 00:54:20.240 --> 00:54:22.150 energy and the majority of my people are 00:54:22.160 --> 00:54:25.349 not using uh web apps um or I should say 00:54:25.359 --> 00:54:26.069 mobile phones 00:54:26.079 --> 00:54:27.990 >> and that's really weird to me too cuz we 00:54:28.000 --> 00:54:30.069 used to make two different websites. We 00:54:30.079 --> 00:54:31.750 used to make a mobile and a desktop and 00:54:31.760 --> 00:54:34.950 how could you possibly think that making 00:54:34.960 --> 00:54:37.190 two uh is somehow better than making 00:54:37.200 --> 00:54:38.069 one, 00:54:38.079 --> 00:54:38.950 >> right? [laughter] 00:54:38.960 --> 00:54:40.630 And so just the idea that like 00:54:40.640 --> 00:54:42.950

responsive and then light and dark, it 00:54:42.960 --> 00:54:44.630 it's not a requirement. You don't have 00:54:44.640 --> 00:54:47.270 to to have a light and dark uh theme, 00:54:47.280 --> 00:54:49.190 but it's becoming more of anc 00:54:49.200 --> 00:54:49.990 expectation. 00:54:50.000 --> 00:54:50.390 >> Yeah. 00:54:50.400 --> 00:54:53.670 >> Um and so now just those two um it's 00:54:53.680 --> 00:54:56.710 very quick to to suddenly explode 00:54:56.720 --> 00:54:59.750 because what you end up with is um if 00:54:59.760 --> 00:55:02.230 you're creating a a data set for every 00:55:02.240 --> 00:55:03.750 combination of those 00:55:03.760 --> 00:55:05.829 >> anytime you at one point Spectrum had 00:55:05.839 --> 00:55:08.150 light, lightest, dark, and darkest. Ooh. 00:55:08.160 --> 00:55:10.390 >> Um, and and that's too many for most 00:55:10.400 --> 00:55:11.990 people, but I would say most people 00:55:12.000 --> 00:55:13.670 should have light and dark and high 00:55:13.680 --> 00:55:16.150 contrast mode. Like that that's an 00:55:16.160 --> 00:55:18.630 accessibility question. Um, and those 00:55:18.640 --> 00:55:19.990 are handled differently on different 00:55:20.000 --> 00:55:22.390 operating systems, which is great. 00:55:22.400 --> 00:55:22.950 >> Super fun. 00:55:22.960 --> 00:55:25.750 >> Um, yeah. And then you've got the the 00:55:25.760 --> 00:55:27.910 it's not just web and mobile, like what 00:55:27.920 --> 00:55:29.589 are you going to specify when we do 00:55:29.599 --> 00:55:31.990 responsive? You now want it to be fully 00:55:32.000 --> 00:55:34.069 responsive across any size, right? 00:55:34.079 --> 00:55:38.150 >> Up to, you know, within reason. Um, so 00:55:38.160 --> 00:55:40.150 now your multimodal stuff, if you're if 00:55:40.160 --> 00:55:41.829 you're building a data set that's every 00:55:41.839 --> 00:55:43.589 single combination of those things, it's 00:55:43.599 --> 00:55:44.309 going to explode, 00:55:44.319 --> 00:55:44.630 >> right? 00:55:44.640 --> 00:55:46.390 >> So if you're not figuring out how you're 00:55:46.400 --> 00:55:48.390 going to structure that data, and then 00:55:48.400 --> 00:55:51.349 again, I don't think this also 00:55:51.359 --> 00:55:54.549 frustrates me. I worry that a lot of 00:55:54.559 --> 00:55:56.950 people are like and and I don't know if 00:55:56.960 --> 00:55:59.109 it's a cultural thing, but it's very 00:55:59.119 --> 00:56:01.829 common where you'll have your your your 00:56:01.839 --> 00:56:03.270 web application 00:56:03.280 --> 00:56:04.630 >> and then you'll have your iOS 00:56:04.640 --> 00:56:07.109 application and and those two teams 00:56:07.119 --> 00:56:08.309 don't talk. 00:56:08.319 --> 00:56:11.109 >> Um, and if they do, it's just tell us 00:56:11.119 --> 00:56:12.710 what you want it to look like and we'll 00:56:12.720 --> 00:56:13.829 do it the right way. 00:56:13.839 --> 00:56:16.069 >> But if I was like, "Hey, I want you to 00:56:16.079 --> 00:56:17.670 we're

already defining all these colors 00:56:17.680 --> 00:56:19.910 and spacing and things. Um, could you 00:56:19.920 --> 00:56:20.710 use any of it?" 00:56:20.720 --> 00:56:22.870 >> Yeah. Sometimes the design uh iOS 00:56:22.880 --> 00:56:24.549 designers or the iOS engineers and I'm 00:56:24.559 --> 00:56:26.069 not talking specifically about spectrum, 00:56:26.079 --> 00:56:28.150 right? But like culturally uh in the 00:56:28.160 --> 00:56:29.349 industries, it's very common that 00:56:29.359 --> 00:56:31.430 they'll be like, "No, just give us a 00:56:31.440 --> 00:56:32.870 give us roughly what you want. We'll 00:56:32.880 --> 00:56:34.950 make it look the way that we'll do it 00:56:34.960 --> 00:56:36.470 the right way. We don't need to be 00:56:36.480 --> 00:56:38.150 bringing your data in." 00:56:38.160 --> 00:56:40.630 >> Um so Spectrum is is in a very fortunate 00:56:40.640 --> 00:56:41.750 place where I feel like we're we're 00:56:41.760 --> 00:56:43.510 trying to fix some of that problem, but 00:56:43.520 --> 00:56:46.069 it's very common across all of your um 00:56:46.079 --> 00:56:48.150 organizations that nobody's building web 00:56:48.160 --> 00:56:51.109 apps only anymore. I would say not many 00:56:51.119 --> 00:56:52.950 people are building just web apps. 00:56:52.960 --> 00:56:54.789 >> Um you're building for so many things 00:56:54.799 --> 00:56:56.309 because you're trying to hit everybody 00:56:56.319 --> 00:56:58.870 in every situation whatever is best for 00:56:58.880 --> 00:56:59.270 them. 00:56:59.280 --> 00:56:59.510 >> Yeah. 00:56:59.520 --> 00:57:01.510 >> That said, we don't need mobile apps for 00:57:01.520 --> 00:57:03.910 desk for conferences anymore. Don't 00:57:03.920 --> 00:57:05.430 build a don't build a mobile app for 00:57:05.440 --> 00:57:07.430 every experience. [laughter] But yeah, 00:57:07.440 --> 00:57:08.069 other than that, 00:57:08.079 --> 00:57:10.230 >> yeah, going to keep these mobile apps to 00:57:10.240 --> 00:57:12.150 a a required minimum, please. Goodness 00:57:12.160 --> 00:57:14.069 gracious. There is definitely uh too 00:57:14.079 --> 00:57:16.230 many of these apps out here cuz yeah I 00:57:16.240 --> 00:57:17.829 mean from from my perspective I would 00:57:17.839 --> 00:57:20.950 much prefer if you can do it as a web 00:57:20.960 --> 00:57:23.030 app for up until a point right cuz 00:57:23.040 --> 00:57:24.870 there's there's certain things and 00:57:24.880 --> 00:57:26.390 granted the web is doing incredible 00:57:26.400 --> 00:57:27.589 these days. the amount of things that 00:57:27.599 --> 00:57:29.910 you can do with the web is really 00:57:29.920 --> 00:57:31.349 rivaling anything that you might be able 00:57:31.359 --> 00:57:34.230 to do with native. But some people 00:57:34.240 --> 00:57:36.710 >> prefer a native experience and and and 00:57:36.720 --> 00:57:41.109 in some cases too uh for teams that 00:57:41.119 --> 00:57:43.190 decide that they want to go full native 00:57:43.200

--> 00:57:45.030 where everything is is very specifically 00:57:45.040 --> 00:57:48.150 iOS. That's a a usability choice that 00:57:48.160 --> 00:57:49.750 basically aligns with the expectations 00:57:49.760 --> 00:57:51.190 of those users. Right? If you have a 00:57:51.200 --> 00:57:52.710 toggle 00:57:52.720 --> 00:57:57.030 for from the iOS uh uh um library, the 00:57:57.040 --> 00:57:58.710 user is going to absolutely know how to 00:57:58.720 --> 00:58:00.069 use that toggle, right? Because they've 00:58:00.079 --> 00:58:01.430 used it in all the other apps that have 00:58:01.440 --> 00:58:03.430 that toggle. As soon as you introduce 00:58:03.440 --> 00:58:06.150 some cute toggle, you are potentially 00:58:06.160 --> 00:58:08.230 providing friction to that interface 00:58:08.240 --> 00:58:09.510 where the user doesn't want to use it 00:58:09.520 --> 00:58:10.710 because they don't want to learn the new 00:58:10.720 --> 00:58:13.109 toggle even if it's seems obvious, 00:58:13.119 --> 00:58:14.470 right? So there's there's definitely 00:58:14.480 --> 00:58:16.710 considerations in there when you are 00:58:16.720 --> 00:58:18.230 effectively saying, "Hey, you know, 00:58:18.240 --> 00:58:19.829 team, we need to add a toggle here for 00:58:19.839 --> 00:58:21.910 you to turn on, you know, some 00:58:21.920 --> 00:58:24.069 particular setting and handing it over 00:58:24.079 --> 00:58:26.630 to a team that's just meant to do it in 00:58:26.640 --> 00:58:29.349 the way that they've done it versus 00:58:29.359 --> 00:58:31.030 saying, "Hey, can we all align on the 00:58:31.040 --> 00:58:33.349 same way?" That's a very like 00:58:33.359 --> 00:58:34.870 interesting because I see both sides of 00:58:34.880 --> 00:58:36.870 that, right? I see both sides of saying 00:58:36.880 --> 00:58:39.430 hey let's all get on the same page but 00:58:39.440 --> 00:58:42.390 also hey let's all 00:58:42.400 --> 00:58:44.630 >> um align to to our audience right 00:58:44.640 --> 00:58:46.470 whatever users that are that are end 00:58:46.480 --> 00:58:48.390 users that we need to uh you know reduce 00:58:48.400 --> 00:58:49.670 the friction on it so they can achieve 00:58:49.680 --> 00:58:51.270 their goals you know 00:58:51.280 --> 00:58:53.510 >> so right into what I was talking about 00:58:53.520 --> 00:58:54.789 earlier we should get back to which was 00:58:54.799 --> 00:58:56.870 the the the multiplatform 00:58:56.880 --> 00:58:58.950 >> we have it specified in a way and we're 00:58:58.960 --> 00:59:00.549 still working through what this looks 00:59:00.559 --> 00:59:03.430 like everything's an evolving um uh 00:59:03.440 --> 00:59:06.549 solution but The way that our our our 00:59:06.559 --> 00:59:09.349 multiplatform is set up within this spec 00:59:09.359 --> 00:59:11.910 is that you define foundation data 00:59:11.920 --> 00:59:13.510 hopefully data that's usable by 00:59:13.520 --> 00:59:15.190 everybody but what that definition of 00:59:15.200 --> 00:59:17.589

what that data is that you're again 00:59:17.599 --> 00:59:18.950 you're going to be changing it based on 00:59:18.960 --> 00:59:21.829 needs uh and then each implementation 00:59:21.839 --> 00:59:23.670 not each product right now we're just 00:59:23.680 --> 00:59:26.150 talking about each platform so spectrum 00:59:26.160 --> 00:59:30.549 web components uh react spectrum iOS uh 00:59:30.559 --> 00:59:33.910 Android they have uh a platform manifest 00:59:33.920 --> 00:59:35.190 that describes describes what data 00:59:35.200 --> 00:59:37.109 they're bringing in and how they're 00:59:37.119 --> 00:59:39.109 changing it. So, what they need to bring 00:59:39.119 --> 00:59:41.030 in, what they need to filter out because 00:59:41.040 --> 00:59:42.870 it's not useful to them. For example, if 00:59:42.880 --> 00:59:44.950 you're doing something that's just iOS 00:59:44.960 --> 00:59:47.190 for just the the phone, you don't need 00:59:47.200 --> 00:59:49.990 desktop sizing. Um, but we also have the 00:59:50.000 --> 00:59:51.829 the the the problem that you're going to 00:59:51.839 --> 00:59:54.069 need uh points instead of pixels. And 00:59:54.079 --> 00:59:55.990 so, being able to do conversions and 00:59:56.000 --> 00:59:57.750 things like that, that's all handled in 00:59:57.760 --> 00:59:59.430 this platform manifest. And the goal 00:59:59.440 --> 01:00:02.950 here isn't to control what they change. 01:00:02.960 --> 01:00:05.190 Um I'm very much of the opinion and and 01:00:05.200 --> 01:00:08.390 this is again um opinion of G but 01:00:08.400 --> 01:00:11.190 governance inside of a design system 01:00:11.200 --> 01:00:12.950 anytime you try to lock things down and 01:00:12.960 --> 01:00:15.589 make it hard for a team a product uh 01:00:15.599 --> 01:00:17.829 whatever to do something they'll just 01:00:17.839 --> 01:00:19.670 start circumnavigating your solution 01:00:19.680 --> 01:00:22.789 they'll they'll find a way. Um and so 01:00:22.799 --> 01:00:25.510 the instead if we give them a tool that 01:00:25.520 --> 01:00:28.230 says you can manipulate the data if you 01:00:28.240 --> 01:00:29.510 do it through this way we also have 01:00:29.520 --> 01:00:31.270 tooling for you. So you can still export 01:00:31.280 --> 01:00:34.390 your uh Figma variables. Um you can do 01:00:34.400 --> 01:00:36.710 things like being able to generate the 01:00:36.720 --> 01:00:39.349 DTCG format out of this. Like this is 01:00:39.359 --> 01:00:43.109 going to it really becomes um like a 01:00:43.119 --> 01:00:45.270 non-destructive filter um where you're 01:00:45.280 --> 01:00:47.589 describing how you're changing the data 01:00:47.599 --> 01:00:49.510 before you go to your implementation. 01:00:49.520 --> 01:00:51.109 And if you do it this way, everyone's 01:00:51.119 --> 01:00:52.950 doing it in a standardized way that then 01:00:52.960 --> 01:00:54.870 I can go and take a snapshot and and and 01:00:54.880 --> 01:00:56.630 say, "Hey, tell me how all these 01:00:56.640 --> 01:00:57.910 different platforms are using these 01:00:57.920 --> 01:00:59.670 things." And then I I'm I'm able to go 01:00:59.680 --> 01:01:01.349 back to my designers and be like, I see 01:01:01.359 --> 01:01:02.950 that you keep like describing these 01:01:02.960 --> 01:01:05.349 tokens like or Figma variables or 01:01:05.359 --> 01:01:06.470 whatever you want to say is you're like, 01:01:06.480 --> 01:01:08.710 you keep saying that um defining things 01:01:08.720 --> 01:01:10.230 like the corner radius for all these 01:01:10.240 --> 01:01:11.750 different use cases. Nobody's using 01:01:11.760 --> 01:01:12.870 these ones. 01:01:12.880 --> 01:01:16.230 >> And so why do we need to change um do we 01:01:16.240 --> 01:01:17.829 need to get them to update or do we need 01:01:17.839 --> 01:01:19.270 to change? like you're able to get more 01:01:19.280 --> 01:01:21.510 insight into how everything is being 01:01:21.520 --> 01:01:23.589 used. So that's what we're working 01:01:23.599 --> 01:01:26.710 towards. Um but it it is it is a problem 01:01:26.720 --> 01:01:28.549 and it's possible that down the line 01:01:28.559 --> 01:01:30.230 there might be a benefit to individual 01:01:30.240 --> 01:01:32.549 products being able to do that as well. 01:01:32.559 --> 01:01:34.470 Um and they'd be able to manage their 01:01:34.480 --> 01:01:36.870 own set of very specific data that it 01:01:36.880 --> 01:01:41.030 again it's it's a cascade. So they're um 01:01:41.040 --> 01:01:44.069 they are able to import and and extend 01:01:44.079 --> 01:01:46.870 um or to manipulate or modify. So, we're 01:01:46.880 --> 01:01:49.030 trying to do that. We'll see how well it 01:01:49.040 --> 01:01:50.630 works. There's still a lot of cultural 01:01:50.640 --> 01:01:52.470 and people stuff we got to work through. 01:01:52.480 --> 01:01:54.470 >> Oh, yes. Yeah. Yeah. In fact, that's one 01:01:54.480 --> 01:01:55.990 of the things that I'm focusing on in 01:01:56.000 --> 01:01:57.750 particular, which is related to that as 01:01:57.760 --> 01:01:59.910 well. But as much as I would love to 01:01:59.920 --> 01:02:01.510 talk about that, we are unfortunately 01:02:01.520 --> 01:02:04.309 out of time uh for today. But I'll have 01:02:04.319 --> 01:02:05.670 to get you on the show and of course 01:02:05.680 --> 01:02:07.190 with our our computers restarted 01:02:07.200 --> 01:02:09.430 properly, I guess uh you know that time. 01:02:09.440 --> 01:02:11.190 Um, but Garl, before you go, uh, 01:02:11.200 --> 01:02:12.789 anything that you'd like to plug for the 01:02:12.799 --> 01:02:14.309 folks out there at home for them to take 01:02:14.319 --> 01:02:15.589 a peek at some of your things that 01:02:15.599 --> 01:02:18.309 you're working on or or Spectrum itself? 01:02:18.319 --> 01:02:21.030 >> Uh, just Spectrum and and the spec. Um, 01:02:21.040 --> 01:02:22.470 the spec is not being built, like I 01:02:22.480 --> 01:02:24.950 said, for anybody else. But, uh, I love 01:02:24.960 --> 01:02:26.309 working with smart people. So, any 01:02:26.319 --> 01:02:28.789 anytime anybody has um, and and I'd love 01:02:28.799 --> 01:02:30.309 to hear how people are trying to fix 01:02:30.319 --> 01:02:31.829 problems. So, if you are ever running 01:02:31.839 --> 01:02:33.829 into like if you found a way to get AI 01:02:33.839 --> 01:02:35.589 to evaluate things and you feel 01:02:35.599 --> 01:02:37.270 confident that it's it's been useful or 01:02:37.280 --> 01:02:40.710 you're finding any hints or tips, um I'm 01:02:40.720 --> 01:02:44.470 on everything as G DB, D as in dog, B as 01:02:44.480 --> 01:02:46.950 in boy. Um so you can you can ping me on 01:02:46.960 --> 01:02:50.150 any of the stuff. Um but yeah, nothing 01:02:50.160 --> 01:02:52.150 really to to plug other than that. 01:02:52.160 --> 01:02:54.390 >> Okay, super. Well, G, thanks so much for 01:02:54.400 --> 01:02:55.750 being on the show. Really appreciate it. 01:02:55.760 --> 01:02:57.430 And again, I I you know, sorry we didn't 01:02:57.440 --> 01:02:59.829 connect so nicely earlier, but uh we'll 01:02:59.839 --> 01:03:01.430 have an hopefully another opportunity at 01:03:01.440 --> 01:03:03.349 some point in the future where we can uh 01:03:03.359 --> 01:03:04.630 you know, really dive into some of the 01:03:04.640 --> 01:03:06.150 more things like maybe you know, further 01:03:06.160 --> 01:03:08.230 on the evaluation piece would be great. 01:03:08.240 --> 01:03:09.510 Um but yeah, stick around for a little 01:03:09.520 --> 01:03:10.950 bit while I close out the show over 01:03:10.960 --> 01:03:13.109 here. Uh but thank you for watching the 01:03:13.119 --> 01:03:14.710 show. Uh before you go, please help out 01:03:14.720 --> 01:03:16.950 the show by uh smashing that like and 01:03:16.960 --> 01:03:18.150 subscribe button just to get notified 01:03:18.160 --> 01:03:20.549 next time we go live. And feel free to 01:03:20.559 --> 01:03:21.829 continue the conversation on the 01:03:21.839 --> 01:03:24.069 official Design Systems House Discord by 01:03:24.079 --> 01:03:25.589 going to discord.dshouse. at DSA house. 01:03:25.599 --> 01:03:27.109 There's on the bottom there. Um, play 01:03:27.119 --> 01:03:28.789 nice in those comments and I'll see you 01:03:28.799 --> 01:03:36.718 in the internet. Bye. 01:03:36.728 --> 01:03:43.268 [music] 01:03:55.724 --> 01:03:57.744 >> [music]