PT
Iniciar sessão Criar conta

Como instalar o Penpot no Saplo: alternativa à Figma sem custos por utilizador

Penpot é um editor open source para design UI e prototipagem que substitui a Figma sem custos por cada editor. Comparação de funções e custos, requisitos (mín. 4 GB RAM, Box L), instalação passo a passo, contas de equipa, SMTP, segurança e problemas comuns.

Grzegorz Kalmus ·

O Figma no plano Professional custa 16 dólares por mês por cada licença completa de editor, se pagares anualmente, ou 20 dólares se optares pelo pagamento mensal. Isso equivale a cerca de 14 € por mês por cada pessoa que está a criar designs. Uma equipa de cinco designers paga aproximadamente 68 € por mês, ou seja, cerca de 818 € por ano, e esse valor aumenta a cada novo editor. Penpot é um editor open source para design de interfaces e prototipagem que faz o mesmo diretamente no navegador, mas instalado no teu próprio servidor e sem custos por licença. A seguir tens um guia completo: o que é Penpot, quando é que realmente pode substituir o Figma e quando não, quantos recursos necessita e como o instalar no Saplo, passo a passo.

O que é o Penpot

Penpot é uma ferramenta de design UI/UX desenvolvida pela empresa espanhola Kaleidos como um projeto open source. Funciona inteiramente no navegador, tal como a Figma, pelo que o designer não precisa de instalar nada no computador. A principal diferença técnica: o Penpot guarda os projetos em standards web abertos, ou seja, SVG, e o layout dos elementos baseia-se em CSS Flexbox e CSS Grid. Para a equipa, isto significa que o projeto está mais próximo do que o programador irá depois transpor para código.

O que recebes na prática:

  • mockups e designs de ecrãs, com layers, grupos, máscaras, texto e gráficos vetoriais,
  • componentes e bibliotecas partilhadas, ou seja, botões, campos de formulários e cartões definidos uma vez e usados em vários ficheiros,
  • layouts Flex e Grid, que funcionam como os seus equivalentes em CSS, por isso um design responsivo não é apenas uma imagem,
  • protótipos clicáveis com transições entre ecrãs, para mostrar ao cliente ou para testes com utilizadores,
  • tab Inspect, onde o programador lê dimensões, cores, espaçamentos e o código CSS ou SVG pronto a usar,
  • exportação para PNG, PDF e SVG, suportada por um contentor de exportação separado,
  • edição colaborativa em tempo real, quando várias pessoas trabalham no mesmo ficheiro simultaneamente, com cursores visíveis e comentários.

Uma descrição completa da aplicação e o botão de instalação podes encontrar na página Penpot no catálogo Saplo.

Penpot ou Figma: uma comparação justa

O Penpot não é uma cópia exata da Figma e não faz sentido fingir que é. Antes de transferires a tua equipa, verifica se o teu trabalho se enquadra bem nas áreas em que o Penpot se destaca.

Critério Figma (Professional) Penpot na Saplo
Custo cerca de 14 € por mês para cada editor preço fixo da Box, sem custos por utilizador
Número de editores cada um pago separadamente sem limite, apenas limitado pela memória do servidor
Onde estão os projetos na cloud da Figma, servidores nos EUA a tua Box no centro de dados na Alemanha
Formato dos ficheiros formato fechado da Figma padrões abertos, SVG e CSS
Layout dos elementos Auto Layout (modelo próprio) Flex e Grid compatíveis com CSS
Edição colaborativa em tempo real sim sim
Protótipos avançados, com animações básicos e intermediários
Plugins ecossistema vasto menor, mas em crescimento
Funcionalidades de IA integradas, pagas por créditos não incluídas na instalação padrão

Quando o Penpot é suficiente: se projetas websites e aplicações web, crias mockups para clientes, constróis bibliotecas de componentes ou entregas projetos a programadores. Este é o tipo de trabalho da maioria das pequenas agências e equipas de produto.

Quando ficares com a Figma: se a tua equipa depende muito de plugins específicos do ecossistema da Figma, faz protótipos complexos com microanimações, ou o cliente exige ficheiros no formato .fig. O Penpot não abre ficheiros da Figma diretamente. Migrar projetos existentes é um trabalho à parte, por isso é sensato começares novos projetos no Penpot e finalizares os antigos na plataforma onde foram criados.

Quanto custa: a conta em números concretos

A Figma cobra por pessoa. O Box no Saplo cobra por servidor. Com um só designer a diferença é pequena, mas com uma equipa torna-se grande.

