mirror of
https://github.com/penpot/penpot.git
synced 2025-01-07 15:39:42 -05:00
170 lines
10 KiB
Markdown
170 lines
10 KiB
Markdown
|
||
[uri_license]: https://www.mozilla.org/en-US/MPL/2.0
|
||
[uri_license_image]: https://img.shields.io/badge/MPL-2.0-blue.svg
|
||
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://penpot.app/images/readme/github-dark-mode.png">
|
||
<source media="(prefers-color-scheme: light)" srcset="https://penpot.app/images/readme/github-light-mode.png">
|
||
<img alt="penpot header image" src="https://penpot.app/images/readme/github-light-mode.png">
|
||
</picture>
|
||
|
||
<p align="center"><a href="https://www.mozilla.org/en-US/MPL/2.0" rel="nofollow"><img src="https://camo.githubusercontent.com/3fcf3d6b678ea15fde3cf7d6af0e242160366282d62a7c182d83a50bfee3f45e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d504c2d322e302d626c75652e737667" alt="License: MPL-2.0" data-canonical-src="https://img.shields.io/badge/MPL-2.0-blue.svg" style="max-width:100%;"></a>
|
||
<a href="https://gitter.im/penpot/community" rel="nofollow"><img src="https://camo.githubusercontent.com/5b0aecb33434f82a7b158eab7247544235ada0cf7eeb9ce8e52562dd67f614b7/68747470733a2f2f6261646765732e6769747465722e696d2f736572656e6f2d78797a2f636f6d6d756e6974792e737667" alt="Gitter" data-canonical-src="https://badges.gitter.im/sereno-xyz/community.svg" style="max-width:100%;"></a>
|
||
<a href="https://tree.taiga.io/project/penpot/" title="Managed with Taiga.io" rel="nofollow"><img src="https://camo.githubusercontent.com/4a1d1112f0272e3393b1e8da312ff4435418e9e2eb4c0964881e3680f90a653c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d616e61676564253230776974682d54414947412e696f2d3730396631342e737667" alt="Managed with Taiga.io" data-canonical-src="https://img.shields.io/badge/managed%20with-TAIGA.io-709f14.svg" style="max-width:100%;"></a>
|
||
<a href="https://gitpod.io/#https://github.com/penpot/penpot" rel="nofollow"><img src="https://camo.githubusercontent.com/daadb4894128d1e19b72d80236f5959f1f2b47f9fe081373f3246131f0189f6c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f476974706f642d72656164792d2d746f2d2d636f64652d626c75653f6c6f676f3d676974706f64" alt="Gitpod ready-to-code" data-canonical-src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod" style="max-width:100%;"></a></p>
|
||
|
||
<p align="center">
|
||
<a href="https://penpot.app/"><b>Website</b></a> •
|
||
<a href="https://help.penpot.app/technical-guide/getting-started/"><b>Getting Started</b></a> •
|
||
<a href="https://help.penpot.app/user-guide/"><b>User Guide</b></a> •
|
||
<a href="https://help.penpot.app/user-guide/introduction/info/"><b>Tutorials & Info</b></a> •
|
||
<a href="https://community.penpot.app/"><b>Community</b></a>
|
||
</p>
|
||
<p align="center">
|
||
<a href="https://www.youtube.com/@Penpot"><b>Youtube</b></a> •
|
||
<a href="https://peertube.kaleidos.net/a/penpot_app/video-channels"><b>Peertube</b></a> •
|
||
<a href="https://www.linkedin.com/company/penpot/"><b>Linkedin</b></a> •
|
||
<a href="https://instagram.com/penpot.app"><b>Instagram</b></a> •
|
||
<a href="https://fosstodon.org/@penpot/"><b>Mastodon</b></a> •
|
||
<a href="https://twitter.com/penpotapp"><b>X</b></a>
|
||
|
||
</p>
|
||
|
||
<br />
|
||
|
||
[Penpot video](https://github.com/penpot/penpot/assets/5446186/b8ad0764-585e-4ddc-b098-9b4090d337cc)
|
||
|
||
<br />
|
||
|
||
Penpot is the first **open-source** design tool for design and code collaboration. Designers can create stunning designs, interactive prototypes, design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast. And all of this with no handoff drama.
|
||
|
||
Penpot is available on browser and [self host](https://penpot.app/self-host). It’s web-based and works with open standards (SVG, CSS and HTML). And last but not least, it’s free!
|
||
|
||
Penpot’s latest [huge release 2.0](https://penpot.app/dev-diaries), takes the platform to a whole new level. This update introduces the ground-breaking [CSS Grid Layout feature](https://penpot.app/penpot-2.0), a complete UI redesign, a new Components system, and much more. Plus, it's faster and more accessible.
|
||
|
||
|
||
🎇 **Penpot Fest is back!** Our design, code & Open Source event is happening in Barcelona | June 5-7th. [Get your tickets](https://www.eventbrite.es/e/penpot-fest-2024-tickets-859331883797) to join other designers and developers from open-source communities and beyond.
|
||
Check out the highlights from [Penpot Fest 2023 edition](https://www.youtube.com/watch?v=sOpLZaK5mDc)!
|
||
|
||
## Table of contents ##
|
||
|
||
- [Why Penpot](#why-penpot)
|
||
- [Getting Started](#getting-started)
|
||
- [Community](#community)
|
||
- [Resources](#resources)
|
||
- [License](#license)
|
||
|
||
## Why Penpot ##
|
||
|
||
Penpot expresses designs as code. Designers can do their best work and see it will be beautifully implemented by developers in a two-way collaboration.
|
||
|
||
### Designed for developers ###
|
||
Penpot was built to serve both designers and developers and create a fluid design-code process. You have the choice to enjoy real-time collaboration or play "solo".
|
||
|
||
### Inspect mode ###
|
||
Work with ready-to-use code and make your workflow easy and fast. The inspect tab gives instant access to SVG, CSS and HTML code.
|
||
|
||
### Self host your own instance ###
|
||
Provide your team or organization with a completely owned collaborative design tool. Use Penpot's cloud service or deploy your own Penpot server.
|
||
|
||
### Integrations ###
|
||
Penpot offers integration into the development toolchain, thanks to its support for webhooks and an API accessible through access tokens.
|
||
|
||
### What’s great for design ###
|
||
With Penpot you can design libraries to share and reuse; turn design elements into components and tokens to allow reusability and scalability; and build realistic user flows and interactions.
|
||
|
||
<br />
|
||
|
||
<p align="center">
|
||
<img src="https://img.plasmic.app/img-optimizer/v1/img?src=https%3A%2F%2Fimg.plasmic.app%2Fimg-optimizer%2Fv1%2Fimg%2F9dd677c36afb477e9666ccd1d3f009ad.png" alt="Open Source" style="width: 65%;">
|
||
</p>
|
||
|
||
<br />
|
||
|
||
## Getting started ##
|
||
|
||
### Install with Elestio ###
|
||
Penpot is the only design & prototype platform that is deployment agnostic. You can use it or deploy it anywhere.
|
||
|
||
Learn how to install it with Elestio and Docker, or other options on [our website](https://penpot.app/self-host).
|
||
<br />
|
||
|
||
<p align="center">
|
||
<img src="https://site-assets.plasmic.app/2168cf524dd543caeff32384eb9ea0a1.svg" alt="Open Source" style="width: 65%;">
|
||
</p>
|
||
<br />
|
||
|
||
## Community ##
|
||
|
||
We love the Open Source software community. Contributing is our passion and if it’s yours too, participate and [improve](https://community.penpot.app/c/help-us-improve-penpot/7) Penpot. All your designs, code and ideas are welcome!
|
||
|
||
If you need help or have any questions; if you’d like to share your experience using Penpot or get inspired; if you’d rather meet our community of developers and designers, [join our Community](https://community.penpot.app/)!
|
||
|
||
You will find the following categories:
|
||
- [Ask the Community](https://community.penpot.app/c/ask-for-help-using-penpot/6)
|
||
- [Troubleshooting](https://community.penpot.app/c/technical/8)
|
||
- [Help us Improve Penpot](https://community.penpot.app/c/help-us-improve-penpot/7)
|
||
- [#MadeWithPenpot](https://community.penpot.app/c/madewithpenpot/9)
|
||
- [Events and Announcements](https://community.penpot.app/c/announcements/5)
|
||
- [Inside Penpot](https://community.penpot.app/c/inside-penpot/21)
|
||
- [Penpot in your language](https://community.penpot.app/c/penpot-in-your-language/12)
|
||
- [Design and Code Essentials](https://community.penpot.app/c/design-and-code-essentials/22)
|
||
|
||
|
||
<br />
|
||
|
||
<p align="center">
|
||
<img src="https://github.com/penpot/penpot/assets/5446186/6ac62220-a16c-46c9-ab21-d24ae357ed03" alt="Communnity" style="width: 65%;">
|
||
</p>
|
||
<br />
|
||
|
||
## Contributing ##
|
||
|
||
Any contribution will make a difference to improve Penpot. How can you get involved?
|
||
|
||
Choose your way:
|
||
|
||
- Create and [share Libraries & Templates](https://penpot.app/libraries-templates.html) that will be helpful for the community
|
||
- Invite your [team to join](https://design.penpot.app/#/auth/register)
|
||
- Star this repo and follow us on Social Media: [Mastodon](https://fosstodon.org/@penpot/), [Youtube](https://www.youtube.com/c/Penpot), [Instagram](https://instagram.com/penpot.app), [Linkedin](https://www.linkedin.com/company/penpotdesign), [Peertube](https://peertube.kaleidos.net/a/penpot_app) and [X](https://twitter.com/penpotapp).
|
||
- Participate in the [Community](https://community.penpot.app/) space by asking and answering questions; reacting to others’ articles; opening your own conversations and following along on decisions affecting the project.
|
||
- Report bugs with our easy [guide for bugs hunting](https://help.penpot.app/contributing-guide/reporting-bugs/) or [GitHub issues](https://github.com/penpot/penpot/issues)
|
||
- Become a [translator](https://help.penpot.app/contributing-guide/translations)
|
||
- Give feedback: [Email us](mailto:support@penpot.app)
|
||
- **Contribute to Penpot's code:** [Watch this video](https://www.youtube.com/watch?v=TpN0osiY-8k) by Alejandro Alonso, CIO and developer at Penpot, where he gives us a hands-on demo of how to use Penpot’s repository and make changes in both front and back end
|
||
|
||
To find (almost) everything you need to know on how to contribute to Penpot, refer to the [contributing guide](https://help.penpot.app/contributing-guide/).
|
||
|
||
<br />
|
||
|
||
<p align="center">
|
||
<img src="https://github.com/penpot/penpot/assets/5446186/fea18923-dc06-49be-86ad-c3496a7956e6" alt="Libraries and templates" style="width: 65%;">
|
||
</p>
|
||
|
||
<br />
|
||
|
||
## Resources ##
|
||
|
||
You can ask and answer questions, have open-ended conversations, and follow along on decisions affecting the project.
|
||
|
||
💾 [Documentation](https://help.penpot.app/technical-guide/)
|
||
|
||
🚀 [Getting Started](https://help.penpot.app/technical-guide/getting-started/)
|
||
|
||
✏️ [Tutorials](https://www.youtube.com/playlist?list=PLgcCPfOv5v54WpXhHmNO7T-YC7AE-SRsr)
|
||
|
||
🏘️ [Architecture](https://help.penpot.app/technical-guide/developer/architecture/)
|
||
|
||
📚 [Dev Diaries](https://penpot.app/dev-diaries.html)
|
||
|
||
|
||
## License ##
|
||
|
||
```
|
||
This Source Code Form is subject to the terms of the Mozilla Public
|
||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||
|
||
Copyright (c) KALEIDOS INC
|
||
```
|
||
Penpot is a Kaleidos’ [open source project](https://kaleidos.net/)
|