🤝 Help Penpot move forward by Community Contribution

[BDV]

As you probably know, the Penpot Community has already helped advance Penpot in several areas.
Like e.g. helping to translate for text within penpot using WebLate.

adding a library and/or template

Penpot | Libraries & Templates

creating a plugin for Penpot

Penpot | Plugins

and the many other possibilities with the support of a Penpot member each time if needed.

---

Within this great Community, I suspect there are some who can get along with programming.
After consulting with a Penpot member, it would be brilliant should npm packages be supported within Penpot.

Why npm packages

npm, short for Node Package Manager, is the default package manager for the JavaScript runtime environment Node.js. It’s used to discover, share, distribute, and use code and packages for building JavaScript applications, including libraries, frameworks, and tools.

It gives design teams more control to import fully functional component libraries from the npm registry. The benefit of designing prototypes with a component library is designers get full functionality and fidelity without writing a single line of code!

See also Distribute UI across an organization article from Storybook

Storybook Tutorials

How to Contribute
Depending on how many people are interested in contributing, we can see how consultation will take place. E.g. through a shared document on e.g. cryptpad and creating a telegram or Discord or … group. In any case, someone from Penpot can be called upon to provide the necessary support for possible questions.

After that, I think it might be best to have 1 GitHub account where the community sends the commits to build the signature tuning for npm packages, before applying everything to Penpot’s GitHub repo. Should there be any other ideas of approach feel free to let us know.

How to Get Involved
Should you be interested in contributing see 🤝 Help Penpot move forward by Community Contribution - #3 by BDV or send me an Direct Message.

[ladybenko]

Hi, thanks for the initiative to bring this up to the community!

@BDV

After that, I think it might be best to have 1 GitHub account where the community sends the commits to build the signature tuning for npm packages, before applying everything to Penpot’s GitHub repo.

I believe these community projects should live in separate GitHub repos, though, like Penpot Desktop. This way, the community has have full governance of the project:

• The community decides which language(s) use for the implementation, code conventions, etc.
• The community handles PRs and reviews. At the moment, all PRs to Penpot’s repository must be approved, tested and review by someone from the Penpot team, and we need to prioritize our current releases. Keeping the project on a separate repo does not introduce this block.
• The community decides which Continuous Integration rules and tests to apply to the project.
• And many more! That’s the beauty of Open Source

Of course we can link (as we are already doing) these projects from our documentation and pages. And you can always reach out to ask questions, etc.

Cheers!

[BDV]

For this project, we are looking for the following

UI Designer

Someone willing to take on UI design and preferably experienced with:

• Penpot
• Inkscape or GIMP
• Preferably experience with UI design

Programmer

Experience with one of the following programming languages:

• Python
• JavaScript and/or React

Willing to us GitHub

Because we will probably use pyramid this is phyton-based and as fronted JS or React

Translators

Any language other than English is okay.
Normally, we will use GitLocalize.

Documentation

Writing documentation in English.

I created a Form where you can specify your preference
(Entering your Penpot forum username is mandatory, otherwise we won’t know who to contact.)

For translations into Spanish/Portuguese, we also accept translations from the Penpot crew

[shark]

Hi @BDV, in the initial message you’ve mentioned about usability of npm registry for the benefit of design teams. And then seeing multiple options for different skill-set requirements in the form you shared kinda makes me confused about what specifically we are building as part of this project.

Can you please help me clarify is it just one project or multiple projects which you’re proposing?

[shark]

Moreover I’m interested in this idea “bundle penpot pencil design system into an npm package”. Specifically because I personally want to use penpot more for my personal projects, so up until design part it’s okay but translating designs into a web app is the missing puzzle piece right now.

Also, I can make the npm package just for react backed apps to start with. This project does not require too wide range of skills, like design we already have and it’s mostly frontend coding work. Your thoughts are invited on this.

[BDV]

Hi @shark thanks for your questions, I will try to answer them as best I can.

@shark

Can you please help me clarify is it just one project or multiple projects which you’re proposing?

Its 1 project, the reason I choose Pyramid because it matches the philosophy I have in mind. Pyramid’s philosophy is ‘The Start Small, Finish Big, Stay Finished Framework’. So it is a project that will start small but could potentially grow into something bigger.

The idea is to do something similar like the UXPin Merge npm integration
So importing an NPM package to use within Penpot. Personally, I’m not quite sure whether it can also make sense to export from Penpot to an NPM package.

For example, the reason why I ask if there are people willing to translate that even if there is little text in the application that if possible it should be shown in the language used by the end user.

@shark

Moreover I’m interested in this idea “bundle penpot pencil design system into an npm package”.

Penpot is in the process of creating a Storybook . According to this article, it should be possible to create an NPM package from the Storybook.

Above all, don’t get overwhelmed, the idea is to start small. To me it seems with previous experience of e.g. PCB design or writing a little code yourself to think about what you want to achieve in the short term but also in the long term. Otherwise you run the risk that over time your initial design will no longer meet what you potentially want to achieve.

