Penpot é a resposta auto-hospedada de código aberto para Figma. Também é gratuito, baseado em navegador e é consistente no fornecimento de recursos que não são apenas cópias do Figma, mas na verdade construídos em padrões da web. Mas a maioria dos designers que conheço (inclusive eu, para ser honesto) ainda acha que é um pouco deprimente. Em algumas áreas está realmente em falta; por exemplo, a cena do plugin não é tão rica ou profunda quanto o Figma. Mas ele tem mais recursos do que acreditamos, e uma dessas áreas é a exportação de código – toda a arquitetura do Penpot lhe dá uma vantagem.
Isenção de responsabilidade justa: não sou desenvolvedor e não sei muito sobre código ou como os fluxos de trabalho do desenvolvedor são projetados. Mas, como designer em formação, sinto que deveria pelo menos dar uma cutucada. Então comecei com uma comparação do design ao código de duas das minhas ferramentas de design favoritas.
O botão “Copiar todo o código” do Penpot tem muito peso
Um botão muda todo o fluxo de trabalho
No painel Inspecionar do Penpot, existe um botão chamado “Copiar todo o código” e quando realmente o usei, percebi que isso fazia toda a diferença em relação à exportação do código no Figma. Ele despeja os códigos HTML e CSS para tudo, independentemente dos elementos ou frames selecionados. A ferramenta que uso para testar o código é o CodePen, que é um editor de código baseado em navegador que permite colocar HTML, CSS e JavaScript em painéis separados e ver como eles são renderizados. É usado principalmente por desenvolvedores front-end para prototipagem e casos de teste rápidos.
Os moldes ficaram quase idênticos às tomadas originais. Eu tentei primeiro em uma maquete de teclado móvel, depois em uma tela de capa mais complexa com texto, gradientes e formas sobrepostas umas sobre as outras, e ambas renderizadas de forma limpa, com posicionamento intacto. A única coisa que não foi transportada foi o ativo da imagem de fundo, o que faz sentido, já que não é um código, mas um arquivo.
Figma não tem nenhum equivalente para este botão. Para renderizar com CodePen ou algo semelhante, você deve copiar os elementos individuais um por um e montá-los você mesmo.
Experimentei Claude Design, Replit e Figma Make para design de UI e um avançou quilômetros
O mesmo prompt, três ferramentas de codificação de vibração muito diferentes
Penpot fala a linguagem do navegador, mas Figma não
A maior parte do trabalho acontece antes mesmo de você clicar em qualquer coisa
Copiar código do Penpot funciona muito bem devido à forma como ele é construído. O Penpot Canvas funciona sobre CSS Flexbox e Grid reais, as mesmas propriedades que o navegador já entende. Portanto, ao criar um layout no Penpot, você está manipulando as mesmas coisas que existem no CSS, o que significa que o código exportado é estruturalmente próximo do que o navegador irá renderizar de qualquer maneira, portanto não há nenhuma etapa de tradução entre eles.
O layout automático do Figma não foi projetado desta forma. É seu próprio sistema que se aproxima do Flexbox, mas a exportação geralmente reverte para o posicionamento absoluto, o que significa que os elementos se ajustam a coordenadas de pixel específicas em vez de fluir como o CSS moderno faz. Ele funciona em um tamanho de tela e trava principalmente em todas as outras telas. Também testei no CodePen e constatei que quando copiei um único elemento de texto do Figma, nada foi renderizado porque o fragmento do Figma era apenas propriedades CSS sem HTML para aplicá-las, e o marcador exportado renderizou apenas uma das cinco camadas empilhadas que o faziam parecer um marcador.
Penpot também oferece suporte nativo ao padrão de marcação de design W3C para coisas como cores e tipografia, portanto, exporta diretamente para JSON ou CSS sem plug-ins, enquanto as variáveis do Figma ficam mais bloqueadas no ecossistema Figma.
Além de como testei o código, Penpot tem uma ferramenta CLI que permite que as equipes de desenvolvimento extraiam marcadores de design diretamente em sua base de código, uma API pública, um webhook para sincronizar automaticamente designs com código e exportação JSON nativa para marcadores de design. Eu não chego perto de nenhum deles porque eles são construídos para pipelines de engenharia, não para designers como eu. Mas o facto de existirem diz algo sobre onde estão as prioridades de Penpot.
O resultado final que descobri é que o Penpot projeta em uma linguagem de navegador e o Figma projeta em sua própria linguagem. Então, na hora de passar o código, um deles precisa de um intérprete e o outro não.
Encontrei uma alternativa Figma de código aberto gratuito e continuei encontrando motivos para não voltar
Ele faz o trabalho que Figma não consegue
A abordagem dos fragmentos de figma não está quebrada
É apenas uma filosofia diferente
Achei a abordagem elemento por elemento do Figma estranha no início, mas quanto mais eu analisava como os desenvolvedores a usam, mais acho que o Figma faz o que seus usuários desejam. Desenvolvedores experientes realmente não querem um despejo de código de página inteira. Eles querem referências limpas adicionadas aos seus próprios componentes e bases de código, e é exatamente isso que o modo de desenvolvedor do Figma lhes oferece – medidas, valores CSS e trechos que eles podem extrair conforme necessário. Toda a ferramenta pressupõe que haja um desenvolvedor do outro lado que escreverá o código real de qualquer maneira. Portanto, o botão “Copiar todo o código” pode até funcionar nesse fluxo de trabalho.
E o ecossistema de plugins do Figma preenche tudo o que a ferramenta nativa não preenche. Existem plug-ins como GreatFrontEnd, Anima, Locofy e Visual Copilot que podem transformar quadros inteiros em código HTML, React, Vue ou Tailwind, e alguns até lidam com lógica de componentes que a exportação nativa do Penpot não suporta.
Substituí o Figma por quatro alternativas de código aberto por uma semana e apenas uma realmente travou
Ferramentas diferentes para trabalhos diferentes, mas apenas uma realmente funciona para mim
Basta escolher aquele que realmente se adapta ao seu fluxo de trabalho
Ao entrar, eu esperava que o Figma ganhasse na exportação de código porque ele ganha na maioria das coisas no fluxo de trabalho de um designer. Portanto, o progresso de Penpot foi surpreendente. O resultado final ao qual volto é a divisão em suas filosofias: Penpot é construído na suposição de que o código é importante desde o início, e Figma é construído na suposição de que o desenvolvedor irá lidar com o código, apenas fornecendo referências limpas.
Portanto, não se trata realmente de escolher o “melhor”, porque ambos fazem sentido para o público. Penpot faz mais sentido para designers individuais, equipes menores ou qualquer pessoa que precise de código utilizável no final, sem ferramentas adicionais. Figma é uma escolha mais segura para equipes que já possuem seus próprios sistemas de renderização e só precisam dos arquivos de design para adicioná-los.
