Test use of shared libraries / Penpot

[GBKS]

Shared libraries can potentially be very useful in improving our workflows, but also add a bit of complexity. Let's feel out what's possible.

One approach could be to split the icons into one library, as that's a separate project already. Second, the screens could be in a separate file from the UI Kit elements (colors, type, buttons, etc).

Things to look into:

• Is it possible to push updates to a main component in a separate shared library (and possibly break them in all other files that rely on this library)?
• If the UI kit essentially consists of three files, how do I duplicate the set and have the references be updated (so my own new file with screens draws from my own component and icons files)?
• What is the performance impact? Good, bad, same?
• We found that the asset search is not 100% thorough. Does this affect the use of shared libraries?
• Do they work across teams? If I am part of multiple teams, does each team need to import the library?
• Is it possible to pull in a new version of a library and have all references update accordingly?

Eventually, we could post the UI Kit files on the Penpot shared libraries page.

[editwentyone]

would love to take this

[editwentyone]

https://penpot.app/libraries-templates

https://help.penpot.app/user-guide/libraries/#shared-libraries

[stackingsaunter]

@editwentyone hope you don't mind, I grabbed this because I wanted to move further and build wallet designs already

Is it possible to push updates to a main component in a separate shared library (and possibly break them in all other files that rely on this library)?

Yes. There's a dialog to confirm the action.

In a separate file, I updated the component and it changed immediately in the shared library. However, inly the icon changed, and the color didn't.

I did similar with Small icon text button, this time color changed, but the copy didn't:

Tried it several times, and sometimes color updates, other times not - I don't understand the underlying logic

[stackingsaunter]

If the UI kit essentially consists of three files, how do I duplicate the set and have the references be updated (so my own new file with screens draws from my own component and icons files)?

I duplicated whole test team to my local "Default" team. Copied files are already a shared library and there's no reference to the original files, no issues there.

[stackingsaunter]

What is the performance impact? Good, bad, same?

I found performance way better, however that may be affected by other optimisations I did with my browser (I had an extension which slowed down some sites), so I am not sure how it was it. Jumping now to our original files, it seems that it was mostly the extension fault, but performance still feels better in the test files.

[stackingsaunter]

We found that the asset search is not 100% thorough. Does this affect the use of shared libraries?

Yes, works the same, for me it's useless. But perhaps it can be fixed If we work out components naming better.

Eg, typing buttons shows only those:

[stackingsaunter]

Do they work across teams? If I am part of multiple teams, does each team need to import the library?

I think the answer is yes - each team need to copy the library into their team.

[stackingsaunter]

Is it possible to pull in a new version of a library and have all references update accordingly?

I think it's not possible - I may be wrong though, but I haven't succeeded in doing so

[GBKS]

I saw in the export help page, that you can export multiple Penpot files as a single .penpot file. So let's say we have a main file with all the screens and 3 shared library files. When you want to download the main file, it will bundle all libraries in as well. If you then import this again, you get 4 files added to your account. That is pretty crucial for letting people easily clone this multi-file setup.