WEBVTT 00:00.000 --> 00:14.520 Yeah, thank you. Hello, everyone. I don't know these audience very well, so I'm just 00:14.520 --> 00:23.720 going to ask a couple questions from you. How many of you are Katie users here? Okay, by the 00:23.720 --> 00:31.360 end of this talk, how many people are going to be Katie users? That's the question, that's 00:31.360 --> 00:41.080 the question. Okay, cool. So, I'm Andy Bitz and I'm a designer for the Katie ecosystem, 00:41.080 --> 00:47.200 I guess, but mostly for plasma, for the plasma desktop. And I've been with the team for 00:47.200 --> 00:59.360 about, yeah, 25 years. And I'm originally from Chile, but I live in the United States. And 00:59.360 --> 01:06.360 yeah, that's what I do. Oh, my day gel though, I'm a quality assurance manager, so I do something 01:06.360 --> 01:11.840 completely different. I'm going to use my phone a little bit, because I have my notes here, 01:11.840 --> 01:19.280 and I just want to hit some points, and I don't want to forget. So, I'm sure a few of you 01:19.280 --> 01:27.200 are familiar with design systems. Yes, no. Yeah. Okay, cool. Design systems is basically nothing 01:27.200 --> 01:34.400 more than basically your UI encode, but expressed in graphical means, right, for people like 01:34.400 --> 01:46.400 me who don't understand code very well. So, we look into design systems, because most of 01:46.400 --> 01:54.240 the times, our work is kind of random, and very variety. And, you know, if you have 10 01:54.240 --> 02:00.000 people in a room, there'll be 10 different designs, right? And so, you have to find a way 02:00.080 --> 02:07.360 to bring everything together, but it's not just graphics. I think one other thing that is 02:07.360 --> 02:14.160 very important for design systems is to have an ideological foundation about what you want to do. 02:15.360 --> 02:21.760 A lot of people, so in this happens often in open source, right, we code first, and we think 02:22.640 --> 02:31.440 UI later, and we think users, much later, right, or sometimes we think that maybe the things 02:31.440 --> 02:36.880 that we are assumptions are correct, right? We think, for example, well, you know, if I, 02:37.760 --> 02:42.000 my users want to have, I don't know, an application that can play music, 02:43.600 --> 02:49.600 therefore, anything that looks like a play button will be good, right? You have to figure it. 02:50.560 --> 02:57.280 So, and so, these assumptions sometimes can play into the way we think, and as, you know, 02:57.280 --> 03:04.000 you just saw in the previous talk, sometimes you face a reality of, I build this giant thing, 03:04.560 --> 03:11.120 and it's amazing for like what we think, it's amazing, but then you put that to regular people, 03:12.000 --> 03:19.200 and that teaches you a lesson, right? Sometimes it's hard to come back from that, but the 03:19.200 --> 03:26.400 design systems aim to organize all that thought, aim to basically express graphically what your 03:26.400 --> 03:37.920 users need, and you basically have a much better time translating your work to actual code. 03:38.240 --> 03:44.720 That is actually what's been for me, one of my biggest issues, like I can make graphics all day, 03:44.720 --> 03:52.240 but I can't code the way that my peers do, the plus, my team, and so, trust me, I've tried, 03:52.240 --> 03:58.800 and it's not that easy, and it could also be them, because they make an amazing work. But the 03:58.800 --> 04:05.360 thing is that one of the biggest limitations in my ability to be successful with the plus, 04:05.360 --> 04:18.000 my team has been transferring graphics into code. So, we thought also, and I think this is 04:18.000 --> 04:28.080 pretty real, that you can automate a lot of stuff with design systems, right? For example, 04:28.080 --> 04:36.400 I don't know if you all know, but in KDE, well, plasma, we have the breeze theme, yeah? You get it? 04:36.400 --> 04:42.720 Okay, cool, we're talking about the same thing. And in the past, for example, many years ago, 04:42.720 --> 04:53.280 we built our current icon system, and the way it works, code wise is perfect, but graphics wise, 04:53.280 --> 04:59.680 it's not. In fact, when I started working on design systems for plasma, that was one of the 04:59.680 --> 05:05.360 biggest challenges. Our icons are just everywhere, and they don't have any kind of, you know, 05:06.800 --> 05:13.520 sort of like visual consistency, and not only that, technical consistency. So, in the application 05:13.520 --> 05:21.280 that they were built back in the day, there is no sharing of information between one or the other 05:21.360 --> 05:27.520 icon, although they may look very similar. And so, design systems are able for help you create patterns, 05:28.480 --> 05:35.680 componentize your patterns, and then apply very quickly, right? So, one of the things that we did 05:35.680 --> 05:43.840 in plasma, for example, is we created icons that have little like variant-oriented designs. So, 05:43.840 --> 05:50.720 basically, they vary the meaning of the icon, and we placed them, usually at the bottom, right, 05:50.800 --> 05:56.000 of the icon. Well, all of that you can componentize, right? If many icons use the plus sign, 05:56.000 --> 06:03.280 the minus sign, the acube, a circle, whatever it may be, you can just make a component that actually 06:03.280 --> 06:09.360 cuts the icon in that corner and places whatever you want. And we can do that very quickly, right? 06:10.720 --> 06:16.640 So, one of the cool things, actually, that I want to try, and we're going to talk about this 06:16.640 --> 06:25.920 later in PEMPOT, is I wanted to basically have a way to export my work and show it to developers in 06:25.920 --> 06:33.360 an easier way. Right now, I don't have that, but the people from PEMPOT have been working on 06:33.360 --> 06:41.440 implementing an MCP server for the PEMPOT application, and you can actually follow some steps to 06:41.440 --> 06:49.200 export your work into a website builder thing called Storybook, and others can actually 06:49.200 --> 06:54.400 produce your design system that way. Developers, particularly, they just see the values that they're 06:54.400 --> 07:00.720 looking for since it's all coded or in the application. So, this idea of automation in design systems 07:00.720 --> 07:06.880 is very important. It can really speed up the work, and not only that it can make one designer feel 07:06.960 --> 07:15.440 like Superman, right? Because you can do so much more with a smaller team and repeatable sustainable 07:15.440 --> 07:28.640 is super cool. Now, the issue is, I think, and I hinted at this earlier, that we have an 07:28.640 --> 07:36.880 environment in open source that is generally code first. Code first, I mean, I'm going to help you 07:36.880 --> 07:44.400 process this idea. Code first is should be code last, okay? So, code last, why? Because 07:45.200 --> 07:50.800 when the designer, the cost is high, right? When developers are working on a giant, 07:51.360 --> 07:58.480 you know, application or feature, whatever it may be, usually the challenge is mostly about 07:59.520 --> 08:06.080 executing the idea, executing, you know, the feature that you really want to work on. 08:07.440 --> 08:15.440 And then, you push that onto some, I don't know, let's just say, I get help ripple where your 08:15.520 --> 08:22.080 application can be, you know, reviewed by an entity, in our case, it's Plasma, right? 08:23.360 --> 08:30.400 And the comments come back down to you about how you, UI, doesn't follow certain guidelines, 08:30.400 --> 08:38.480 how your labels are not right, how, you know, the placement is weird, how, you know, sometimes 08:38.560 --> 08:45.680 something that I do, I try to tell people about, you know, behavioral patterns that regular 08:45.680 --> 08:52.480 humans have, and these are universal generally. So, and we say, okay, well, users tend to go to 08:52.480 --> 09:01.600 want to go faster, they want to read less, they users want to, you know, they prefer choices, 09:01.680 --> 09:06.320 but choices are a powerful rather than thousand choices, right? So, 09:08.720 --> 09:14.000 and then the developers confronted with this idea, and then you think, oh, gee, I don't want to 09:14.000 --> 09:20.960 do any of this, this sucks, I don't want to code anything, I do this application, sometimes I've seen 09:20.960 --> 09:28.400 it too, like people get burned out because the UI becomes such a problem to you as developers that, 09:28.480 --> 09:32.320 you know, you just feel like, oh, gee, I mean, all I wanted to do is just develop a feature, 09:32.320 --> 09:40.480 I'm done, like, this is not worth it, right? And so, in my mind, I think, at least in Plasma, 09:40.480 --> 09:48.800 it's not always possible, but I feel like with a design system backing up or work, it may be 09:48.800 --> 09:55.840 much easier for designers in our group to connect with our developers and say, what is this 09:55.840 --> 10:02.400 idea that you want to work on? Let's build it in an inexpensive way, right, man hours, 10:04.720 --> 10:11.840 not coding, and this is, you know, you can destroy graphics all day, but you can't destroy an apple 10:11.840 --> 10:19.600 day, right? And so, we can work on the graphics first and get to a conclusion on what you need, 10:19.600 --> 10:25.120 and then move on to the actual coding, and might actually make it much easier for you to code, 10:25.200 --> 10:30.480 because now you have a plan, right, when you don't have a plan, you work way too much. 10:32.880 --> 10:40.880 So, another issue that we see in the landscape is that graphics is not a focus of open source, 10:42.720 --> 10:49.600 I'm sorry if I'm saying that, and there are some sensitivities here, but it seems to be that Linux 10:49.600 --> 10:55.120 in general, Sanica system is geared towards, you know, high demand type of workflows. 10:56.960 --> 11:04.480 But we all want the year of the Linux desktop, right? So, we are always looking into ways that we can 11:04.480 --> 11:10.320 bring this type of technology to just regular people, everyday people that can use this. 11:10.960 --> 11:16.800 I can say that maybe more of the United States, that it's the situation, I know that in Europe, a lot of 11:16.800 --> 11:24.160 people actually live and breathe in open source all day, so that's fantastic, but in my landscape, 11:24.160 --> 11:33.920 it doesn't seem that way. So, I think that design systems have the ability to connect a lot of 11:37.760 --> 11:44.400 basically bridge the gap with this problem of code first and working with 11:47.200 --> 11:55.600 the design system, sorry. All right, so cool. Now, let's talk about plasma specifically. 11:56.720 --> 12:01.920 So, when we were looking at some of the applications that we wanted to use for this, 12:03.200 --> 12:08.880 in fact, we didn't really start thinking about building a design system from the get go. We were working 12:08.880 --> 12:13.840 on other graphics, and that led us to work on a design system after. 12:14.560 --> 12:21.760 But the landscape is also a bit lacking, right? We have things like Figma, and there were other 12:21.760 --> 12:28.560 applications like Linux CEO or Akira that kind of tried to do similar things to what Figma is doing. 12:28.560 --> 12:36.000 And then, of course, Bempot came along, and they all have their strengths and weaknesses, right? Figma 12:36.000 --> 12:43.040 is a good application, but it's a paid application, and it's diving into this world where 12:43.360 --> 12:47.680 they're locking up, or they're developing new features, and they're all locked. And so, 12:47.680 --> 12:57.280 your basic plan no longer affords you anything. So, then, for example, other applications like 12:57.280 --> 13:04.080 Linux, or Akira, they just sort of got a good start, but then they sort of mellow it out, and from 13:04.080 --> 13:15.920 what I can tell they're not being developed very much. And then we landed on Pempot, which basically 13:15.920 --> 13:25.680 has most of what we need, if not all in some aspects. So, that's the tool we chose. 13:26.480 --> 13:32.560 We started in Figma, but now so far we have migrator, all of our graphical assets into Pempot. 13:34.400 --> 13:42.480 Now, another problem that I think we have in the KDE Plasma team is that 13:44.720 --> 13:52.640 I can say that maybe we have like true graphic designers, it's probably a very small number, 13:52.640 --> 13:59.440 like maybe three or four people in our group, whereas we have like a 90% coverage of developer work, 13:59.680 --> 14:05.360 right, and at a developer. So, that's a big thing, a big mountain to climb, especially when 14:05.360 --> 14:13.200 you want to talk about, you know, how your development needs to go. Not everyone takes that very 14:13.200 --> 14:21.440 easily, but what that means also is, for example, in Plasma, we generally spend a huge effort 14:21.440 --> 14:29.680 to just get off the ground with code. And then, generally, because of our geography, I guess, 14:29.680 --> 14:41.200 in our team, it's hard for us to basically bridge the gap, because in Plasma, I don't know if 14:41.200 --> 14:48.000 you know, but we have like more than four different frameworks that we use. And so, generally, 14:48.080 --> 14:55.200 our developers tend to code multiple times so that the same application looks the same in different 14:55.200 --> 15:01.600 frameworks. And of course, as you know, not all frameworks are created equal, so you may have 15:01.600 --> 15:05.120 something that looks really good in KDE Plasma, but looks terrible in KDE Plasma, right, 15:06.160 --> 15:11.280 and you have to make it work. So what, at the end of the day, what that amounts to is that there 15:11.360 --> 15:22.880 are developers who are spent a great chunk of time, just coding. And that in itself makes us 15:22.880 --> 15:30.880 basically develop smaller features, just smaller changes for the public, and we can't scale. 15:31.760 --> 15:38.480 So, the scientists actually have the ability for you to sort of remove the UI aspect and the UX 15:38.480 --> 15:45.920 aspect away from developers that they focus on coding. So, that's generally the gap, and 15:45.920 --> 15:53.120 we were talking about some of the applications that we're working on. But next is our strategy. 15:53.120 --> 16:00.560 So, what is our thing? We're going to, we started by making icons, like I mentioned before, 16:01.120 --> 16:05.760 we actually don't use a standard 24 pixel icon as our base, we used 22. 16:06.720 --> 16:17.040 And that's probably a sin in the graphic world. So, we decided, so somebody asked me if I could 16:17.040 --> 16:24.480 create 24 pixel icons to up the level of our 22 pixel, and just move them out of there, 16:24.480 --> 16:30.320 because they're not divisible by eight very well. And so, I started doing that very quickly, I realized, 16:30.320 --> 16:36.800 hey, the base of all these icons is not great. You know, we should do something much bigger than just, 16:36.800 --> 16:43.920 you know, make 24 pixel icons. So, what I did is I redesigned all of them. So, I was like, 16:43.920 --> 16:51.360 let's just toss it all out and just start over. So, we did that, and not only that we created, 16:51.360 --> 16:56.560 basically, that's where the system started creeping in, because we started making icons of 16:56.560 --> 17:01.120 where we're repeatable. So, with just small variations, I was like, I just need to go faster. 17:01.120 --> 17:07.360 So, I started making icons different components, and from then on, we made the jump to an actual 17:07.360 --> 17:14.720 design system. So, our icons are done mostly. I'm finishing application icons, and those are the 17:14.720 --> 17:24.320 pretty ones, right, that you see mostly on our taskbar, on our panel. And I'm also, and then we started 17:24.400 --> 17:30.080 building just basically the main things that the power of design system. Typography, color, 17:31.920 --> 17:40.320 shadows, focus rings, all these stuff. Typography, did I say that? And then we moved on to the 17:40.320 --> 17:46.560 next layer, which is asset creation. So, we built buttons, progress bars, scroll bars, 17:46.960 --> 17:59.040 drop-downs, text fields, checkboxes, radio buttons, all of that, with the power that by tokens. 18:00.800 --> 18:11.600 So, super cool. And, like I said, we ended up moving into pinpot, and now we have a more 18:11.600 --> 18:16.960 federated location where more designers can go into. I can provide access as well. I created 18:16.960 --> 18:22.560 a repo where all of these assets are posted, and you may be thinking that I was building 18:22.560 --> 18:28.320 breeze, but actually we're building a new system that looks different than breeze, and it's called 18:28.320 --> 18:38.560 ocean. So, if you would like to see some of that, you're welcome to check out the visual design 18:38.560 --> 18:48.640 system, or just my repo, just go to invent. The kiri.org slash A&Di, T-O-S-A-N, and D-To-S-N. Okay, A&Di, T-O-S-A-N. 18:49.360 --> 18:57.040 And you'll get an early preview of our icon. I'm new icon style, our new typography, 18:58.480 --> 19:07.680 our new plasma style, and our colors. So, take a look. Now, I will caveat that by saying that 19:09.520 --> 19:15.840 all of that is applied into breeze, and breeze does not look like ocean. So, take it with a grain of salt, 19:15.840 --> 19:24.800 but at least you can see some of our icons. So, all of that leads us to where we are now, 19:25.840 --> 19:33.200 and we're in a much more robust location. We're building a design system that is soon to be applied. 19:33.200 --> 19:38.960 I don't know if you've heard also, but in plasma, we're working on a new engine, a coding engine, 19:38.960 --> 19:49.680 called union. Yes, no. Okay, I'll let you know. So, in union, we're trying to unify our four to five 19:50.320 --> 19:55.120 frameworks, so that developers code once, but it looks the same in all frameworks. 19:56.080 --> 20:03.920 And ocean will be coded in use in union. But union still is working on a developer preview, 20:04.560 --> 20:11.440 so we're also waiting on union. But after that, and I got some assurances from the plasma team 20:11.440 --> 20:19.040 earlier this week, that we may be seeing more construction of ocean assets in about three or four months 20:19.120 --> 20:27.680 from now. But so far, we have a button. So, that's a good start. Now, from all of this, 20:27.680 --> 20:34.640 I think we've learned a lot of stuff, and that it's, you know, first of all, we need to improve a lot, 20:34.640 --> 20:43.360 we need to do better, we need to do a lot more than what we have, but our design system as far 20:43.440 --> 20:50.080 as ocean goes is mostly complete. We're just basically today, we're just building like more complex 20:50.080 --> 20:56.880 UI in the design system, but again, since none of it is actual real code, there's not a ton 20:56.880 --> 21:02.240 of incentive to just, you know, kind of pile up and keep growing this design system, because I'm 21:02.240 --> 21:06.640 pretty sure that when we try to apply some of this, there's going to be a lot of challenges, 21:06.640 --> 21:11.360 and we're going to have to change things. So, I just want to keep it at that level for now. 21:11.360 --> 21:19.920 And so, like I said, if you have any questions, reach out. I will, like I said, you can go to our 21:19.920 --> 21:26.800 repo, you can connect with me there, you can also join our, our KD visual design team, 21:26.800 --> 21:33.360 and have I convinced you yet that you can use or install KD on your machine? 21:33.760 --> 21:42.720 A bit? A bit? Okay, I heard it. Yes. That to me is a yes. Okay. Awesome. Well, that's my talk. 21:42.720 --> 21:47.760 Thank you so much. 21:54.800 --> 21:56.800 Ten minutes for questions. Okay, cool. 22:03.360 --> 22:08.880 So, you guys move from stigma to example, how was the group? That's the shift that I know that we 22:08.880 --> 22:13.840 are also looking forward to. Yeah. We just want to get prepared. So, you'd like to know how the 22:13.840 --> 22:21.440 stigma transition to pimpo was. It's actually pretty seamless. So, we, so a few months ago, 22:21.440 --> 22:33.360 pimpo released, remind me, yeah, no, the variance? No. Yeah, there is. So, now you actually can 22:33.360 --> 22:38.720 sort of do the same process that you do on Figma, where you create one asset, then you link 22:38.720 --> 22:43.200 another one below it and you make some modifications and another and another. You can do that in 22:43.200 --> 22:51.680 pimpo too. So, with that, we built our, I don't know if I can show it. Do I have it? I know, 22:51.680 --> 23:01.040 I put it away, my bad. But, we put all of our stuff there. So, once we were able to do that, it was 23:01.040 --> 23:09.120 much easier because at the end of the day, the census systems are nothing more than state representations 23:09.120 --> 23:16.080 of your assets and once that was available, it was easy to just like create a button and then create 23:16.080 --> 23:22.480 20 more that with different states and just be done. And then the other thing was tokens. Figma 23:22.480 --> 23:28.240 actually has tokens kind of on the side. It's sort of a side menu to them and they have a combine 23:28.240 --> 23:36.240 with their variance idea. And for us, tokens is better because tokens is actually what the 23:36.240 --> 23:42.000 developers are going to use to implement something. So, in Figma, I mean, sorry, in Pempo, 23:42.000 --> 23:50.240 they integrated token studio, which is just a plug-in in Figma, but in Pempo, it's actually native. 23:50.960 --> 23:57.520 And so, you can build tokens natively from the get-go and we already set up all the ideas around, 23:57.520 --> 24:02.960 you know, how we name our tokens. We're actually following many of the ideas found in Android 24:03.040 --> 24:08.160 design systems because it seems to them the most complete and available thing you can read. 24:08.160 --> 24:14.480 So, we're using some of those ideas as well in Ocean. So, yeah, it's super easy. I think go ahead and 24:14.480 --> 24:23.200 do it. Give it a shot. Yeah. How does it work? The function are from between developers and designers. 24:23.200 --> 24:26.960 How does the flow work between devs and design? Yeah. So, 24:27.600 --> 24:33.600 for example, you use Pempo, or? Yeah, exactly. So, absolutely. Yeah. 24:34.880 --> 24:41.520 Yeah. So, he's asking, like, one minute left. Okay, I'll go fast. So, the question is, 24:41.520 --> 24:48.320 how do you, what is the transfer between design two code? So, generally what you do is, 24:49.440 --> 24:56.160 you would create out of all of your tokens, you can export this list of tokens and create a 24:56.160 --> 25:04.080 JSON file that just describes all of them. That's all it is. And then, somewhere in your development 25:04.080 --> 25:10.560 locations, you can decide where it's best to put your files, your design files, whether to break them up, 25:10.560 --> 25:17.760 or whatever you want to do as a developer. And then, somebody, an integrator, some kind of designer 25:17.760 --> 25:25.760 developer, an in between, can actually code your designs by referencing either the Pempo UI 25:25.760 --> 25:31.200 because you can actually click one of the, any of the assets and see all the details and replicate it. 25:31.200 --> 25:36.000 Or the other option was what I was talking about earlier is you can actually export the 25:37.520 --> 25:45.360 well, you can, you can run an MCP server on Pempo and collect all the data that is needed to 25:45.360 --> 25:51.440 create something called a storybook, which is basically a UI, a web-based UI explanation of 25:51.520 --> 25:56.800 your assets. And developers can actually reference that and since it all runs on the web, 25:57.520 --> 26:01.920 you can actually, for, in some instances, for some of the components, you can say, okay, well, 26:02.560 --> 26:09.040 the radii of this one should be like 24, 25, and you can experiment with that there without ever touching 26:09.040 --> 26:15.120 the graphics. So, those are two methods that you can do. We're actually going to investigate 26:15.120 --> 26:20.720 some of that when we're done when we actually can get off the ground, but as far as the developer, 26:21.440 --> 26:24.960 that was working with me on building the button that we have for Ocean, he said it was 26:24.960 --> 26:29.360 much easier. All he had to do was just look up the variables. I mean, sorry, the token and design 26:29.360 --> 26:36.560 tokens that we created and that's all that they needed. Thanks!