Reshaped est désormais open source

• Reshaped est un projet qui propose une bibliothèque de composants React et Figma pour les designers et les développeurs
• Initialement proposé sous licence payante, il passe désormais entièrement en open source
• Avec cette ouverture, le code source et la bibliothèque de design sont tous deux disponibles sur GitHub et Figma Community
• Le projet vise à renforcer le lien entre design et engineering et à proposer des bonnes pratiques directement exploitables en production
• Les acheteurs existants continueront à recevoir des mises à jour et du support

---

Pourquoi Reshaped passe en open source

• Le projet Reshaped a démarré il y a environ 5 ans, à partir du besoin d’une bibliothèque de composants utilisable à la fois dans React et Figma
• Fort de plus de 10 ans d’expérience sur les design systems, l’équipe comprend clairement les problèmes récurrents des design systems ainsi que les bons standards à appliquer
• En constatant que 80 % du web repose encore sur des principes de design fondamentaux très similaires, le projet a été conçu pour couvrir largement ces besoins tout en fournissant des utilitaires bas niveau permettant aux développeurs de gérer avec souplesse les 20 % restants
• Dès le départ, l’objectif n’était pas de se concentrer uniquement sur l’accessibilité ou uniquement sur le design, mais de résoudre ensemble divers enjeux concrets comme l’alignement entre design et engineering, le theming UI, le mode sombre et les micro-animations

Du modèle payant à la décision d’ouvrir le projet

• Pour assurer la viabilité du projet, le choix initial a été de vendre des licences payantes pour les particuliers et les équipes
• Cela a permis de se concentrer davantage sur une petite communauté et de répondre en profondeur aux rapports de bugs et aux demandes de fonctionnalités
• L’idée de supprimer un jour la barrière payante existait depuis longtemps, et il y a 2 ans, la gratuité du package React a ouvert de nouvelles possibilités
• Désormais, l’ensemble du code source et la bibliothèque Figma sont publiés en open source : React est disponible sur GitHub, et Figma sur Figma Community

Ce que signifie ce passage à l’open source

• Reshaped est un outil qui fait le pont entre design et engineering, permettant aux deux côtés d’apprendre les bonnes pratiques pour construire des design systems évolutifs
• Avec l’ouverture du code de la bibliothèque, il devient possible de partager en toute transparence le processus réel d’implémentation lors de l’ajout de nouvelles fonctionnalités
• Les nouvelles fonctionnalités de Figma ou de React peuvent aussi être benchmarkées à l’avance à travers les exemples de Reshaped, avant d’être appliquées au design system d’une entreprise

Suite de la feuille de route et support de la communauté

• La bibliothèque de composants de Reshaped continuera à s’étendre
  • Les acheteurs payants existants continueront à bénéficier, sans changement, des futures mises à jour et du support
  • Les canaux de communication existants restent également inchangés
• À l’avenir, le projet envisage d’ajouter au-dessus de la bibliothèque cœur des composants premium plus avancés et plus agréables à utiliser
  • Il ne s’agit pas de fonctions ponctuelles comme 50 layouts de landing page, mais surtout de composants complexes nécessitant une logique CSS et React avancée

La décision de redonner à la communauté

• Après 5 ans en closed source, le projet rend désormais tout à la communauté et se réjouit de cette nouvelle étape

[GN⁺]

Avis sur Hacker News

• Une bibliothèque vraiment remarquable, et de la gratitude pour le fait qu’une grande quantité de code soit désormais utilisable gratuitement
• Le design donne une impression de propreté et de soin
  • Avec la combinaison Manjaro Linux et LibreWolf v135, il y a un gel de quelques millisecondes lors du changement d’onglet ou de la navigation dans les pages de documentation
    • Expérience similaire sur le navigateur Fennec d’Android, avec un arrêt d’environ 0,5 seconde lors du passage entre les onglets Documentation et Properties ; cela pourrait ne pas être un vrai gel, mais plutôt un mauvais traitement des décimales dans l’animation
    • Le problème de navigation lente est bien identifié et sera vérifié ; pour l’instant, le serveur est utilisé car il gère l’exploration des fichiers mdx et une authentification simple pendant la navigation, mais le passage en open source permet désormais, semble-t-il, de basculer directement vers un site web statique
    • Le serveur Next JS met environ 0,5 seconde à rendre le contenu statique voir l’image
• Je cherche personnellement un framework/une bibliothèque entièrement conçu(e) et développé(e) avec de bonnes micro-interactions ; même les meilleurs UI toolkits donnent souvent une impression de petits sauts subtils ou de glitches
  • S’il y a des exemples de micro-interactions qui pourraient être améliorées ou ajoutées, ce serait bien de les partager ; un ensemble de composants supplémentaire est en cours de développement, et il devrait être possible d’y intégrer ce type de micro-interactions
• Je trouve le design excellent ; j’utilise activement Mantine en ce moment et j’en suis satisfait, mais je garderai aussi cette bibliothèque en tête ; cela dit, j’aimerais qu’il existe une bibliothèque de cette qualité pour ReactNative, car les solutions actuelles ne me satisfont pas encore
  • Il me semble que Mantine avait eu des problèmes d’a11y (accessibilité) par le passé ; je me demande si vous avez déjà vérifié la conformité en matière d’accessibilité avec Mantine
• Dans le README, le lien getting started renvoie vers le changelog, donc le guide de démarrage n’apparaît pas directement
  • Merci, et une PR a été ouverte immédiatement pour corriger ce point
• Cette bibliothèque paraît très ordonnée et propre, ce qui est impressionnant ; j’aimerais qu’il y ait un moyen de l’intégrer facilement à WordPress, ou alors je me demande si cela existe déjà
• Je pense qu’il s’agit à la fois d’un très bel ensemble de composants et d’une décision très audacieuse ; félicitations pour le succès obtenu jusqu’ici, et j’espère que ce changement sera d’une grande aide non seulement pour vous, mais aussi pour tout l’écosystème
• Je me demande pourquoi il n’y a sur le site ni tarification, ni incitation au paiement, ni option de don ; autrement dit, si le passage complet en open source signifie qu’il n’y a plus d’intérêt pour la monétisation
  • La bibliothèque a rapporté suffisamment pendant les cinq dernières années, et je suis désormais satisfait de la rendre publique afin que ceux qui ne pouvaient pas l’acheter puissent aussi l’utiliser (le tarif précédent visait surtout les équipes) ; à l’avenir, certains composants supplémentaires sortiront sous forme de licence Plus, mais la bibliothèque principale React et Figma restera gratuite et open source
  • En bas de l’article, il est mentionné : « Nous prévoyons d’introduire, au-dessus de la bibliothèque principale, des composants premium complexes et à forte opinion pour faire davantage évoluer Reshaped ; il ne s’agit pas simplement de “50 layouts de landing page”, mais de composants avancés nécessitant une logique CSS et React sophistiquée »
• J’ai repéré un problème où la touche retour arrière ne fonctionne pas dans la fonction d’autocomplétion (confirmé sur OSX Safari et Chrome), ce qui est intéressant
  • Des excuses ont été présentées immédiatement, avec l’annonce d’un redéploiement de la documentation aujourd’hui, et l’information que ce problème a déjà été corrigé dans le dernier patch