Design System Updates – Oct 2024

Friday, 18 October 2024 | Andres Betts

Update 1

Great news, everyone! We now have all the necessary components to start creating our 16px icon collection. I believe that we can work on the design and creation of these icons simultaneously.

Here are some general guidelines to consider when designing the 16px icons:

  • Our objective is to correlate the designs from the 24px collection to the 16px as closely as possible.
  • When in doubt, create an icon that resembles or simplifies the 24px shape.
  • Use 1px lines for the icons.
  • Utilize the IconGrid16 component to guide your design.
  • Once the icon is complete, change the icon color to the “ColorScheme-Text” color.
  • To export the icon, use the Icon Jetpack plugin.

I am excited to begin working on this project and would be grateful for any designer assistance that is available. If you need help learning Figma, please don’t hesitate to reach out, and we will gladly provide our support.

If you require edit access to the Figma file for the 16px icon collection, please let me know. I believe that collaboration and teamwork will lead to the creation of an amazing set of 16px icons.

Update 2

Additionally, I wanted to let you all know that I have made some edits to the color scheme of the graphic. I would appreciate any feedback you may have on the changes, and whether I might have missed anything. Let’s work together to create a cohesive and visually stunning icon collection!

Once our colors are aligned to what we need in the system, we will update the issue recently created for this purpose. This issue is under heavy development and things are changing rapidly. Read with caution and expect updates.

https://invent.kde.org/teams/vdg/issues/-/issues/82

Colors in the design system have changed. I need to correlate the colors to the color labels below. It will look a little off for some time. However, the color variables in Figma are updated to the latest feedback. Just this graphic needs the updates as well. Only the color box is correct, not the color names

Update 3

This week we took previously-created Ocean window shadows created by Manuel de la Fuente and integrated them in the design system. The shadow variables in Figma now use Ocean-inspired shadow levels to make them more visible. This is to address feedback on shadows previously being too faint. Hopefully these make a difference.

For some reason that I don't know, the XL shadow looks fainter than the LG shadow, but it seems to be a visual bug in Figma. If you apply the XL shadow, it should appear correctly in your graphics.

Update 4

Transition to PenPot is on hold for now until we have the community instance created and path manipulation updates are applied. This would impede us from recreating icons the same way we have them right now.