Equipa Figma Professional anual Penpot no Box L anual
1 designer cerca de 164 € 136 €
3 designers cerca de 491 € 136 €
5 designers cerca de 818 € 136 €
10 designers cerca de 1 636 € 295 € (Box XL)

Os valores para a Figma foram convertidos a partir de 16 dólares mensais com pagamento anual, à taxa de cerca de 0,85 € por dólar. Com pagamento mensal, a Figma fica um quarto mais cara. Os preços da Saplo são os preços de catálogo dos Box, o primeiro ano custa o mesmo que a renovação.

Há ainda outro aspeto que não aparece na tabela: no mesmo Box podes instalar outras ferramentas para a equipa. Um disco partilhado, gestor de passwords ou quadro de tarefas instalas ao lado do Penpot sem custo adicional, desde que haja memória disponível.

Requisitos: qual Box escolher

Penpot é uma das aplicações mais pesadas no Catálogo de aplicações da Saplo. A instalação consiste em cinco contentores Docker que trabalham em conjunto:

  • frontend, ou seja, o editor no navegador, o único contentor exposto para fora,
  • backend, que armazena os projetos e gere a edição colaborativa; corre numa máquina virtual Java, por isso consome memória,
  • exporter, que gera exports em PNG, PDF e SVG, executando um navegador internamente,
  • PostgreSQL 15, base de dados dedicada apenas ao Penpot,
  • Redis, cache e fila para a edição colaborativa.

Portanto, os requisitos são:

  • mínimo 4 GB de memória RAM livre e 15 GB de espaço em disco,
  • Box com Docker, o motor ativa-o automaticamente durante a instalação a partir do catálogo,
  • domínio ou subdomínio *.saploapp.pl, incluído no preço de cada plano.

Na prática, isto significa:

  • Box S (1 GB) e Box M (2 GB) não são suficientes. Penpot não cabe nestes planos.
  • Box L (6 GB RAM, 60 GB SSD, 136 € por ano) é o mínimo razoável para uma equipa de várias pessoas. Fica memória livre para uma ou duas aplicações mais leves em paralelo e os backups dos últimos 7 dias estão incluídos no preço.
  • Box XL (12 GB RAM, 150 GB SSD, 295 € por ano) escolhe-se quando há uma equipa de dezenas de pessoas a trabalhar simultaneamente, os ficheiros têm centenas de ecrãs, ou quando queres alojar várias ferramentas da equipa no mesmo servidor.

Não precisas de comprar nem configurar base de dados separada. O PostgreSQL e Redis fazem parte da configuração e estão no mesmo conjunto de contentores que o Penpot.

Instalação passo a passo

  1. Inicia sessão no painel Saplo e acede ao Catálogo de aplicações. Vais encontrar o Penpot nas ferramentas. Também podes começar pela página do Penpot e clicar no botão de implementação.
  2. Escolhe o Box onde queres instalar o editor. Se o Box não tiver memória disponível suficiente, o painel avisa-te antes da instalação, e não após uma tentativa falhada.
  3. Indica o endereço. O mais simples é uma subdomínio do tipo projects.saploapp.pl. Se preferires o teu próprio domínio, por exemplo design.asuaempresa.com, configura-o durante a instalação, e o certificado SSL será gerado automaticamente.
  4. Confirma a instalação. O motor instala o Docker, faz o download das imagens do Penpot, PostgreSQL e Redis, gera palavras-passe aleatórias para a base de dados e chave de sessão, e inicia todos os cinco contentores.
  5. Espera. As três imagens do Penpot têm mais de um gigabyte no total, por isso o primeiro download num Box novo demora mais do que em aplicações leves. A instalação só termina quando o editor responde efetivamente no teu endereço.
  6. Quando o estado mudar para ativo, abre o endereço no navegador.

Primeiro arranque: conta e equipa

Penpot não tem uma palavra-passe única de administrador gerada antecipadamente. Tu próprio crias a conta na primeira vez que acedes ao site:

  1. Na página de login, escolhe Create an account.
  2. Fornece o e-mail, palavra-passe e nome. A confirmação por e-mail está desativada nesta instalação, pelo que a conta funciona logo de imediato.
  3. O Penpot cria automaticamente a tua primeira equipa. Na equipa crias projetos, e nos projetos ficheiros com os ecrãs.

