Reshaped agora é open source

• Reshaped é um projeto que oferece bibliotecas de componentes para React e Figma para designers e desenvolvedores
• No início, funcionava com um modelo de licença paga, mas agora foi totalmente convertido para open source
• Com a abertura do código, tanto o código-fonte quanto a biblioteca de design passaram a estar disponíveis no GitHub e na Figma Community
• O projeto fortalece a integração entre design e engenharia e apresenta boas práticas que podem ser aplicadas diretamente no trabalho do dia a dia
• Quem já comprou anteriormente continuará recebendo atualizações e suporte

---

Contexto da transição do Reshaped para open source

• Há cerca de 5 anos, o projeto Reshaped começou pela necessidade de uma biblioteca de componentes que pudesse ser usada tanto no React quanto no Figma
• Com base em mais de 10 anos de experiência trabalhando com sistemas de design, há uma compreensão clara dos problemas recorrentes em sistemas de design e dos bons critérios para resolvê-los
• Foi percebido que 80% da web ainda é construída sobre princípios centrais de design muito semelhantes, então foi projetado um sistema que cobre amplamente esse cenário e, ao mesmo tempo, fornece utilitários de baixo nível para que desenvolvedores consigam lidar com os 20% restantes com flexibilidade
• Desde o início, o foco não foi apenas em acessibilidade ou apenas em design, mas em resolver em conjunto vários desafios reais de produto, como alinhamento entre design e engenharia, temas de UI, modo escuro e microanimações

Do modelo pago à decisão de abrir o código

• Para garantir a sustentabilidade do projeto, no começo foi adotado um modelo de venda de licenças pagas para indivíduos e equipes
• Isso permitiu focar mais de perto em uma comunidade pequena e responder com profundidade a relatos de bugs e pedidos de funcionalidades
• Sempre existiu o desejo de remover a barreira paga em algum momento, e há 2 anos o pacote React foi disponibilizado gratuitamente primeiro, abrindo novas possibilidades
• Agora, todo o código-fonte e a biblioteca do Figma foram abertos como open source, com o React disponível no GitHub e o Figma na Figma Community

Significado e efeitos esperados da abertura

• O Reshaped é uma ferramenta que cria uma ponte entre design e engenharia, permitindo que ambos aprendam boas práticas para construir sistemas de design escaláveis
• Com o código da biblioteca aberto, será possível compartilhar com transparência o processo real de implementação sempre que novos recursos forem introduzidos
• Novos recursos do Figma ou do React também poderão ser benchmarkados antecipadamente por meio dos exemplos do Reshaped antes de serem aplicados ao sistema de design da empresa

Próximos passos e suporte à comunidade

• A biblioteca de componentes do Reshaped continuará sendo expandida no futuro
  • Quem comprou anteriormente continuará recebendo atualizações futuras e suporte sem mudanças
  • Os canais de comunicação existentes também serão mantidos da mesma forma
• No futuro, está sendo considerada a adição de componentes premium mais sofisticados e com maior usabilidade sobre a biblioteca principal
  • O foco não será em recursos pontuais, como 50 layouts de landing page, mas em componentes de alta complexidade que exigem CSS complexo e lógica React

A decisão de devolver à comunidade

• Depois de 5 anos operando em closed source, agora é hora de devolver tudo à comunidade, com expectativa por uma nova fase mais divertida

[GN⁺]

Opiniões do Hacker News

• É uma biblioteca realmente incrível, e ao mesmo tempo agradeço por disponibilizar tanto código gratuitamente
• A impressão é de que o design está muito limpo e bem feito
  • Na combinação de Manjaro Linux com LibreWolf v135, há um congelamento de alguns milissegundos ao trocar de aba ou navegar pelas páginas da documentação
    • No navegador Fennec do Android também houve uma experiência parecida, com uma pausa de cerca de 0,5 segundo ao alternar entre as abas Documentation e Properties; pode nem ser um congelamento real, talvez seja um problema no tratamento de casas decimais da animação
    • Já se sabe que existe lentidão na navegação e isso será verificado; no momento, durante a navegação, a busca de arquivos mdx e uma autenticação simples estão sendo processadas no servidor, então o servidor ainda está em uso, mas com a mudança para open source agora parece possível migrar diretamente para um site estático
    • O servidor Next JS leva cerca de 0,5 segundo para renderizar conteúdo estático veja a imagem
• Pessoalmente, estou procurando um framework/biblioteca com microinterações completamente projetadas e desenvolvidas; até os melhores toolkits de UI muitas vezes passam a sensação de pequenos saltos ou glitches sutis
  • Se houver exemplos de microinterações que vocês gostariam que fossem melhoradas ou adicionadas, eu adoraria que compartilhassem; no momento estou desenvolvendo mais componentes, e acho que daria para implementar esse tipo de microinteração
• Acho o design excelente; atualmente uso Mantine com frequência e estou satisfeito, mas vou manter esta biblioteca no radar; ainda assim, fico pensando como seria bom ter uma biblioteca desse nível de qualidade para ReactNative, porque as soluções atuais ainda não me satisfazem
  • Pelo que eu lembrava, o Mantine já teve problemas de a11y (acessibilidade); queria saber se você já chegou a verificar conformidade de acessibilidade usando Mantine
• No README, o link de getting started leva para o changelog, então o guia inicial não aparece diretamente
  • Como forma de agradecimento, já abri um PR para isso
• Esta biblioteca parece muito organizada e limpa, o que é impressionante; gostaria que houvesse uma forma de integrá-la facilmente com WordPress, ou então queria saber se isso já existe
• Acho que, além da bela composição dos componentes, vocês tomaram uma decisão muito ousada; parabéns pelo sucesso até aqui, e espero que essa mudança ajude não só vocês, mas todo o ecossistema
• Fiquei curioso pelo fato de não haver no site nenhum plano de preços, incentivo de pagamento ou opção de doação para esta biblioteca; ou seja, queria saber se, com a abertura total do código, não há mais interesse em monetização
  • Depois de vender esta biblioteca pelos últimos 5 anos, ganhei o suficiente, e agora fico satisfeito em torná-la pública para que também possa ser usada por pessoas para quem a compra era difícil (o preço anterior era voltado para equipes); daqui para frente, alguns componentes adicionais serão lançados em formato de licença Plus, mas as bibliotecas principais de React e Figma continuarão gratuitas e open source
  • No fim do artigo, há a menção de que “há planos para evoluir ainda mais o Reshaped introduzindo componentes premium complexos e opinativos sobre a biblioteca principal; isso não significa apenas ‘50 layouts de landing page’, mas componentes avançados que exigem lógica sofisticada de CSS e React”
• Foi encontrado um problema em que a tecla backspace não funciona no recurso de autocomplete (confirmado em OSX Safari & Chrome), e isso chamou atenção
  • Pedindo desculpas imediatamente, foi informado que a documentação será redeployada hoje, e que esse problema já foi corrigido no patch mais recente