- Penpot é uma ferramenta de design e prototipagem de código aberto que pode ser usada por designers e desenvolvedores em conjunto, oferecida em versão baseada no navegador ou com auto-hospedagem
- Baseia-se em padrões abertos como SVG, CSS, HTML e JSON e inclui recursos modernos como design tokens, sistema de componentes e CSS Grid Layout
- Com sistema de plugins e integrações via API e webhooks, pode se conectar a aplicações externas, além de oferecer o modo Inspect para visualizar código pronto para uso
- É um projeto centrado na comunidade, com várias formas de contribuição, como compartilhamento de bibliotecas e templates, relato de bugs e participação em traduções
- É disponibilizado sob a Mozilla Public License 2.0 e contribui para expandir o ecossistema open source ao aumentar a eficiência da colaboração entre design e desenvolvimento
Visão geral do Penpot
- Penpot é a primeira ferramenta de design de código aberto para colaboração entre design e código, permitindo que designers criem protótipos interativos e sistemas de design, enquanto desenvolvedores aproveitam código pronto para uso
- Pode ser usado diretamente no navegador ou instalado em servidor próprio
- É oferecido gratuitamente e baseado em tecnologias padrão como SVG, CSS, HTML e JSON
- Na versão mais recente, integra design tokens de forma nativa para apoiar uma colaboração eficiente entre design e desenvolvimento
- A release 2.0 inclui grandes atualizações, como CSS Grid Layout, reformulação completa da UI e novo sistema de componentes
- Organizações que precisem de serviços adicionais para equipes podem entrar em contato separadamente
- Todos os anos, realiza o evento Penpot Fest para interagir com a comunidade de design open source
Why Penpot
- O Penpot expressa design em forma de código, permitindo colaboração bidirecional entre designers e desenvolvedores
- Oferece expansão de funcionalidades e integração com apps externos por meio de um sistema de plugins
- Com uma estrutura amigável para desenvolvedores, permite escolher entre colaboração em tempo real ou trabalho individual
- No modo Inspect, é possível verificar instantaneamente código SVG, CSS e HTML pronto para uso
- Com auto-hospedagem, organizações podem construir um ambiente de colaboração com propriedade total
- Integra-se à toolchain de desenvolvimento por meio de API e webhooks
- Permite construir sistemas de UI consistentes com design tokens, componentes e Variants
Getting Started
- Penpot é a única plataforma de design e prototipagem independente do ambiente de implantação, com suporte tanto a SaaS quanto a implantação própria
- Oferece várias opções de instalação, como Docker, Kubernetes e Elestio
- Guias de instalação e implantação estão disponíveis no site oficial
Community
- É operado com foco na comunidade open source e recebe com entusiasmo contribuições de design, código e ideias
- No fórum da comunidade, é possível fazer perguntas, resolver problemas, sugerir melhorias e participar de eventos
- Categorias principais: Ask the Community, Troubleshooting, Help us Improve Penpot, #MadeWithPenpot, Events and Announcements, Inside Penpot, Penpot in your language, Design and Code Essentials
- Todos os participantes devem seguir o Code of Conduct, contribuindo para um ambiente positivo e seguro
Contributing
- É possível contribuir com o projeto de várias maneiras
- Criar e compartilhar bibliotecas e templates
- Convidar equipes e participar da comunidade
- Enviar relatos de bugs ou registrar issues no GitHub
- Participar das traduções e fornecer feedback
- Há guia para desenvolvedores e vídeos para quem quiser contribuir com o código do Penpot
- Mais detalhes sobre contribuição podem ser encontrados no Contributing Guide
Resources
- Disponibiliza diversos materiais, como documentação, tutoriais, arquitetura de desenvolvimento e Dev Diaries
- Links para [Documentation], [Getting Started], [Tutorials], [Architecture], [Dev Diaries]
License
- Penpot é distribuído sob a Mozilla Public License 2.0 (MPL-2.0)
- Os direitos autorais pertencem à Kaleidos Inc., e o projeto é publicado como open source
1 comentários
Comentários no Hacker News
Eu realmente queria gostar do Penpot, mas quando experimentei alguns meses atrás, havia um bug em que só de navegar entre páginas partes do documento se deformavam de forma estranha
Não quis correr esse risco em um documento importante, então continuei usando o Figma
Pensei em tentar de novo agora, mas já faz 8 meses e continua igual, sem correção
Se fosse um problema tão sério, seria difícil que tivesse sido ignorado
O Penpot não é apenas algo que pode ser self-hosted; também existe uma versão hospedada oficial
O plano gratuito suporta até 8 pessoas e 10GB de armazenamento
O nível seguinte tem pessoas ilimitadas, teto de US$ 175 por mês e limite de 25GB
O plano mais alto tem teto de US$ 950 por mês e oferece armazenamento ilimitado
Por trás da história de “fizemos uma versão open source de X”, muitas vezes acaba surgindo uma versão enterprise
É uma pena que esse tipo de expressão seja tão comum no setor
Ao trabalhar com elementos de UI, o Penpot é o editor vetorial que eu mais uso
É simples e tem um bom gerenciamento de unidades e layout
Dá prazer usá-lo para criar ícones e gráficos simples
O sistema de exportação também é excelente e fácil de organizar
Dá para usar em várias situações além do fluxo completo de um app, e isso me lembra a produtividade dos primeiros tempos do Sketch
É difícil acreditar que seja open source
Se a fonte for diferente, o design pode quebrar em outro ambiente
Principalmente ao exportar SVG, um design com texto pode acabar parecendo completamente diferente
O Penpot é instável e, em trabalhos com mais de 10 páginas, crasha com frequência
Mesmo rodando em um servidor com 64GB de RAM, a partir de 5 ou 6 páginas ele usa 20GB de memória, o time inteiro sofre com lag severo e no fim tudo cai
Para mim, o Penpot lembra o YaCy
O projeto é excelente, mas a escolha da linguagem deixa a desejar
(YaCy foi escrito em Java, Penpot em Clojure)
Se você quer uma versão desktop standalone, pode consultar esta página de releases
Para uso offline, é preciso subir uma instância local com Docker
Mesmo aceitando o custo de performance da stack web ou do self-hosting, para mim é mais importante que meus arquivos de design não fiquem presos em uma nuvem fechada
O Figma é excelente, mas agora virou um ponto único de falha para toda a organização de produto
Mesmo que o Penpot seja lento hoje, se com
docker-compose upeu puder ser dono do meu próprio pipeline, acho isso melhorPerformance pode ser melhorada com código, mas restrições de licença não podem ser mudadas pelo usuário
Até agora, só os web designers demonstravam interesse em open source
O Penpot é bem utilizável, mas em canvas grandes ele fica muito lento
É melhor não colocar tudo em um único canvas
Também existe uma versão desktop não oficial
Segundo este post da comunidade, ela tem mais latência do que a versão hospedada
Fico curioso para saber se alguém já usou
O Penpot já foi discutido pela primeira vez no Hacker News há 3 anos
Na época, recebeu 1145 pontos e 128 comentários