Detalhes da instalação, incluindo os nomes dos contentores e os comandos para visualizar logs, são gravados no ficheiro PENPOT-SETUP.txt no diretório da aplicação no Box. O Painel Saplo mostra o seu conteúdo sempre que precisares.

Importante no registo: uma vez que o formulário está aberto e a confirmação por e-mail desativada, qualquer pessoa que conheça o endereço pode criar uma conta. Para uma equipa pequena numa subdomínio pouco conhecido, geralmente não é problema. No entanto, se o endereço for conhecido publicamente, depois de criares as contas de toda a equipa, é aconselhável desativar o registo, como explicado abaixo.

Como trabalha a equipa: convites sem email

Os convites para a equipa Penpot são enviados por email. A instalação padrão no Saplo não tem um servidor de email associado, por isso o email com o convite não será enviado. Existem duas opções:

  • mais simples: cada membro da equipa cria a sua própria conta com o teu endereço, e tu adicionas-no à equipa ou partilhas o projeto com ele,
  • completa: ligas um servidor SMTP, por exemplo, a caixa de email da empresa que já tens. Fazes isto via SSH, adicionando a flag enable-smtp e as variáveis PENPOT_SMTP_* no ficheiro docker-compose.yml na pasta da aplicação, e depois execuções docker compose up -d. A partir desse momento os convites, o restauro de password e as notificações funcionam normalmente.

O acesso via SSH está disponível em todos os Box a partir do plano M, por isso no Box L e XL tens acesso imediato, juntamente com o sudo completo.

Segurança e definições que valem a pena alterar

Algumas coisas que deves fazer na primeira semana:

  • Desliga o registo depois de criares as contas da equipa. Adiciona a flag disable-registration à variável PENPOT_FLAGS em docker-compose.yml para o frontend e backend, e depois reinicia os contentores. Novas pessoas podes adicionar por convite, desde que o SMTP esteja configurado.
  • Usa o teu próprio domínio para os clientes. Um protótipo enviado ao cliente em projects.asuaempresa.com tem mais credibilidade do que um link para a cloud de terceiros.
  • Lembra-te das cópias de segurança. O Box L inclui cópias dos últimos 7 dias, o Box XL dos últimos 14 dias. Para além disso, de vez em quando exporta os ficheiros mais importantes do Penpot para o formato .penpot, para teres uma cópia independente do servidor.
  • Faz as atualizações com consciência. A receita usa as imagens mais recentes do Penpot. Antes de uma atualização maior, verifica a lista de alterações do projeto e certifica-te que tens uma cópia recente.

Os projetos dos clientes não saem do teu Box e não são enviados para servidores nos Estados Unidos. Para agências que assinam contratos de confidencialidade com os clientes ou trabalham em setores sensíveis, este é muitas vezes um argumento mais forte do que o preço em si.

Problemas mais comuns

O editor demora a carregar na primeira vez que entras. O backend em Java aquece depois de iniciar os conteúdos. A primeira abertura depois de um reinício pode ser mais lenta, as seguintes são rápidas.

A exportação para PDF ou PNG não funciona ou demora muito tempo. O exportador inicia um navegador dentro do browser e consome muita memória. Se muitas aplicações estiverem a correr ao mesmo tempo na Box, ele pode ficar sem RAM. Verifica os logs do contentor do exportador e se a memória estiver sempre em falta, passa para um plano superior.

O convite para a equipa não chegou. Este é um comportamento padrão porque o Penpot não envia emails sem SMTP. Ou configuras o SMTP, ou pedes à pessoa para criar uma conta e adicionas-na manualmente.

Não consigo iniciar sessão depois de mudar o endereço. O Penpot guarda o seu endereço público na configuração. Mudar o domínio após a instalação requer atualizar a variável PENPOT_PUBLIC_URI e reiniciar os contentores. O mais simples é escolher desde o início o endereço final.

Resumo

Penpot faz mais sentido exatamente onde a Figma custa mais: numa equipa de vários designers, em que cada um representa um custo mensal separado. Com o Box L, por 139 € por ano, podes ter um editor para toda a equipa, com edição colaborativa em tempo real, bibliotecas de componentes, protótipos e exportação, e os projetos ficam no teu servidor. Antes de migrares toda a equipa, cria um projeto novo no Penpot e verifica se a falta de plugins específicos da Figma te incomoda. Se não, as contas falam por si.

Começa por visitar a página do Penpot no catálogo Saplo, e se ainda não tens um Box, compara os planos no preçário.

  • #Self-hosting
  • #Figma
  • #Penpot
  • #Guia
  • #Design de interface