00:00:00Este é o Penpot, uma ferramenta de design open-source que compete com ferramentas como o Figma.
00:00:05Bom, à primeira vista parece o Figma, mas o comportamento é completamente diferente.
00:00:10Porque, por baixo do capô, ele usa CSS real, não algo que você precise converter depois.
00:00:15E isso muda drasticamente o problema da entrega do design para o código.
00:00:18Deixe-me mostrar o que quero dizer.
00:00:20O Penpot é uma ferramenta de design de UI e prototipagem baseada no navegador.
00:00:29À primeira vista, sim, soa como o Figma ou o Sketch.
00:00:32Mas, na verdade, aqui está a grande diferença.
00:00:35O Penpot é 100% open-source e é construído sobre padrões web reais.
00:00:40SVG, CSS Flexbox, Grid e HTML.
00:00:43Então, em vez de desenhar dentro de algo que você tem que decodificar e desestruturar depois,
00:00:49você já está mais próximo de como a web realmente funciona.
00:00:52Você pode auto-hospedá-lo com Docker em um comando,
00:00:54que é o que farei neste vídeo, já que é isso que eu gosto.
00:00:58Versões open-source de ferramentas e ver como elas se comparam.
00:01:01Agora, com o Penpot, os designers ainda têm componentes, layouts e protótipos.
00:01:06Mas os desenvolvedores recebem a parte que realmente importa: um output que parece código real.
00:01:11Não há uma camada intermediária estranha, não há dúvidas sobre o que está acontecendo.
00:01:14E é gratuito.
00:01:15Arquivos ilimitados, colaboradores ilimitados, é por isso que as pessoas se importam com isso.
00:01:20Se você gosta de ferramentas open-source e dicas de codificação que aceleram seu fluxo de trabalho,
00:01:23não deixe de se inscrever no canal.
00:01:25Temos vídeos novos saindo o tempo todo.
00:01:27O Penpot é uma ferramenta de design.
00:01:28Então, por que você deveria se importar, especialmente se você é um desenvolvedor?
00:01:31Porque isso resolve uma dor muito específica.
00:01:34A dor de entregar um projeto ou converter design em código real.
00:01:39O Penpot faz com que o design pareça nativo para a web.
00:01:42Então, quando você inspeciona algo, você não está adivinhando, você está lendo.
00:01:46Deixe-me mostrar.
00:01:48Muito bem, hora de uma demonstração rápida, pessoal.
00:01:50Isto está rodando ao vivo na minha instância auto-hospedada do Penpot.
00:01:54Eu subi isso com um único comando Docker Compose up usando o arquivo
00:01:58Docker Compose oficial que acabamos de configurar.
00:02:00Isso foi incrível.
00:02:02Demorou um pouco para subir, mas agora que está rodando, funciona muito bem.
00:02:07E temos uma página inicial legal, com um visual limpo onde posso criar um novo projeto.
00:02:12Vamos construir algo, apenas um card simples, nada muito sofisticado.
00:02:16Apenas um container, defina-o como flexbox, adicione um pouco de preenchimento.
00:02:21Vou adicionar um título, um texto e um botão.
00:02:24Talvez adicionar mais aqui, outro card, posso copiar e colar.
00:02:28Farei algumas edições rápidas.
00:02:30Vamos mudar para o modo de inspeção.
00:02:32E esta é a parte importante.
00:02:33Você obtém uma estrutura limpa no CSS real, propriedades de flexbox, espaçamento, layout.
00:02:39Não é uma tradução aproximada, é algo que você já entende.
00:02:42Você pode copiar isso e colar direto no seu projeto.
00:02:46Você também tem variantes, tokens, fluxos de protótipo e exportação como SVG.
00:02:51Essa é a grande coisa aqui.
00:02:52Isso remove muito atrito para
00:02:54equipes de desenvolvimento, especialmente quando você domina toda a stack sozinho.
00:02:58Agora vamos falar sobre a parte em que a maioria dos devs fica cética.
00:03:02À primeira vista, isso soa como: legal, mais uma ferramenta de design.
00:03:06Mas a diferença não é como ele parece, é como ele funciona.
00:03:09O Figma simula layouts.
00:03:12O Autolayout é inspirado no flexbox, mas você ainda acaba traduzindo tudo isso na sua
00:03:16cabeça.
00:03:17O Penpot começa muito mais próximo do CSS real, então
00:03:21há menos conversão mental entre design e código.
00:03:25E então tem o lock-in, certo?
00:03:26O Figma usa arquivos proprietários.
00:03:29Temos modelos de preços por assento.
00:03:31Penpot é open-source, então você pode auto-hospedar.
00:03:34Seus dados ficam em SVG, CSS e JSON.
00:03:38A entrega também é diferente porque, no Figma, parece uma camada extra, certo?
00:03:42Modo de desenvolvedor, plugins, passos extras.
00:03:45No Penpot, já vem integrado.
00:03:47A visualização de inspeção já está mais próxima do que realmente precisamos.
00:03:50E, para ser justo, o Figma é ótimo.
00:03:53Eu uso, é enorme, é um ecossistema polido.
00:03:56Mas o Penpot é claramente construído pensando nos desenvolvedores desde o início.
00:04:00Então, o que os desenvolvedores realmente gostam nisso?
00:04:02Bem, a maior coisa que eu disse, certo?
00:04:04É simples, o problema da entrega do design fica menor.
00:04:07Isso é enorme para nós.
00:04:08Você não está mais fazendo engenharia reversa de layouts.
00:04:11Você está lendo algo que mapeia diretamente para o CSS.
00:04:15Isso aparece nos tokens de design também.
00:04:18Cores, espaçamento, tipografia, eles são estruturados de uma forma que parece mais próxima de
00:04:22como você já pensa em código.
00:04:24E a auto-hospedagem é uma grande vantagem para algumas equipes.
00:04:27Se você se preocupa com privacidade, ferramentas internas, CI/CD, tudo isso importa, certo?
00:04:33Mas open-source não é perfeito, nenhuma ferramenta é perfeita, nem o Figma, certo?
00:04:37Mas o Penpot pode ter dificuldades com arquivos realmente grandes.
00:04:40O ecossistema de plugins é muito menor.
00:04:43E se você está muito acostumado com o Figma, haverá uma certa curva de aprendizado,
00:04:47mas honestamente, é super simples de aprender porque é uma maneira diferente de pensar.
00:04:51Então sim, menos polido em algumas áreas, mas um abismo muito menor entre design e
00:04:56desenvolvimento, o que honestamente é o que muitos de nós buscamos.
00:04:59Agora, vale a pena usar?
00:05:01Eu acho que sim.
00:05:02Foi muito divertido.
00:05:02Eu gosto de ferramentas como esta.
00:05:03Então, para muitos de vocês desenvolvedores, sim.
00:05:06Se você está trabalhando em projetos paralelos ou qualquer coisa pesada em desenvolvimento, faz sentido,
00:05:10especialmente se você se preocupa em economizar dinheiro, certo?
00:05:12Você está construindo um MVP, construindo algo assim,
00:05:14você está tentando evitar o aprisionamento tecnológico e
00:05:16quer obter designs que sejam traduzidos de forma limpa para código.
00:05:19Agora, se você está em uma grande empresa com sistemas de design massivos,
00:05:23você já está estruturado em torno do Figma.
00:05:24Então você provavelmente não vai mudar para isso, pelo menos não da noite para o dia, mas
00:05:28esse não é realmente o ponto.
00:05:29O Penpot não precisa substituir tudo para ser útil.
00:05:31Para muitas equipes, para muitos de vocês, ele cobre a maior parte do que você precisa,
00:05:35ele torna o desenvolvimento mais rápido.
00:05:36E é por isso que mais desenvolvedores estão começando a experimentá-lo de verdade.
00:05:39Ele reduz todo aquele tempo de entrega necessário para transformar um design em código.
00:05:45Se você quiser experimentar, é fácil.
00:05:46Vá para o site do Penpot, use a versão em nuvem ou faça o que eu estou fazendo.
00:05:50Auto-hospede-o com Docker se você quiser mais controle, exatamente como aqui.
00:05:54Se você gosta de ferramentas open-source e dicas de codificação como esta,
00:05:57não deixe de se inscrever no canal Better Stack.
00:05:59Nos vemos em outro vídeo.