If you have any questions feel free to ask.

[shark]

Thanks @BDV for sharing the high level approach you have in mind. I understand that the goal of this project is to make importing any component library available in npm into penpot possible, please correct if I’m wrong.

And the use case I’m looking for is to be able to add penpot’s design system as an npm dependency in my web-app. The Storybook link is super useful for that, I’ll spin up a separate topic to find if there already exist an npm package for it, if not will try to bundle it up.

[BDV]

@shark

And the use case I’m looking for is to be able to add penpot’s design system as an npm dependency in my web-app. The Storybook link is super useful for that, I’ll spin up a separate topic to find if there already exist an npm package for it, if not will try to bundle it up.

Looking at Penpot’s NPM account, I don’t immediately see that there is a package available for what you are looking for. Since Penpot has a Storybook, GitHub account and NPM account, I think it would be best to be patient for a while by the time Penpot finishes their Storybook and hopefully adds it to their NPM account.

@shark

I understand that the goal of this project is to make importing any component library available in npm into penpot possible, please correct if I’m wrong.

Supporting every npm package seems impossible as there are just as many. If you look at the market percentage of javascript libraries you will see the following.
Or look @ the following

React Usage Statistics

UXPin only supports React-Bootstrap for NPM packages.
So it is certainly not the intention to support all npm packages.

As you have probably already noticed, should this idea be taken further, it is best to see exactly what will be achieved in the short and long term. For example, to determine the structure of the programme and so on. Also, it seems sensible to me to create an npm importer or exporter first and not both at the same time (although it should be kept in mind that if e.g. an exporter is chosen, it should be possible to implement an importer in the same application afterwards). Personally, I don’t really know what should be given priority an npm package can load into Penpot to use in the Penpot environment or export a design created in Penpot via NPM package to use for an application of your liking, what do you think?

[shark]

I’m not sure either which should be prioritised first. I think you can ask the users of penpot what do they want, or if you have a requirement for your own use then you can start with yourself as very first user of the feature.

[BDV]

The first hurdle is finding people willing to help, personally don’t see it feasible to set up something like this all by myself.

[carolina.portugal]

Could you check if it is fix now?

[BDV]

Have found a UI designer and I am currently only looking for someone with experience of programming in Phython and/or React who is willing to help. Limited experience is also allowed if you are willing to master the aforementioned programming languages yourself.

[BDV]

@yaron and @carolina.portugal Can you please move your post to the correct topic namely Translations - Penpot Community I keep getting notifications about info not relevant to this topic and is extremely irritating, thank you in advance for your understanding.

[ladybenko]

Hi! Thanks for bringing this project up, here are my two cents.

My initial understanding is that the npm package was meant to release icons (which is feasible), and not the whole Penpot Design System (named Pencil).

I’m afraid at the time being porting the Design System to an npm package it’s not quite straight forward. Let me explain.

• It’s still very much a WIP endeavor. We’re tweaking both the design and the implementation, changing the name of tokens, adding/removing them, etc. Also, we still have a long way ahead in terms of implentation, since only a small subset of the whole system that has been designed is actually implemented. Keep in mind that right now we’re not thinking in terms of backwards compatibility nor we do have proper versioning (at the time being, this is something we’ll need to do in the future, but I don’t think it will be a short-term endeavor).
• Penpot design systems is implemented in this stack: ClojureScript, React 18, some custom middleware to bring those two together and, more importantly, common code with the rest of the application (for instance, to handle translation, but we plan to use common utilities for converting colors, etc.). Meaning: our final JS bundle that we are exporting to storybook is a bit heavy.

What I would suggest: I think it would be wise to start small and see if there are contributors that can handle the icons (and maybe considering creating a component for React or other frameworks directly in JS/TS, skipping ClojureScript. Eventually this project would require to set up some kind of automation so updating the icons, etc. does not need to be done manually after each Penpot release (which now happen every ~6 weeks aprox.)

Cheers!

[BDV]

Thanks for your info, would you know if through the Penpot API that the Penpot plugins use, it is possible to see what language the user is using when using Penpot? This so that if desired, the displayed text in the plugin could possibly be displayed in the end user’s language.

The intention is indeed to start small

@BDV

the reason I choose Pyramid because it matches the philosophy I have in mind. Pyramid’s philosophy is ‘The Start Small, Finish Big, Stay Finished Framework’. So it is a project that will start small but could potentially grow into something bigger.

currently we are mainly still looking for programmers willing to help.
I have already found a UI designer, see below for more info.

How to Get Involved
Should you be interested in contributing see Help Penpot move forward by Community Contribution - #3 by BDV or send me an Direct Message.

Help Penpot move forward by Community Contribution

For this project, we are looking for the following UI Designer Programmer Translators Documentation I created a Form where you can specify your preference (Entering your Penpot forum username is mandatory, otherwise we won’t know who to contact.) For translations into Spanish/Portuguese, we also accept translations from the Penpot crew