Reshaped ahora es de código abierto

• Reshaped es un proyecto que ofrece bibliotecas de componentes para React y Figma para diseñadores y desarrolladores
• Al principio funcionaba con licencias de pago, pero ahora hizo una transición completa a código abierto
• Con este cambio a código abierto, ahora se puede acceder tanto al código fuente como a la biblioteca de diseño en GitHub y Figma Community
• El proyecto fortalece la conexión entre diseño e ingeniería y presenta mejores prácticas listas para aplicarse directamente en el trabajo real
• Los compradores anteriores seguirán recibiendo actualizaciones y soporte

---

Contexto detrás del paso de Reshaped a código abierto

• Hace unos 5 años, el proyecto Reshaped comenzó por la necesidad de contar con una biblioteca de componentes que pudiera usarse tanto en React como en Figma
• Con base en más de 10 años de experiencia trabajando con sistemas de diseño, hay una comprensión clara de los problemas comunes que surgen en los sistemas de diseño y de cuáles son los buenos estándares
• Se descubrió que el 80% de la web todavía está construida sobre principios de diseño centrales muy parecidos, y se diseñó un sistema que cubre ampliamente esa parte, mientras ofrece utilidades de bajo nivel para que los desarrolladores puedan manejar con flexibilidad el 20% restante
• Desde el inicio, no se enfocó solo en accesibilidad o solo en diseño, sino en resolver al mismo tiempo diversos retos reales como la alineación entre diseño e ingeniería, temas de UI, modo oscuro y microanimaciones

Del modelo de pago a la decisión de abrirlo

• Para hacer sostenible el mantenimiento del proyecto, al principio se adoptó un modelo de venta de licencias de pago para individuos y equipos
• Gracias a eso, fue posible concentrarse más en una comunidad pequeña y responder con mayor profundidad a reportes de errores y solicitudes de funciones
• Siempre existió el deseo de eliminar la barrera de pago algún día, y hace 2 años se abrió primero el paquete de React de forma gratuita, lo que abrió nuevas posibilidades
• Ahora, todo el código fuente y la biblioteca de Figma se publicaron como código abierto, con React disponible en GitHub y Figma en Figma Community

Significado del cambio a código abierto y efectos esperados

• Reshaped es una herramienta que tiende un puente entre diseño e ingeniería, y permite que ambos lados aprendan mejores prácticas para construir sistemas de diseño escalables
• Al hacerse público el código de la biblioteca, cuando se incorporen nuevas funciones se podrá compartir de forma transparente el proceso real de implementación
• Las nuevas funciones de Figma o React también podrán evaluarse y tomarse como referencia antes de aplicarlas al sistema de diseño de una empresa mediante los ejemplos de Reshaped

Planes a futuro y apoyo a la comunidad

• La biblioteca de componentes de Reshaped seguirá expandiéndose en el futuro
  • Los compradores anteriores seguirán recibiendo actualizaciones futuras y soporte sin cambios
  • Los canales de comunicación existentes también se mantendrán igual
• En adelante, se está considerando agregar sobre la biblioteca base componentes premium más sofisticados y con mejor usabilidad
  • No se trata de funciones aisladas como 50 layouts para landing pages, sino de componentes de alta complejidad que requieren CSS complejo y lógica avanzada de React

La decisión de devolverlo a la comunidad

• Tras 5 años de operar como código cerrado, ahora se está devolviendo todo a la comunidad con expectativa por esta nueva etapa

[GN⁺]

Opiniones de Hacker News

• Es una librería realmente genial y agradecen que haya tanto código disponible gratis
• Da la impresión de que el diseño está muy limpio y bien logrado
  • En la combinación de Manjaro Linux y LibreWolf v135 hay congelamientos de unos milisegundos al cambiar de pestaña o navegar por las páginas de documentación
    • En el navegador Fennec de Android también experimentaron algo similar: al cambiar entre las pestañas Documentation y Properties se detiene unos 0.5 segundos; creen que quizá no sea un freeze real, sino un mal manejo de decimales en la animación
    • Ya saben que existe una navegación lenta y lo van a revisar; por ahora el servidor se usa porque durante la navegación procesa la búsqueda de archivos mdx y una autenticación simple, pero creen que ahora, con el cambio a open source, ya es posible pasar directamente a un sitio web estático
    • Al servidor de Next JS le toma alrededor de 0.5 segundos renderizar el contenido estático ver imagen
• Personalmente están buscando un framework/librería completamente diseñado y desarrollado con microinteracciones bien implementadas; incluso los mejores toolkits de UI muchas veces se sienten como si tuvieran pequeños saltos o glitches sutiles
  • Si tienen ejemplos de microinteracciones que les gustaría mejorar o agregar, les gustaría que los compartieran; actualmente están desarrollando más componentes y creen que podrían implementar ese tipo de microinteracciones
• Piensan que el diseño es excelente; actualmente usan Mantine de forma activa y están satisfechos, pero también van a tener presente esta librería, aunque les gustaría que existiera una librería de esta calidad para ReactNative, porque las soluciones actuales todavía no les convencen
  • Entienden que Mantine tuvo problemas de a11y (accesibilidad) antes y les da curiosidad saber si alguien ha hecho verificaciones de cumplimiento de accesibilidad con Mantine
• En el README, el enlace de getting started lleva al changelog, así que la guía de inicio no aparece directamente
  • Como muestra de agradecimiento, subieron el problema de inmediato como PR
• Esta librería se ve muy ordenada y limpia, lo cual les parece impresionante; les gustaría que hubiera una forma sencilla de integrarla con WordPress, o saber si quizá eso ya existe
• Creen que, además de una composición de componentes hermosa, se tomó una decisión muy audaz; felicitan el éxito logrado hasta ahora y esperan que este cambio ayude mucho no solo a ellos, sino a todo el ecosistema
• Les llama la atención que en el sitio no haya ningún plan de precios, incentivo de pago ni opción de donación, es decir, se preguntan si con el paso a open source total ya no tienen interés en monetizar
  • Después de vender esta librería durante los últimos 5 años, ya obtuvieron ingresos suficientes, y ahora están satisfechos de liberarla para que también la puedan usar personas a las que les resultaba difícil comprarla (el precio anterior estaba orientado a equipos); en adelante algunos componentes adicionales se lanzarán con una licencia plus, pero la librería principal de React y Figma seguirá siendo open source y gratuita
  • Al final del artículo se menciona: “Hay planes para impulsar aún más Reshaped introduciendo componentes premium complejos y con una postura clara sobre la librería principal; no se trata de ‘50 layouts para landing pages’, sino de componentes avanzados que requieren lógica sofisticada de CSS y React”
• Encontraron un problema en la función de autocompletado donde la tecla Backspace no funciona (confirmado en OSX Safari y Chrome), y les pareció interesante
  • Se disculparon de inmediato y avisaron que hoy volverán a desplegar la documentación, y que ese problema ya fue corregido en el parche más reciente