1 00:00:00,017 --> 00:00:02,957 Plasma Next, visual design evolution for Plasma. 2 00:00:08,377 --> 00:00:12,897 Thank you, thank you. I'm so happy to see so many of you here today. 3 00:00:13,157 --> 00:00:16,037 I've been waiting for this moment for a while. 4 00:00:17,757 --> 00:00:23,517 I don't know if you all know me, but my name is Andy Betts, and I've been with 5 00:00:23,517 --> 00:00:26,457 Katie for about 20 years. 6 00:00:28,277 --> 00:00:37,177 And I'm a graphical designer, a UX person, and I also work in QA on my day job. 7 00:00:37,517 --> 00:00:42,017 So that's one thing about me. And this is my dog Lila. 8 00:00:43,097 --> 00:00:47,097 Like I said, she has to be in every picture, so I brought her along. 9 00:00:49,617 --> 00:00:55,477 So as many of you know, I'm part of the visual design team primarily, 10 00:00:55,477 --> 00:00:58,477 So that's where we hang out most of the time. 11 00:00:58,877 --> 00:01:04,577 And about, I want to say maybe eight months ago, 12 00:01:04,737 --> 00:01:11,497 we started talking in the chat about how we don't want to use or we want to 13 00:01:11,497 --> 00:01:14,837 evolve 22 pixel icons to 24. 14 00:01:15,397 --> 00:01:20,457 Given that 24 is a multiple of eight and it's a lot easier to work and construct 15 00:01:20,457 --> 00:01:25,997 than what we have right now. Now, and our base now is 22. 16 00:01:26,837 --> 00:01:32,557 So these icons tend to have problems, especially with resizing. 17 00:01:32,957 --> 00:01:37,757 And they tend to look blurry. So that's one thing that, you know, 18 00:01:37,797 --> 00:01:40,837 this sparked a conversation around that. 19 00:01:40,977 --> 00:01:44,717 And I said, okay, well, how about I go ahead and, you know, try to, 20 00:01:44,777 --> 00:01:46,297 I don't know, figure this out. 21 00:01:46,397 --> 00:01:54,417 And pick some of those icons and turn them into 24s. and that got us started with a small project. 22 00:01:55,077 --> 00:01:58,257 We're only just calling it Plasma Next right now, okay? 23 00:01:58,837 --> 00:02:04,017 That is not final by any means, but it's just the only way that we could think about it. 24 00:02:05,657 --> 00:02:10,237 And today, I think what I want to introduce, what I want to present is something 25 00:02:10,237 --> 00:02:15,717 that we have been working on for some time that evolved out of this idea of building new icons. 26 00:02:15,717 --> 00:02:22,697 And it's something that a lot of commercial entities are using, 27 00:02:22,857 --> 00:02:26,977 and it's pretty effective when it comes to making design that is scalable, 28 00:02:27,357 --> 00:02:32,177 that is repeatable, that is easier to use, even for non-designers. 29 00:02:33,697 --> 00:02:39,117 So I think the big introduction is about design systems. 30 00:02:40,057 --> 00:02:43,617 So how many of you have heard about design systems here? 31 00:02:44,437 --> 00:02:49,017 Alright, you probably Yeah, okay, a fair amount of you So. 32 00:02:50,406 --> 00:02:53,426 You know, interestingly enough, you probably already, as developers, 33 00:02:53,586 --> 00:02:59,286 most of you use design systems to call up your colors, to call up your fonts, anything you need. 34 00:02:59,526 --> 00:03:01,746 And it's defined by the software. 35 00:03:02,066 --> 00:03:04,626 And then you just apply it. You don't have to do anything else. 36 00:03:04,846 --> 00:03:11,866 But on the other side, visual designers like myself, we don't have any of that. 37 00:03:12,086 --> 00:03:15,586 We don't understand any of that. and and not 38 00:03:15,586 --> 00:03:18,926 only that uh we design on the abstract many times 39 00:03:18,926 --> 00:03:22,106 without a lot of information from users with our 40 00:03:22,106 --> 00:03:26,666 own set of assets with our own set of you know colors whatever and so whatever 41 00:03:26,666 --> 00:03:31,406 comes out is not exactly what you have on the system and that makes it really 42 00:03:31,406 --> 00:03:37,926 difficult because you know we make our developers go crazy and so we don't want 43 00:03:37,926 --> 00:03:39,626 to do that that's not the goal, 44 00:03:40,526 --> 00:03:43,326 and so one of the things that is really good about 45 00:03:43,326 --> 00:03:46,266 design systems you know they have 46 00:03:46,266 --> 00:03:51,266 their downsides but one great thing is that they are make they make you go quick 47 00:03:51,266 --> 00:03:55,926 you know very quickly you can pick out you know your buttons your radio buttons 48 00:03:55,926 --> 00:04:01,146 your check boxes everything you need just put them on a on on a sheet or a layout 49 00:04:01,146 --> 00:04:05,906 and it's the layout most of the times is made for you If you use variables, it's all good. 50 00:04:06,086 --> 00:04:10,506 But like I said, all of that work was not available to designers until, 51 00:04:10,626 --> 00:04:14,606 you know, applications like Figma started coming out, Sketch. 52 00:04:15,926 --> 00:04:19,226 Well, and now we have our open source equal, which is Penpot. 53 00:04:19,446 --> 00:04:22,046 And we're very excited about that. I'll tell you more about it later. 54 00:04:23,386 --> 00:04:29,366 And so now that world of variables, that world of synchronized, 55 00:04:29,366 --> 00:04:32,626 you know, graphical assets, it's available to us as well. 56 00:04:33,586 --> 00:04:38,466 And we can more easily tell developers, this is exactly what we're looking for. 57 00:04:38,606 --> 00:04:43,406 Or developers could even mock up some of their applications before committing 58 00:04:43,406 --> 00:04:46,306 to code by doing it on the graphical application. 59 00:04:48,326 --> 00:04:54,486 So now this is, I spoke a little bit about this a minute ago, 60 00:04:54,666 --> 00:04:59,846 but our current state is not great, right? Right. 61 00:05:00,546 --> 00:05:07,366 In fact, I think that, you know, one interesting thing is that we build a graphical 62 00:05:07,366 --> 00:05:11,686 design system, a graphical system, but we don't have a lot of designers in our 63 00:05:11,686 --> 00:05:14,266 in our group in the sense of graphical designers. 64 00:05:14,466 --> 00:05:20,706 I know all of you design, but graphical designers, they're not here. We don't have as many. 65 00:05:21,506 --> 00:05:28,606 And and for building a graphical UI, we need them. and I feel like right now. 66 00:05:30,684 --> 00:05:37,544 We have a huge mountain to climb as designers because most of our work is based 67 00:05:37,544 --> 00:05:44,564 on, you know, on code that sometimes most graphical designers don't know how to read. 68 00:05:45,544 --> 00:05:51,784 I am one of those. And so the barrier to entry is really high. You have to learn a lot. 69 00:05:52,084 --> 00:05:57,584 And maybe that's not the specialization that these people want to do. 70 00:05:57,864 --> 00:06:03,484 But I do know that many of them, maybe in their day jobs, use stuff like Figma 71 00:06:03,484 --> 00:06:06,184 to build some of their assets. 72 00:06:06,404 --> 00:06:08,524 And so that is familiar to them. 73 00:06:10,724 --> 00:06:16,864 Now, at the same time, I think that because we haven't had design systems before 74 00:06:16,864 --> 00:06:22,864 in KDE, we just basically do what seems best. 75 00:06:23,024 --> 00:06:29,164 And we design at a level that is, you know, kind of small because we don't want 76 00:06:29,164 --> 00:06:31,564 to upset the system, right? 77 00:06:32,004 --> 00:06:35,064 And that makes us basically shrink our contributions. 78 00:06:36,164 --> 00:06:43,164 We try not to do large redesigns. We try not to make, you know, 79 00:06:45,144 --> 00:06:49,044 redeployments of like various apps and try to reimagine them in some other way. 80 00:06:49,184 --> 00:06:50,704 We just can't deliver that. 81 00:06:50,864 --> 00:06:56,064 In fact, maybe part of the reason and why we stuck with Breeze for so long is because of this. 82 00:06:56,424 --> 00:07:00,684 Because it just seems like the manpower for this work is not there. 83 00:07:00,864 --> 00:07:05,324 And when we start thinking about design, the design just doesn't expand. 84 00:07:05,504 --> 00:07:09,544 We don't have a good comprehensive view of what we want to do. 85 00:07:09,984 --> 00:07:13,024 Therefore, whatever we want to achieve and want to output. 86 00:07:14,308 --> 00:07:17,408 It's based on a lot of assumptions that we don't understand very well. 87 00:07:18,228 --> 00:07:22,748 So that's not a great place to be as a community, especially, 88 00:07:22,948 --> 00:07:30,128 for example, I don't know if some of you recently were part of our Plasma 6 release. 89 00:07:30,548 --> 00:07:37,228 And as soon as we started talking 6, many, many people came to our forums and 90 00:07:37,228 --> 00:07:41,028 our chats and saying, hey, what else are you changing? Are you changing the UI? 91 00:07:41,468 --> 00:07:44,528 Are you changing the wallpaper? Are you changing the eye? what are you changing 92 00:07:44,528 --> 00:07:48,308 and you know most of the times uh you know 93 00:07:48,308 --> 00:07:51,428 we had to scale back and say right now 94 00:07:51,428 --> 00:07:55,088 we're working stability we're working on the things that matter you know for 95 00:07:55,088 --> 00:08:00,168 the system to to function appropriately but on the back of my mind i was thinking 96 00:08:00,168 --> 00:08:03,448 well you know there's not a whole lot that we could have done anyway even if 97 00:08:03,448 --> 00:08:10,528 we wanted to as far as design goes because the The reach of these changes is just humongous. 98 00:08:11,348 --> 00:08:17,548 And not only that, we as designers would not even provide any kind of visual 99 00:08:17,548 --> 00:08:20,408 direction for what we want to do. 100 00:08:20,608 --> 00:08:25,728 So whatever we would have made up for Plasma 6 would have been just, 101 00:08:25,828 --> 00:08:29,028 you know, something for the moment without a lot of thinking behind it. 102 00:08:29,428 --> 00:08:32,348 And so I don't think we want it to be in this situation. 103 00:08:35,888 --> 00:08:45,068 Now, I think, in essence, our current systems demand too much from you, from us. 104 00:08:46,048 --> 00:08:49,648 We're volunteers. We do this when we can. 105 00:08:50,488 --> 00:08:53,388 And designers do the same. You know, 106 00:08:53,408 --> 00:08:56,388 just as much time it takes to code something, things sometimes we 107 00:08:56,388 --> 00:08:59,528 spend hours and hours hours iterating on 108 00:08:59,528 --> 00:09:03,068 colors designs layouts and 109 00:09:03,068 --> 00:09:07,928 just really nitpicking you know taking stuff apart making sure that it works 110 00:09:07,928 --> 00:09:11,788 properly so it's very time consuming this is why i'm wearing glasses now because 111 00:09:11,788 --> 00:09:19,868 i didn't used to wear glasses so i think we we need to make a change so um, 112 00:09:22,599 --> 00:09:26,679 Like I said, we followed this process to get started on a design system. 113 00:09:28,179 --> 00:09:34,119 There are a few out there that you can find that can immediately deploy into Figma or Penpot. 114 00:09:35,339 --> 00:09:44,779 We took one called Untitled UI, and they have a free version that you can start building on. 115 00:09:45,579 --> 00:09:49,439 Now, by that, I'm not saying we are making an Untitled UI system. 116 00:09:49,439 --> 00:09:54,699 We're just using the parameters they have to organize our assets. 117 00:09:58,319 --> 00:10:02,159 The cool thing is that at the end of the day, in a design system, 118 00:10:02,459 --> 00:10:04,399 we can talk the same language. 119 00:10:04,879 --> 00:10:09,699 We can say we have a red color that is called this type of variable, 120 00:10:09,939 --> 00:10:13,639 and that's exactly the color that you can use in the system. 121 00:10:13,639 --> 00:10:18,459 If one day we decide that maybe we don't like blue anymore as our accent color, 122 00:10:18,699 --> 00:10:24,919 we can just go back to the Figma document where our system is and say, 123 00:10:24,999 --> 00:10:28,559 well, we're going to change it to red and let's see how it looks. 124 00:10:28,659 --> 00:10:34,139 Because now all of the graphical components in Figma will change to that color 125 00:10:34,139 --> 00:10:38,739 and you can easily see whether it actually makes sense. 126 00:10:40,099 --> 00:10:43,019 So let me show 127 00:10:43,019 --> 00:10:45,959 you a little bit about what we 128 00:10:45,959 --> 00:10:53,899 did so and this one i'm just not going to use my phone but we took uh our foundational 129 00:10:53,899 --> 00:11:03,139 uh graphical elements so this is colors icons we took typography. 130 00:11:05,259 --> 00:11:10,459 And the spacing system, and I believe there's one more typography. 131 00:11:10,619 --> 00:11:12,019 There's five. I'll show you one. 132 00:11:14,079 --> 00:11:20,459 So we worked on colors. So the first set of colors, now we don't have as many 133 00:11:20,459 --> 00:11:25,499 colors today as there are in the new design system, and these colors are different than Breeze. 134 00:11:25,719 --> 00:11:29,919 So just to make that clear for everybody, we're not evolving Breeze. 135 00:11:29,959 --> 00:11:35,899 We're trying to sort of create something along the lines of Breeze but a little bit different. 136 00:11:37,319 --> 00:11:38,219 So I. 137 00:11:40,028 --> 00:11:44,148 All of these colors right here that you see, they have their specifications, 138 00:11:44,688 --> 00:11:47,228 and they have a variable name assigned to them. 139 00:11:47,488 --> 00:11:51,928 In the design system, they are, you know, we can call them whatever we want, 140 00:11:51,988 --> 00:11:55,948 but right now they're just being called, for example, purple 600, right? 141 00:11:57,368 --> 00:12:06,228 And we have from 25 to 100, so that's about 11 colors, I think, for each of them. 142 00:12:06,228 --> 00:12:09,308 And we have our primary or 143 00:12:09,308 --> 00:12:15,168 secondary in our colored variables they 144 00:12:15,168 --> 00:12:20,968 all have a good contrast rating and we can suggest what contrast rating they 145 00:12:20,968 --> 00:12:26,988 should have you know against text for example so these are our primaries now 146 00:12:26,988 --> 00:12:33,048 they don't they don't look too different but this is the all of the ones that you see here are, 147 00:12:33,368 --> 00:12:39,808 it's the 500, so the color 500 in the middle of all the variables. 148 00:12:40,388 --> 00:12:46,388 So that's usually the main color or the accent color or the primary color that you use in a UI. 149 00:12:47,568 --> 00:12:51,728 Other colors that are like, you know, more intense or less intense than 500 150 00:12:51,728 --> 00:12:58,288 can actually, you know, be used in different situations in your UI. 151 00:12:58,428 --> 00:13:03,288 But the good thing is that all of them are correlated, so they have the same strength and value. 152 00:13:03,508 --> 00:13:12,428 And when you look at them in a color curve, they usually follow a quarter color curve. 153 00:13:15,767 --> 00:13:20,367 We also touched on typography, and again, these are all suggestions. 154 00:13:20,687 --> 00:13:26,827 So, we have display typography with their sizes, their rem size, 155 00:13:27,167 --> 00:13:33,687 their line height, with their tracking, and we have regular sizes as well. 156 00:13:33,887 --> 00:13:37,047 So, we're basing this on the font Inter. 157 00:13:37,287 --> 00:13:41,407 Not that it has to be Inter, but it seemed like a good font for the moment. 158 00:13:42,287 --> 00:13:46,127 It's been developed heavily, and most recently they came out with version 4 159 00:13:46,127 --> 00:13:52,247 of this font, and it's especially made for UI, so you don't have to worry too 160 00:13:52,247 --> 00:13:54,307 much about whether it's going to look legible or not. 161 00:13:55,887 --> 00:13:56,967 So that is one. 162 00:13:58,947 --> 00:14:02,047 And I'll show you more later. So these are the specifications that you get. 163 00:14:02,107 --> 00:14:07,887 For example, right? If you have display size of 72, then your line is, 164 00:14:08,007 --> 00:14:10,507 or you can also translate that to 4.5 rem. 165 00:14:10,727 --> 00:14:15,047 Your line height will be 90 pixels and so on, and a tracking of minus two so 166 00:14:15,047 --> 00:14:17,027 that your text doesn't go too long. 167 00:14:19,547 --> 00:14:24,807 We also have a system of shadows. And this is nothing too crazy. 168 00:14:25,307 --> 00:14:30,547 I think we already have most of it. But basically, we're suggesting shadow strengths 169 00:14:30,547 --> 00:14:38,767 of 1x, 2x, 3x. and we have their colors all put in through the color system 170 00:14:38,767 --> 00:14:40,127 that's in the design system. 171 00:14:40,267 --> 00:14:45,067 So if we wanted to change that, it would just be a matter of changing the color in the shadow variable. 172 00:14:47,887 --> 00:14:55,307 We also have a spacing system, which is, honestly, something we need urgently, right? 173 00:14:56,887 --> 00:15:02,447 This one is not, this is very common for web, but we're basing it on an 8-pixel grid. 174 00:15:02,967 --> 00:15:06,207 So we have sizes of, you know, from 8 and up. 175 00:15:06,307 --> 00:15:11,067 Well, we also have 4 just in case there are some elements in the UI that really need a good spacing. 176 00:15:11,387 --> 00:15:16,887 But the idea is that if you call up the variable that has the spacing that you 177 00:15:16,887 --> 00:15:23,247 need, whatever we call it, right, then you'll get a UI that's laid out the proper way. 178 00:15:23,507 --> 00:15:30,687 And we will eventually provide some samples of graphical assets that show how we utilize them. 179 00:15:32,607 --> 00:15:39,127 But the first thing is to have this and expect that maybe Plasma in the future 180 00:15:39,127 --> 00:15:40,827 will be a lot more spaced out very nice. 181 00:15:42,487 --> 00:15:47,907 And then we made icons. And this is probably what you've seen the most This 182 00:15:47,907 --> 00:15:50,767 is the work that we started doing a few months ago. 183 00:15:51,107 --> 00:15:56,747 And we took, like I said, the 22-pixel library and we turned it into 24. 184 00:15:56,987 --> 00:16:08,587 But we quickly noticed that the icons in the 22-pixel library were not always as good or as updated. 185 00:16:09,707 --> 00:16:15,027 We have icons that were built forever ago, and they needed updating quickly. 186 00:16:15,307 --> 00:16:20,067 Not only that, we also with the help of a few of the VDG members here, 187 00:16:20,207 --> 00:16:25,267 we got a lot of comments on the icons on, you know, this is how we express actions. 188 00:16:25,387 --> 00:16:28,047 This is how we want to like, you know, place meaning. 189 00:16:28,387 --> 00:16:33,467 And quickly, instead of just redoing the icons from 22 to 24, 190 00:16:33,667 --> 00:16:35,547 we actually redesigned the icons. 191 00:16:36,481 --> 00:16:45,501 The icons in 24 which means we're gonna have to go back to other icons to like the the 16s and the, 192 00:16:46,461 --> 00:16:50,301 32s and and so on and modify them 193 00:16:50,301 --> 00:16:56,281 but so far so good i mean we uh how many icons do we have in the breeze library 194 00:16:56,281 --> 00:17:03,201 like 1600 something like that that's how many we have here so it's a lot of 195 00:17:03,201 --> 00:17:07,021 work And this is kind of how it looks on the system right now. 196 00:17:07,281 --> 00:17:11,541 So one of the VDG members put the icon system. 197 00:17:12,661 --> 00:17:17,321 Well, Manuel over there, actually let me shout you out, because Manuel made 198 00:17:17,321 --> 00:17:23,701 us a plug-in on Figma that actually exports all of these icons with the variables included. 199 00:17:25,041 --> 00:17:29,481 The color variable included in the CSS bit of the SVG. 200 00:17:29,481 --> 00:17:32,661 And so once you export it the system 201 00:17:32,661 --> 00:17:35,801 can easily just pick it up and it's 202 00:17:35,801 --> 00:17:38,841 working so all the color changes work and 203 00:17:38,841 --> 00:17:44,641 so we don't have to do much more now i am not saying that this is how it should 204 00:17:44,641 --> 00:17:49,161 look right i'm not saying that i'm just showing you what it looks like today 205 00:17:49,161 --> 00:17:55,081 so these are some of the changes so i think our iconography has gotten got a 206 00:17:55,081 --> 00:17:58,321 little bit better more direct a a little bit chunkier too, 207 00:17:58,481 --> 00:18:03,421 because we had one pixel icons before and they can be very thin, 208 00:18:03,541 --> 00:18:06,621 especially on high density screens, 209 00:18:06,981 --> 00:18:09,401 they can look very thin and not legible sometimes. 210 00:18:10,141 --> 00:18:11,961 So we made them a little bit bigger. 211 00:18:12,921 --> 00:18:16,021 Then this is kind of what system settings looks like. 212 00:18:17,521 --> 00:18:22,781 So, and by the way, these icons that are colorful here, it's not a mess, 213 00:18:22,941 --> 00:18:26,161 it's just that they come from a different collection that we haven't edited yet. 214 00:18:26,701 --> 00:18:31,581 So it looks a little bit like that like ta-da, 215 00:18:33,556 --> 00:18:38,716 This is what this cover looks like. Again, like I said, the bottom line, 216 00:18:38,796 --> 00:18:41,196 the colorful icons, they don't come from the same collection. 217 00:18:42,436 --> 00:18:44,396 This is, for example, Ocular. 218 00:18:47,956 --> 00:18:48,836 Or Gwenview. 219 00:18:52,756 --> 00:18:59,436 Right? So, in Figma, I don't know, who of you have worked in Figma before at all? 220 00:18:59,556 --> 00:19:03,176 Or seen, okay, you're probably used to some of these images. 221 00:19:03,616 --> 00:19:07,336 So these are the variable panels that you see on each side. 222 00:19:07,876 --> 00:19:12,176 So, for example, and again, this can work both ways. 223 00:19:12,336 --> 00:19:16,316 So if you tell us as designers, hey, we don't want this color because it just 224 00:19:16,316 --> 00:19:20,496 doesn't work for us, we can go here and create a new variable for the design 225 00:19:20,496 --> 00:19:23,916 system and just give it the properties that it needs. 226 00:19:24,076 --> 00:19:27,656 So we call the color property, the strength, and the name. 227 00:19:28,156 --> 00:19:30,556 And then up top you see the color that we get. 228 00:19:31,096 --> 00:19:35,096 And it becomes available immediately for the system. 229 00:19:36,756 --> 00:19:41,136 We can give them certain specific names like you see on this middle column. 230 00:19:41,576 --> 00:19:47,976 And I mean, they can be adjusted. These are probably just coming from untitled 231 00:19:47,976 --> 00:19:53,776 UI, but if we have specific ones from Plasma directly, you can just tell us and we can change it. 232 00:19:57,176 --> 00:20:01,736 So on the other side, for example, for shadows, We have this. 233 00:20:03,516 --> 00:20:07,716 We have just named them the same as untitled did. So extra small, 234 00:20:08,076 --> 00:20:10,336 small, medium, large, whatever it is. 235 00:20:10,496 --> 00:20:14,256 But we can call them whatever Plasma wants us to call them if we want to have 236 00:20:14,256 --> 00:20:16,216 a one-to-one correlation. 237 00:20:18,910 --> 00:20:23,210 Then, for display fonts, this is how you do it. 238 00:20:24,530 --> 00:20:29,730 Well, for all kinds of fonts. So, in a regular UI, we would be using text, not display. 239 00:20:30,130 --> 00:20:37,010 But, in fact, actually, I made this same library in Penpot. 240 00:20:37,210 --> 00:20:41,190 So, it's available in Penpot now. We're actually trying to get off of Figma. 241 00:20:42,530 --> 00:20:46,690 So, for practicality reasons, we just did that first there. layer, 242 00:20:46,730 --> 00:20:49,230 but Figma is not the tool we want to use forever. 243 00:20:49,410 --> 00:20:54,750 So likely after Academy, we will continue working and it will happen on PenPod. 244 00:20:57,090 --> 00:21:01,970 All right. So does that make sense? Is that clear? 245 00:21:02,750 --> 00:21:08,170 Yeah? Cool. All right. So what were we thinking behind all this, right? 246 00:21:08,290 --> 00:21:12,370 Why do we want to sort of start out small and then go something bigger? 247 00:21:12,830 --> 00:21:15,590 And I think that I've laid out some of these ideas already, but 248 00:21:15,590 --> 00:21:19,350 we want to base our principles on cleanliness 249 00:21:19,350 --> 00:21:22,090 and simplicity on you know the 250 00:21:22,090 --> 00:21:25,910 direct communication with the with the user and I 251 00:21:25,910 --> 00:21:28,830 don't I don't think that you know 252 00:21:28,830 --> 00:21:32,550 keeping our same design language 253 00:21:32,550 --> 00:21:38,110 is is feasible for that especially when we want to sometimes you know make big 254 00:21:38,110 --> 00:21:44,630 changes and we just cannot not execute because it's so much work so what i'm 255 00:21:44,630 --> 00:21:50,610 proposing today is that we adopt a design system, 256 00:21:51,530 --> 00:21:58,310 for graphical uh output that we integrate the plasma variables into this design 257 00:21:58,310 --> 00:22:03,010 system so that we can communicate them and then after that once we complete 258 00:22:03,010 --> 00:22:07,590 that uh we can start seeing this work on the desktop, 259 00:22:08,870 --> 00:22:11,330 and eventually I. 260 00:22:12,842 --> 00:22:20,182 I want us to build components, graphical components, but also Plasma-ready components 261 00:22:20,182 --> 00:22:24,842 that mimic what we have on the graphical system. 262 00:22:25,862 --> 00:22:31,342 We haven't done this ever, so I'm pretty sure that we're going to miss a lot of things. 263 00:22:31,342 --> 00:22:35,102 That we there's a lot of unknowns but i 264 00:22:35,102 --> 00:22:37,942 feel like this is one method that we 265 00:22:37,942 --> 00:22:41,342 can all sort of deliver at scale attract more 266 00:22:41,342 --> 00:22:44,742 more designers to the team uh make 267 00:22:44,742 --> 00:22:47,582 it less confusing for our 268 00:22:47,582 --> 00:22:50,362 developers as to what it is that we want to 269 00:22:50,362 --> 00:22:53,902 do uh and deliver a great system so 270 00:22:53,902 --> 00:22:58,742 hopefully who knows maybe we can dream big in maybe a couple years we can have 271 00:22:58,742 --> 00:23:04,442 you know a completely new desktop look so but it starts with foundations first 272 00:23:04,442 --> 00:23:11,422 so I just wanted to mention that to you today that's my presentation thank you so much. 273 00:23:18,202 --> 00:23:24,022 And how are we on time 18 minutes let's talk then let's talk for a minute it 274 00:23:24,022 --> 00:23:34,242 so any questions from anybody so this is a fantastic vision i think is it on okay good um, 275 00:23:35,322 --> 00:23:42,302 what what uh looks exciting to me is uh the fact that you know you you doing 276 00:23:42,302 --> 00:23:46,702 design stuff requires a language that designers speak that you know if you if 277 00:23:46,702 --> 00:23:51,122 you have if you worked out how to put that in a computer and uh figma and penpot 278 00:23:51,122 --> 00:23:53,662 have making have been making systems that do that, 279 00:23:53,802 --> 00:23:58,062 it would be great if we could adopt our systems to, you know, 280 00:23:58,062 --> 00:24:02,742 also speak that language and then have a much more efficient way of communicating 281 00:24:02,742 --> 00:24:04,942 and have a richer way of storing all the data. 282 00:24:06,882 --> 00:24:13,102 And a thought occurred to me, we often talk about, we need more apps and many 283 00:24:13,102 --> 00:24:14,762 apps these days are web apps. 284 00:24:16,042 --> 00:24:20,762 Progressive web apps are a thing that are fairly well supported on browsers, even on desktop. 285 00:24:22,187 --> 00:24:25,887 And these design systems are often also used in web applications. 286 00:24:26,947 --> 00:24:32,887 So maybe it will be possible to sort of make a web template CSS library that 287 00:24:32,887 --> 00:24:39,267 could make it possible to have web applications look like KDE applications and 288 00:24:39,267 --> 00:24:40,467 integrate well with the desktop. 289 00:24:41,647 --> 00:24:44,907 So I don't know if you've thought about that. It is very possible. 290 00:24:45,107 --> 00:24:51,467 So these systems have, like, most of the design systems are web first. 291 00:24:52,187 --> 00:24:53,507 So they're meant for web work. 292 00:24:55,527 --> 00:25:00,167 And depending on how that works, we could actually have a very good, 293 00:25:00,947 --> 00:25:03,207 kind of like similar look on all the places. 294 00:25:03,587 --> 00:25:09,087 The good thing is that at least Figma and PenPod are able to actually export CSS. 295 00:25:09,847 --> 00:25:13,987 So I know that we don't use CSS in Plasma, that I've been told that many times. 296 00:25:15,327 --> 00:25:18,167 But not yet. I'm looking at you. 297 00:25:20,047 --> 00:25:27,887 But what I'm saying is that at least the CSS bit can tell you exactly what you're 298 00:25:27,887 --> 00:25:31,667 working with, and you can at least copy it into some other language that you 299 00:25:31,667 --> 00:25:33,187 need and make it the same. 300 00:25:33,387 --> 00:25:36,607 But we were talking with Nate particularly some weeks ago, too, 301 00:25:36,667 --> 00:25:41,747 that sometimes developers want to use variables that are more familiar to them 302 00:25:41,747 --> 00:25:45,067 and not call it just Red 500, right, because that makes no sense. 303 00:25:45,067 --> 00:25:48,107 But we would have to have good like 304 00:25:48,107 --> 00:25:51,507 documentation around that and good translation tables that 305 00:25:51,507 --> 00:25:54,567 show these variables in plasma or the 306 00:25:54,567 --> 00:26:00,367 web translate to this color in the system so that we don't make bad changes 307 00:26:00,367 --> 00:26:05,427 either right and and i'm i'm saying this you know with a lot of with a lot of 308 00:26:05,427 --> 00:26:10,427 uh hope that we can have more designers that can help us maintain the design 309 00:26:10,427 --> 00:26:12,847 system because this is a tool 310 00:26:13,027 --> 00:26:15,927 that, you know, also needs a lot of care and keeping up to date. 311 00:26:16,887 --> 00:26:22,447 But I do see a future where there is like a desktop look and there is a web 312 00:26:22,447 --> 00:26:23,987 look that is almost the same. 313 00:26:26,850 --> 00:26:30,710 I have a question about the system, the design system. 314 00:26:30,890 --> 00:26:36,530 Does it have some designer's code approach when we can make changes and make 315 00:26:36,530 --> 00:26:41,110 kind of magic quest and see that this designer changes these lines, 316 00:26:41,330 --> 00:26:44,670 the designer changes these lines, get back to the previous version, 317 00:26:44,810 --> 00:26:48,170 release version 1.1, 1.1.1, and so on. 318 00:26:49,430 --> 00:26:54,250 Does the current system support this approach? It's a little bit different. 319 00:26:54,250 --> 00:27:00,130 It's more like designer-oriented. They're very artsy, but they have libraries. 320 00:27:00,490 --> 00:27:05,610 So you build, your design system outputs something called a library, 321 00:27:05,770 --> 00:27:07,590 and it's a library of assets. 322 00:27:07,990 --> 00:27:15,090 And it's all stored in the graphical system in Figma or Penpot, but you lock that up. 323 00:27:15,230 --> 00:27:20,270 You can, you know, say no one but these two people can work on that so that 324 00:27:20,270 --> 00:27:24,370 everyone else is a beneficiary of that library and they can take the assets 325 00:27:24,370 --> 00:27:25,910 and start building whatever they want. 326 00:27:26,390 --> 00:27:31,750 But if you want to make changes, that designer can say, hey, 327 00:27:31,870 --> 00:27:36,870 I'm requesting that this button now is a square rather than a rectangle. 328 00:27:37,990 --> 00:27:43,330 They make that change and they send it up to the library and the library maintainer 329 00:27:43,330 --> 00:27:45,370 can say, yeah, I accept that. 330 00:27:45,430 --> 00:27:49,430 Let's make the change. That'd be great. Let's integrate it. it um figma 331 00:27:49,430 --> 00:27:52,410 and penpot also have uh history and they 332 00:27:52,410 --> 00:27:55,130 have versioning so they're i don't have 333 00:27:55,130 --> 00:27:58,450 it here but like if you go into one of their menus you can say you 334 00:27:58,450 --> 00:28:01,670 know who made the last change and let's go back to that let's go back to the 335 00:28:01,670 --> 00:28:06,170 previous one it's more graphical it's not like you know uh like git for example 336 00:28:06,170 --> 00:28:12,170 but uh it's it's definitely possible it's it's more design oriented like point 337 00:28:12,170 --> 00:28:17,090 and click but you can have all those things and you know you can prevent a lot of 338 00:28:17,130 --> 00:28:19,550 problems and disasters that way. 339 00:28:19,830 --> 00:28:21,950 Yeah, something we didn't do before, actually. 340 00:28:24,470 --> 00:28:29,170 So not so much a question as more of a comment from my side. 341 00:28:29,650 --> 00:28:34,030 For those of you who are wondering how are we going to achieve this technically, 342 00:28:34,870 --> 00:28:38,470 this is precisely one of the things I want to enable with Union, 343 00:28:38,730 --> 00:28:40,270 which I talked about yesterday. 344 00:28:40,910 --> 00:28:43,490 I've already talked with Andy about this before. 345 00:28:45,430 --> 00:28:49,790 Basically, the long-term vision here is what I want to enable technically. 346 00:28:51,130 --> 00:28:58,030 So if you're worried about the technical side of things, we are also working on that side. 347 00:28:59,745 --> 00:29:03,825 Yeah. So we've been working on this for a while. 348 00:29:05,725 --> 00:29:10,865 Like, I don't know if you know, but if I pop my Figma open right now, 349 00:29:10,925 --> 00:29:16,365 you would see that like Nate, a few people from the VDG, Manuel, 350 00:29:16,625 --> 00:29:20,985 everybody is like they have like hundreds of comments on our icons because we're 351 00:29:20,985 --> 00:29:21,965 trying to make them better. 352 00:29:21,965 --> 00:29:24,925 And that's another cool thing that you can do like for any 353 00:29:24,925 --> 00:29:28,065 any asset in figma or the sorry pen pot you 354 00:29:28,065 --> 00:29:31,025 can go in and uh once we have 355 00:29:31,025 --> 00:29:33,825 it you can comment on everything and say hey i don't 356 00:29:33,825 --> 00:29:36,565 like x y and z for this reason we can 357 00:29:36,565 --> 00:29:40,165 quickly implement that i'm also we're 358 00:29:40,165 --> 00:29:46,165 also doing uh some chats with uh with ben up here sorry to i'm i'm name calling 359 00:29:46,165 --> 00:29:52,905 i'm so sorry not not putting anyone on the spot but to actually deploy PenPod 360 00:29:52,905 --> 00:29:59,725 at a project level so that all of us in the community can actually benefit from it and access it, 361 00:29:59,805 --> 00:30:05,025 it would take some time for us to bring the assets from Figma to PenPod, 362 00:30:05,165 --> 00:30:08,685 but as a designer, I don't think it's that hard. 363 00:30:09,105 --> 00:30:14,285 I think it might be easy. We will leave a lot of stuff that Untitled provided 364 00:30:14,285 --> 00:30:16,205 to us behind and we'll create our own. 365 00:30:16,205 --> 00:30:19,185 But the idea is that we 366 00:30:19,185 --> 00:30:22,225 we right now the the the Figma 367 00:30:22,225 --> 00:30:25,425 document is kind of at a personal level so we're 368 00:30:25,425 --> 00:30:28,085 not using it at an like for lack of 369 00:30:28,085 --> 00:30:33,325 a better word at a community or enterprise level and so if we use penpot if 370 00:30:33,325 --> 00:30:37,145 we migrate to penpot we'll be able to like you know use it for the entire community 371 00:30:37,145 --> 00:30:45,285 so that's that's coming soon hopefully after academy so anyway there you go 372 00:30:45,285 --> 00:30:47,265 And by the way, I have the icons, 373 00:30:47,545 --> 00:30:49,625 the icon pack, if you want to try it out. 374 00:30:49,705 --> 00:30:54,045 I can give you a tarball, and you can kind of make it look cool. 375 00:30:56,445 --> 00:30:59,385 Anyone else? Any questions? Yes. Yeah. 376 00:31:01,285 --> 00:31:06,345 So just to get it from a developer point of view, you have all the colors, 377 00:31:06,385 --> 00:31:10,945 and they are made to fit each other. 378 00:31:10,945 --> 00:31:19,345 And so I still have for example a color highlight and this will then map to 379 00:31:19,345 --> 00:31:24,825 one of those color names is there enough time maybe I can show yeah like how 380 00:31:24,825 --> 00:31:28,005 much time do I have oh okay well let's open Figma, 381 00:31:30,425 --> 00:31:36,785 so yeah let me this one, 382 00:31:38,805 --> 00:31:39,365 so 383 00:31:42,825 --> 00:31:46,325 So, and by the way, I'm using the icons right now, so get jealous. 384 00:31:51,301 --> 00:31:53,861 Okay, so this is stuff that, again, please, 385 00:31:55,861 --> 00:32:02,501 don't feed the Forenex machine. This is not news. This is not changes. This is experimental. 386 00:32:03,281 --> 00:32:04,741 Okay? This is not official. 387 00:32:07,661 --> 00:32:11,841 We're ready. We're ready to go. Yeah. 388 00:32:13,321 --> 00:32:19,881 I love it. That's how we do it in Plasma. We go from proof of concept to delivery. So... 389 00:32:22,001 --> 00:32:30,541 So let me see. So let me go down to the to the foundation. 390 00:32:30,561 --> 00:32:40,921 So for colors and forgive me if I'm doing this a little bit impromptu, but it's. 391 00:32:42,981 --> 00:32:49,561 So if you notice the left hand side is is your classification. 392 00:32:49,561 --> 00:32:51,941 So these are primary colors. 393 00:32:52,381 --> 00:32:54,921 We have gray, primary error, warning, and success. 394 00:32:57,781 --> 00:33:01,801 Okay. And if you go down, we have our secondary colors. 395 00:33:01,901 --> 00:33:05,421 These are accent colors, right? They're not the ones that you use most of the 396 00:33:05,421 --> 00:33:08,761 times, but if you have a specialized app that, you know, hey, 397 00:33:08,941 --> 00:33:13,761 it's the app that sells lemonade, you know, you want to put the lime color there 398 00:33:13,761 --> 00:33:15,861 a lot. So maybe you want to use that. 399 00:33:18,061 --> 00:33:20,861 So we would have all these colors available. And like I said, 400 00:33:20,881 --> 00:33:21,801 again, they're all correlated. 401 00:33:22,041 --> 00:33:27,321 So each of these is a variable that is, I don't know how we would call it, 402 00:33:27,381 --> 00:33:29,381 but it would be orange 25 something. 403 00:33:31,881 --> 00:33:35,941 So yeah, we definitely have like the use cases. 404 00:33:36,001 --> 00:33:43,301 Now, if plasma has some other use use cases that are not covered by this, we're happy to make it. 405 00:33:43,401 --> 00:33:46,961 We can just find another color that we need to work on. 406 00:33:49,561 --> 00:33:55,141 So for typography, again, I think most of the times we would be expanding the 407 00:33:55,141 --> 00:34:00,481 amount of UI variables that we have rather than shrinking it. 408 00:34:01,001 --> 00:34:06,681 So we would include larger fonts for various situations. 409 00:34:06,681 --> 00:34:13,181 And this is someone mentioned, you know, using for web display fonts are usually 410 00:34:13,181 --> 00:34:16,121 used in web. So that's why we have them. 411 00:34:19,001 --> 00:34:23,861 This is our shadows and our blurs. Right there. 412 00:34:24,521 --> 00:34:27,121 I mean, they don't look like much on this screen, but like, you know, 413 00:34:27,141 --> 00:34:28,821 once it's in the system, it'll look different. 414 00:34:31,701 --> 00:34:42,081 Our grids and spacings again same idea and I know these are untitled icons so 415 00:34:42,081 --> 00:34:45,941 if you go this is the one where we have all of our icons. 416 00:34:49,204 --> 00:34:52,824 And again, you see these numbers here. These numbers are all comments. 417 00:34:52,864 --> 00:34:55,424 So we've been going through some iterations. 418 00:34:55,844 --> 00:35:01,184 And actually, just last week, I was working on the transportation icons. 419 00:35:01,984 --> 00:35:07,024 So I think I'm working on those with Volker. Yeah, at some point, 420 00:35:07,044 --> 00:35:08,524 he might be around somewhere. 421 00:35:10,104 --> 00:35:14,044 But yeah, so this is the before. And this is the after. 422 00:35:14,164 --> 00:35:18,384 And as you see, we have a few comments here that we need to address, right? 423 00:35:19,924 --> 00:35:25,484 Like I said before, there was there's versioning. I believe the versioning is down here. 424 00:35:28,184 --> 00:35:33,124 I'll find it one day. But it's, it's, it's present. I can, I can promise you that. 425 00:35:34,364 --> 00:35:37,344 Anyway, so does that make sense? Does that answer your question? 426 00:35:37,544 --> 00:35:40,324 Yep. All All right. Very cool. Anyone else? 427 00:35:40,804 --> 00:35:42,984 And we have five minutes. Hi. 428 00:35:43,664 --> 00:35:48,584 So I just had some small question since I'm more a programmer. 429 00:35:48,804 --> 00:35:51,484 I don't understand design. 430 00:35:52,724 --> 00:35:59,504 So how can we programmers help designers to get things moving forward and stuff? 431 00:36:00,264 --> 00:36:05,704 Well, I can think of a few things, but the main one I think it matters to us is that, 432 00:36:05,764 --> 00:36:09,944 like I said before, we need to have a two-way communication 433 00:36:09,944 --> 00:36:14,024 loop so right now 434 00:36:14,024 --> 00:36:18,604 it seems to me that our our designers are not as connected with our developer 435 00:36:18,604 --> 00:36:27,064 base uh we could do better but um it's a matter of saying for example let me 436 00:36:27,064 --> 00:36:33,344 give a quick example nate you mentioned like some maybe some a few days ago there 437 00:36:33,404 --> 00:36:38,404 someone who submitted an icon request and Nate immediately told us in the design team, 438 00:36:38,564 --> 00:36:44,624 hey, now we have two new icons that you need to make because Breeze changed. 439 00:36:44,864 --> 00:36:48,884 Now it expanded to two more icons, but that's not reflected on this system. 440 00:36:49,424 --> 00:36:55,564 So it's about doing that. It's about telling us, hey, now we're changing this. 441 00:36:55,884 --> 00:37:01,224 For example, I don't know, our toolbars now are green, So make sure that it's correlated. 442 00:37:01,684 --> 00:37:06,764 We have talked about maybe having some, I don't know if Figma or Penpon can 443 00:37:06,764 --> 00:37:12,724 do this, some kind of output file that contains all the stuff that is made there. 444 00:37:12,824 --> 00:37:16,444 And it can be correlated to the Plasma code somehow and just basically say, 445 00:37:16,544 --> 00:37:20,944 you know, note the differences or like design system releases new things. 446 00:37:21,144 --> 00:37:23,904 Therefore, go change X, Y, and Z in Plasma. 447 00:37:25,004 --> 00:37:29,164 I don't know if that's possible. But I think the main, main thing is just having 448 00:37:29,164 --> 00:37:32,024 that, you know, let us know and we will let you know. 449 00:37:34,648 --> 00:37:39,268 Me again so going into 450 00:37:39,268 --> 00:37:42,728 the same kind of direction uh communication 451 00:37:42,728 --> 00:37:45,568 to uh i don't think there is a 452 00:37:45,568 --> 00:37:49,068 real really uh two-way communication 453 00:37:49,068 --> 00:37:52,388 channel currently so maybe we 454 00:37:52,388 --> 00:37:55,408 could formalize this because if i 455 00:37:55,408 --> 00:37:58,088 have an uh if i 456 00:37:58,088 --> 00:38:01,088 need an icon in my application i usually say okay what's there 457 00:38:01,088 --> 00:38:04,588 and yeah that looks about okay 458 00:38:04,588 --> 00:38:07,888 but I guess it's more like translation 459 00:38:07,888 --> 00:38:11,048 where I can go to the translation team and 460 00:38:11,048 --> 00:38:13,948 say or they come to me even and say 461 00:38:13,948 --> 00:38:17,708 well that's not really clear and but 462 00:38:17,708 --> 00:38:20,528 in this case maybe some kind of 463 00:38:20,528 --> 00:38:23,628 way to say okay is it okay to use that 464 00:38:23,628 --> 00:38:26,688 icon for that purpose should I ask for another 465 00:38:26,688 --> 00:38:29,348 icon um yeah i think we 466 00:38:29,348 --> 00:38:32,748 don't have that at all currently no and 467 00:38:32,748 --> 00:38:36,488 and actually in in redesigning the icons we've noticed some of this too where 468 00:38:36,488 --> 00:38:42,928 the icon that we had in previous times was not as as accurate as what it was 469 00:38:42,928 --> 00:38:47,768 being used for and so we had to say and not only that when we designed the icons 470 00:38:47,768 --> 00:38:52,428 for this we noticed that hey the icon is called i don't know apple right Right. 471 00:38:52,808 --> 00:38:55,568 But what do we mean? A red apple, a green apple, a blue apple? 472 00:38:55,708 --> 00:38:59,948 Like, do we need to meet an apple with a like do we mean like apple the company 473 00:38:59,948 --> 00:39:01,788 or do we mean apple as the fruit? 474 00:39:01,908 --> 00:39:05,328 Like you had to be more exact. And because of that, a lot of things changed. 475 00:39:07,068 --> 00:39:10,768 So, yeah, we need to we need to formalize that. I mean, if there was a way that, 476 00:39:10,868 --> 00:39:17,088 for example, GitLab can can like push some like, you know, issues into the VDG 477 00:39:17,088 --> 00:39:20,608 channel automatically upon change, we can action those. 478 00:39:20,608 --> 00:39:29,388 That might be easy anyway yeah oh sorry all right i'm telling they're telling 479 00:39:29,388 --> 00:39:31,748 me to stop so thank you everyone.