Typical Workflow with Imported Components

[eslksw]

Hello,

I am new to both (proper, I have built many frontends in the past) UI design and Penpot, but I am trying to make the best of it. I would like to refactor an old frontend of mine from the ground up and to this end I am trying to use Penpot. The project will follow Material Design 3, and I found the Penpot library: Penpot | Libraries & templates detail page. However, I don’t really know how to use it in my workflow? I have imported it, now it’s in “Drafts”, and I can’t really use its components in other projects. In Draw IO, for example, all the components you import can easily be added to your canvas from the sidebar. What is the equivalent in Penpot world?

Thank you in advance.

[LauraKalbag]

To use a library file, you need to connect it to your working file from the Assets tab. First use the Add library button:

Then use the + icon button alongside the library name to connect it to your file:

When it’s connected, it will show on the left side of the Libraries dialog:

And you’ll be able to access the components from the Assets tab, under the Material Design 3 library name:

You might find this tutorial I wrote about components useful:

Tutorial: How to use components and shared libraries

Just a word of warning, I think I’ve had some issues with the components in that Material Design 3 library in the past. (Some of the layouts don’t make the most of Penpot’s features.) So if you need any help, please come back here and let me know!