Plasma Next, visual design evolution for Plasma.
Thank you, thank you. I'm so happy to see so many of you here today.
I've been waiting for this moment for a while.
I don't know if you all know me, but my name is Andy Betts, and I've been with
Katie for about 20 years.
And I'm a graphical designer, a UX person, and I also work in QA on my day job.
So that's one thing about me. And this is my dog Lila.
Like I said, she has to be in every picture, so I brought her along.
So as many of you know, I'm part of the visual design team primarily,
So that's where we hang out most of the time.
And about, I want to say maybe eight months ago,
we started talking in the chat about how we don't want to use or we want to
evolve 22 pixel icons to 24.
Given that 24 is a multiple of eight and it's a lot easier to work and construct
than what we have right now. Now, and our base now is 22.
So these icons tend to have problems, especially with resizing.
And they tend to look blurry. So that's one thing that, you know,
this sparked a conversation around that.
And I said, okay, well, how about I go ahead and, you know, try to,
I don't know, figure this out.
And pick some of those icons and turn them into 24s. and that got us started with a small project.
We're only just calling it Plasma Next right now, okay?
That is not final by any means, but it's just the only way that we could think about it.
And today, I think what I want to introduce, what I want to present is something
that we have been working on for some time that evolved out of this idea of building new icons.
And it's something that a lot of commercial entities are using,
and it's pretty effective when it comes to making design that is scalable,
that is repeatable, that is easier to use, even for non-designers.
So I think the big introduction is about design systems.
So how many of you have heard about design systems here?
Alright, you probably Yeah, okay, a fair amount of you So.
You know, interestingly enough, you probably already, as developers,
most of you use design systems to call up your colors, to call up your fonts, anything you need.
And it's defined by the software.
And then you just apply it. You don't have to do anything else.
But on the other side, visual designers like myself, we don't have any of that.
We don't understand any of that. and and not
only that uh we design on the abstract many times
without a lot of information from users with our
own set of assets with our own set of you know colors whatever and so whatever
comes out is not exactly what you have on the system and that makes it really
difficult because you know we make our developers go crazy and so we don't want
to do that that's not the goal,
and so one of the things that is really good about
design systems you know they have
their downsides but one great thing is that they are make they make you go quick
you know very quickly you can pick out you know your buttons your radio buttons
your check boxes everything you need just put them on a on on a sheet or a layout
and it's the layout most of the times is made for you If you use variables, it's all good.
But like I said, all of that work was not available to designers until,
you know, applications like Figma started coming out, Sketch.
Well, and now we have our open source equal, which is Penpot.
And we're very excited about that. I'll tell you more about it later.
And so now that world of variables, that world of synchronized,
you know, graphical assets, it's available to us as well.
And we can more easily tell developers, this is exactly what we're looking for.
Or developers could even mock up some of their applications before committing
to code by doing it on the graphical application.
So now this is, I spoke a little bit about this a minute ago,
but our current state is not great, right? Right.
In fact, I think that, you know, one interesting thing is that we build a graphical
design system, a graphical system, but we don't have a lot of designers in our
in our group in the sense of graphical designers.
I know all of you design, but graphical designers, they're not here. We don't have as many.
And and for building a graphical UI, we need them. and I feel like right now.
We have a huge mountain to climb as designers because most of our work is based
on, you know, on code that sometimes most graphical designers don't know how to read.
I am one of those. And so the barrier to entry is really high. You have to learn a lot.
And maybe that's not the specialization that these people want to do.
But I do know that many of them, maybe in their day jobs, use stuff like Figma
to build some of their assets.
And so that is familiar to them.
Now, at the same time, I think that because we haven't had design systems before
in KDE, we just basically do what seems best.
And we design at a level that is, you know, kind of small because we don't want
to upset the system, right?
And that makes us basically shrink our contributions.
We try not to do large redesigns. We try not to make, you know,
redeployments of like various apps and try to reimagine them in some other way.
We just can't deliver that.
In fact, maybe part of the reason and why we stuck with Breeze for so long is because of this.
Because it just seems like the manpower for this work is not there.
And when we start thinking about design, the design just doesn't expand.
We don't have a good comprehensive view of what we want to do.
Therefore, whatever we want to achieve and want to output.
It's based on a lot of assumptions that we don't understand very well.
So that's not a great place to be as a community, especially,
for example, I don't know if some of you recently were part of our Plasma 6 release.
And as soon as we started talking 6, many, many people came to our forums and
our chats and saying, hey, what else are you changing? Are you changing the UI?
Are you changing the wallpaper? Are you changing the eye? what are you changing
and you know most of the times uh you know
we had to scale back and say right now
we're working stability we're working on the things that matter you know for
the system to to function appropriately but on the back of my mind i was thinking
well you know there's not a whole lot that we could have done anyway even if
we wanted to as far as design goes because the The reach of these changes is just humongous.
And not only that, we as designers would not even provide any kind of visual
direction for what we want to do.
So whatever we would have made up for Plasma 6 would have been just,
you know, something for the moment without a lot of thinking behind it.
And so I don't think we want it to be in this situation.
Now, I think, in essence, our current systems demand too much from you, from us.
We're volunteers. We do this when we can.
And designers do the same. You know,
just as much time it takes to code something, things sometimes we
spend hours and hours hours iterating on
colors designs layouts and
just really nitpicking you know taking stuff apart making sure that it works
properly so it's very time consuming this is why i'm wearing glasses now because
i didn't used to wear glasses so i think we we need to make a change so um,
Like I said, we followed this process to get started on a design system.
There are a few out there that you can find that can immediately deploy into Figma or Penpot.
We took one called Untitled UI, and they have a free version that you can start building on.
Now, by that, I'm not saying we are making an Untitled UI system.
We're just using the parameters they have to organize our assets.
The cool thing is that at the end of the day, in a design system,
we can talk the same language.
We can say we have a red color that is called this type of variable,
and that's exactly the color that you can use in the system.
If one day we decide that maybe we don't like blue anymore as our accent color,
we can just go back to the Figma document where our system is and say,
well, we're going to change it to red and let's see how it looks.
Because now all of the graphical components in Figma will change to that color
and you can easily see whether it actually makes sense.
So let me show
you a little bit about what we
did so and this one i'm just not going to use my phone but we took uh our foundational
uh graphical elements so this is colors icons we took typography.
And the spacing system, and I believe there's one more typography.
There's five. I'll show you one.
So we worked on colors. So the first set of colors, now we don't have as many
colors today as there are in the new design system, and these colors are different than Breeze.
So just to make that clear for everybody, we're not evolving Breeze.
We're trying to sort of create something along the lines of Breeze but a little bit different.
So I.
All of these colors right here that you see, they have their specifications,
and they have a variable name assigned to them.
In the design system, they are, you know, we can call them whatever we want,
but right now they're just being called, for example, purple 600, right?
And we have from 25 to 100, so that's about 11 colors, I think, for each of them.
And we have our primary or
secondary in our colored variables they
all have a good contrast rating and we can suggest what contrast rating they
should have you know against text for example so these are our primaries now
they don't they don't look too different but this is the all of the ones that you see here are,
it's the 500, so the color 500 in the middle of all the variables.
So that's usually the main color or the accent color or the primary color that you use in a UI.
Other colors that are like, you know, more intense or less intense than 500
can actually, you know, be used in different situations in your UI.
But the good thing is that all of them are correlated, so they have the same strength and value.
And when you look at them in a color curve, they usually follow a quarter color curve.
We also touched on typography, and again, these are all suggestions.
So, we have display typography with their sizes, their rem size,
their line height, with their tracking, and we have regular sizes as well.
So, we're basing this on the font Inter.
Not that it has to be Inter, but it seemed like a good font for the moment.
It's been developed heavily, and most recently they came out with version 4
of this font, and it's especially made for UI, so you don't have to worry too
much about whether it's going to look legible or not.
So that is one.
And I'll show you more later. So these are the specifications that you get.
For example, right? If you have display size of 72, then your line is,
or you can also translate that to 4.5 rem.
Your line height will be 90 pixels and so on, and a tracking of minus two so
that your text doesn't go too long.
We also have a system of shadows. And this is nothing too crazy.
I think we already have most of it. But basically, we're suggesting shadow strengths
of 1x, 2x, 3x. and we have their colors all put in through the color system
that's in the design system.
So if we wanted to change that, it would just be a matter of changing the color in the shadow variable.
We also have a spacing system, which is, honestly, something we need urgently, right?
This one is not, this is very common for web, but we're basing it on an 8-pixel grid.
So we have sizes of, you know, from 8 and up.
Well, we also have 4 just in case there are some elements in the UI that really need a good spacing.
But the idea is that if you call up the variable that has the spacing that you
need, whatever we call it, right, then you'll get a UI that's laid out the proper way.
And we will eventually provide some samples of graphical assets that show how we utilize them.
But the first thing is to have this and expect that maybe Plasma in the future
will be a lot more spaced out very nice.
And then we made icons. And this is probably what you've seen the most This
is the work that we started doing a few months ago.
And we took, like I said, the 22-pixel library and we turned it into 24.
But we quickly noticed that the icons in the 22-pixel library were not always as good or as updated.
We have icons that were built forever ago, and they needed updating quickly.
Not only that, we also with the help of a few of the VDG members here,
we got a lot of comments on the icons on, you know, this is how we express actions.
This is how we want to like, you know, place meaning.
And quickly, instead of just redoing the icons from 22 to 24,
we actually redesigned the icons.
The icons in 24 which means we're gonna have to go back to other icons to like the the 16s and the,
32s and and so on and modify them
but so far so good i mean we uh how many icons do we have in the breeze library
like 1600 something like that that's how many we have here so it's a lot of
work And this is kind of how it looks on the system right now.
So one of the VDG members put the icon system.
Well, Manuel over there, actually let me shout you out, because Manuel made
us a plug-in on Figma that actually exports all of these icons with the variables included.
The color variable included in the CSS bit of the SVG.
And so once you export it the system
can easily just pick it up and it's
working so all the color changes work and
so we don't have to do much more now i am not saying that this is how it should
look right i'm not saying that i'm just showing you what it looks like today
so these are some of the changes so i think our iconography has gotten got a
little bit better more direct a a little bit chunkier too,
because we had one pixel icons before and they can be very thin,
especially on high density screens,
they can look very thin and not legible sometimes.
So we made them a little bit bigger.
Then this is kind of what system settings looks like.
So, and by the way, these icons that are colorful here, it's not a mess,
it's just that they come from a different collection that we haven't edited yet.
So it looks a little bit like that like ta-da,
This is what this cover looks like. Again, like I said, the bottom line,
the colorful icons, they don't come from the same collection.
This is, for example, Ocular.
Or Gwenview.
Right? So, in Figma, I don't know, who of you have worked in Figma before at all?
Or seen, okay, you're probably used to some of these images.
So these are the variable panels that you see on each side.
So, for example, and again, this can work both ways.
So if you tell us as designers, hey, we don't want this color because it just
doesn't work for us, we can go here and create a new variable for the design
system and just give it the properties that it needs.
So we call the color property, the strength, and the name.
And then up top you see the color that we get.
And it becomes available immediately for the system.
We can give them certain specific names like you see on this middle column.
And I mean, they can be adjusted. These are probably just coming from untitled
UI, but if we have specific ones from Plasma directly, you can just tell us and we can change it.
So on the other side, for example, for shadows, We have this.
We have just named them the same as untitled did. So extra small,
small, medium, large, whatever it is.
But we can call them whatever Plasma wants us to call them if we want to have
a one-to-one correlation.
Then, for display fonts, this is how you do it.
Well, for all kinds of fonts. So, in a regular UI, we would be using text, not display.
But, in fact, actually, I made this same library in Penpot.
So, it's available in Penpot now. We're actually trying to get off of Figma.
So, for practicality reasons, we just did that first there. layer,
but Figma is not the tool we want to use forever.
So likely after Academy, we will continue working and it will happen on PenPod.
All right. So does that make sense? Is that clear?
Yeah? Cool. All right. So what were we thinking behind all this, right?
Why do we want to sort of start out small and then go something bigger?
And I think that I've laid out some of these ideas already, but
we want to base our principles on cleanliness
and simplicity on you know the
direct communication with the with the user and I
don't I don't think that you know
keeping our same design language
is is feasible for that especially when we want to sometimes you know make big
changes and we just cannot not execute because it's so much work so what i'm
proposing today is that we adopt a design system,
for graphical uh output that we integrate the plasma variables into this design
system so that we can communicate them and then after that once we complete
that uh we can start seeing this work on the desktop,
and eventually I.
I want us to build components, graphical components, but also Plasma-ready components
that mimic what we have on the graphical system.
We haven't done this ever, so I'm pretty sure that we're going to miss a lot of things.
That we there's a lot of unknowns but i
feel like this is one method that we
can all sort of deliver at scale attract more
more designers to the team uh make
it less confusing for our
developers as to what it is that we want to
do uh and deliver a great system so
hopefully who knows maybe we can dream big in maybe a couple years we can have
you know a completely new desktop look so but it starts with foundations first
so I just wanted to mention that to you today that's my presentation thank you so much.
And how are we on time 18 minutes let's talk then let's talk for a minute it
so any questions from anybody so this is a fantastic vision i think is it on okay good um,
what what uh looks exciting to me is uh the fact that you know you you doing
design stuff requires a language that designers speak that you know if you if
you have if you worked out how to put that in a computer and uh figma and penpot
have making have been making systems that do that,
it would be great if we could adopt our systems to, you know,
also speak that language and then have a much more efficient way of communicating
and have a richer way of storing all the data.
And a thought occurred to me, we often talk about, we need more apps and many
apps these days are web apps.
Progressive web apps are a thing that are fairly well supported on browsers, even on desktop.
And these design systems are often also used in web applications.
So maybe it will be possible to sort of make a web template CSS library that
could make it possible to have web applications look like KDE applications and
integrate well with the desktop.
So I don't know if you've thought about that. It is very possible.
So these systems have, like, most of the design systems are web first.
So they're meant for web work.
And depending on how that works, we could actually have a very good,
kind of like similar look on all the places.
The good thing is that at least Figma and PenPod are able to actually export CSS.
So I know that we don't use CSS in Plasma, that I've been told that many times.
But not yet. I'm looking at you.
But what I'm saying is that at least the CSS bit can tell you exactly what you're
working with, and you can at least copy it into some other language that you
need and make it the same.
But we were talking with Nate particularly some weeks ago, too,
that sometimes developers want to use variables that are more familiar to them
and not call it just Red 500, right, because that makes no sense.
But we would have to have good like
documentation around that and good translation tables that
show these variables in plasma or the
web translate to this color in the system so that we don't make bad changes
either right and and i'm i'm saying this you know with a lot of with a lot of
uh hope that we can have more designers that can help us maintain the design
system because this is a tool
that, you know, also needs a lot of care and keeping up to date.
But I do see a future where there is like a desktop look and there is a web
look that is almost the same.
I have a question about the system, the design system.
Does it have some designer's code approach when we can make changes and make
kind of magic quest and see that this designer changes these lines,
the designer changes these lines, get back to the previous version,
release version 1.1, 1.1.1, and so on.
Does the current system support this approach? It's a little bit different.
It's more like designer-oriented. They're very artsy, but they have libraries.
So you build, your design system outputs something called a library,
and it's a library of assets.
And it's all stored in the graphical system in Figma or Penpot, but you lock that up.
You can, you know, say no one but these two people can work on that so that
everyone else is a beneficiary of that library and they can take the assets
and start building whatever they want.
But if you want to make changes, that designer can say, hey,
I'm requesting that this button now is a square rather than a rectangle.
They make that change and they send it up to the library and the library maintainer
can say, yeah, I accept that.
Let's make the change. That'd be great. Let's integrate it. it um figma
and penpot also have uh history and they
have versioning so they're i don't have
it here but like if you go into one of their menus you can say you
know who made the last change and let's go back to that let's go back to the
previous one it's more graphical it's not like you know uh like git for example
but uh it's it's definitely possible it's it's more design oriented like point
and click but you can have all those things and you know you can prevent a lot of
problems and disasters that way.
Yeah, something we didn't do before, actually.
So not so much a question as more of a comment from my side.
For those of you who are wondering how are we going to achieve this technically,
this is precisely one of the things I want to enable with Union,
which I talked about yesterday.
I've already talked with Andy about this before.
Basically, the long-term vision here is what I want to enable technically.
So if you're worried about the technical side of things, we are also working on that side.
Yeah. So we've been working on this for a while.
Like, I don't know if you know, but if I pop my Figma open right now,
you would see that like Nate, a few people from the VDG, Manuel,
everybody is like they have like hundreds of comments on our icons because we're
trying to make them better.
And that's another cool thing that you can do like for any
any asset in figma or the sorry pen pot you
can go in and uh once we have
it you can comment on everything and say hey i don't
like x y and z for this reason we can
quickly implement that i'm also we're
also doing uh some chats with uh with ben up here sorry to i'm i'm name calling
i'm so sorry not not putting anyone on the spot but to actually deploy PenPod
at a project level so that all of us in the community can actually benefit from it and access it,
it would take some time for us to bring the assets from Figma to PenPod,
but as a designer, I don't think it's that hard.
I think it might be easy. We will leave a lot of stuff that Untitled provided
to us behind and we'll create our own.
But the idea is that we
we right now the the the Figma
document is kind of at a personal level so we're
not using it at an like for lack of
a better word at a community or enterprise level and so if we use penpot if
we migrate to penpot we'll be able to like you know use it for the entire community
so that's that's coming soon hopefully after academy so anyway there you go
And by the way, I have the icons,
the icon pack, if you want to try it out.
I can give you a tarball, and you can kind of make it look cool.
Anyone else? Any questions? Yes. Yeah.
So just to get it from a developer point of view, you have all the colors,
and they are made to fit each other.
And so I still have for example a color highlight and this will then map to
one of those color names is there enough time maybe I can show yeah like how
much time do I have oh okay well let's open Figma,
so yeah let me this one,
so
So, and by the way, I'm using the icons right now, so get jealous.
Okay, so this is stuff that, again, please,
don't feed the Forenex machine. This is not news. This is not changes. This is experimental.
Okay? This is not official.
We're ready. We're ready to go. Yeah.
I love it. That's how we do it in Plasma. We go from proof of concept to delivery. So...
So let me see. So let me go down to the to the foundation.
So for colors and forgive me if I'm doing this a little bit impromptu, but it's.
So if you notice the left hand side is is your classification.
So these are primary colors.
We have gray, primary error, warning, and success.
Okay. And if you go down, we have our secondary colors.
These are accent colors, right? They're not the ones that you use most of the
times, but if you have a specialized app that, you know, hey,
it's the app that sells lemonade, you know, you want to put the lime color there
a lot. So maybe you want to use that.
So we would have all these colors available. And like I said,
again, they're all correlated.
So each of these is a variable that is, I don't know how we would call it,
but it would be orange 25 something.
So yeah, we definitely have like the use cases.
Now, if plasma has some other use use cases that are not covered by this, we're happy to make it.
We can just find another color that we need to work on.
So for typography, again, I think most of the times we would be expanding the
amount of UI variables that we have rather than shrinking it.
So we would include larger fonts for various situations.
And this is someone mentioned, you know, using for web display fonts are usually
used in web. So that's why we have them.
This is our shadows and our blurs. Right there.
I mean, they don't look like much on this screen, but like, you know,
once it's in the system, it'll look different.
Our grids and spacings again same idea and I know these are untitled icons so
if you go this is the one where we have all of our icons.
And again, you see these numbers here. These numbers are all comments.
So we've been going through some iterations.
And actually, just last week, I was working on the transportation icons.
So I think I'm working on those with Volker. Yeah, at some point,
he might be around somewhere.
But yeah, so this is the before. And this is the after.
And as you see, we have a few comments here that we need to address, right?
Like I said before, there was there's versioning. I believe the versioning is down here.
I'll find it one day. But it's, it's, it's present. I can, I can promise you that.
Anyway, so does that make sense? Does that answer your question?
Yep. All All right. Very cool. Anyone else?
And we have five minutes. Hi.
So I just had some small question since I'm more a programmer.
I don't understand design.
So how can we programmers help designers to get things moving forward and stuff?
Well, I can think of a few things, but the main one I think it matters to us is that,
like I said before, we need to have a two-way communication
loop so right now
it seems to me that our our designers are not as connected with our developer
base uh we could do better but um it's a matter of saying for example let me
give a quick example nate you mentioned like some maybe some a few days ago there
someone who submitted an icon request and Nate immediately told us in the design team,
hey, now we have two new icons that you need to make because Breeze changed.
Now it expanded to two more icons, but that's not reflected on this system.
So it's about doing that. It's about telling us, hey, now we're changing this.
For example, I don't know, our toolbars now are green, So make sure that it's correlated.
We have talked about maybe having some, I don't know if Figma or Penpon can
do this, some kind of output file that contains all the stuff that is made there.
And it can be correlated to the Plasma code somehow and just basically say,
you know, note the differences or like design system releases new things.
Therefore, go change X, Y, and Z in Plasma.
I don't know if that's possible. But I think the main, main thing is just having
that, you know, let us know and we will let you know.
Me again so going into
the same kind of direction uh communication
to uh i don't think there is a
real really uh two-way communication
channel currently so maybe we
could formalize this because if i
have an uh if i
need an icon in my application i usually say okay what's there
and yeah that looks about okay
but I guess it's more like translation
where I can go to the translation team and
say or they come to me even and say
well that's not really clear and but
in this case maybe some kind of
way to say okay is it okay to use that
icon for that purpose should I ask for another
icon um yeah i think we
don't have that at all currently no and
and actually in in redesigning the icons we've noticed some of this too where
the icon that we had in previous times was not as as accurate as what it was
being used for and so we had to say and not only that when we designed the icons
for this we noticed that hey the icon is called i don't know apple right Right.
But what do we mean? A red apple, a green apple, a blue apple?
Like, do we need to meet an apple with a like do we mean like apple the company
or do we mean apple as the fruit?
Like you had to be more exact. And because of that, a lot of things changed.
So, yeah, we need to we need to formalize that. I mean, if there was a way that,
for example, GitLab can can like push some like, you know, issues into the VDG
channel automatically upon change, we can action those.
That might be easy anyway yeah oh sorry all right i'm telling they're telling
me to stop so thank you everyone.