Reshaped ist jetzt Open Source

• Reshaped ist ein Projekt, das React- und Figma-Komponentenbibliotheken für Designer und Entwickler bereitstellt
• Anfangs wurde es über ein kostenpflichtiges Lizenzmodell angeboten, jetzt wurde es vollständig auf Open Source umgestellt
• Durch die Open-Source-Freigabe sind sowohl der Quellcode als auch die Designbibliothek jetzt über GitHub und die Figma Community verfügbar
• Das Projekt stärkt die Verbindung zwischen Design und Engineering und zeigt Best Practices, die sich direkt in der Praxis einsetzen lassen
• Bestehende Käufer erhalten auch weiterhin Updates und Support

---

Hintergrund der Open-Source-Umstellung von Reshaped

• Der Anstoß für das Reshaped-Projekt vor etwa fünf Jahren war der Bedarf an einer Komponentenbibliothek, die sowohl in React als auch in Figma genutzt werden kann
• Auf Basis von mehr als zehn Jahren Erfahrung mit Design-Systemen besteht ein klares Verständnis für wiederkehrende Probleme in Design-Systemen und für gute Standards
• Es wurde erkannt, dass 80 % des Webs noch immer auf ähnlichen zentralen Designprinzipien aufbauen. Deshalb wurde ein System entworfen, das diesen Bereich breit abdeckt und zugleich Low-Level-Utilities bereitstellt, damit Entwickler die übrigen 20 % flexibel lösen können
• Von Anfang an lag der Fokus nicht nur auf Accessibility oder Design allein, sondern darauf, die Ausrichtung von Design und Engineering sowie UI-Theming, Dark Mode und Mikroanimationen gemeinsam als praktische Herausforderungen zu lösen

Vom Bezahlmodell zur Entscheidung für Open Source

• Um die nachhaltige Pflege des Projekts zu sichern, wurde anfangs ein Modell mit kostenpflichtigen Lizenzen für Einzelpersonen und Teams gewählt
• Dadurch konnte man sich stärker auf eine kleinere Community konzentrieren und intensiv auf Bug-Reports und Feature-Wünsche eingehen
• Der Wunsch, die Bezahlschranke eines Tages zu entfernen, war schon länger da, und vor zwei Jahren ergaben sich neue Möglichkeiten, als zunächst das React-Paket kostenlos gemacht wurde
• Nun werden der gesamte Quellcode und die Figma-Bibliothek als Open Source veröffentlicht; React ist auf GitHub verfügbar, Figma in der Figma Community

Bedeutung und erwartete Effekte der Open-Source-Umstellung

• Reshaped ist ein Werkzeug, das eine Brücke zwischen Design und Engineering schlägt, sodass beide Seiten Best Practices für den Aufbau skalierbarer Design-Systeme lernen können
• Da der Bibliothekscode offenliegt, lässt sich bei der Einführung neuer Funktionen der tatsächliche Implementierungsprozess transparent teilen
• Neue Funktionen von Figma oder React können anhand der Beispiele von Reshaped schon vor der Anwendung im Design-System eines Unternehmens benchmarkt werden

Weitere Pläne und Unterstützung für die Community

• Die Komponentenbibliothek von Reshaped soll auch künftig weiter ausgebaut werden
  • Bestehende Käufer erhalten weiterhin ohne Änderungen künftige Updates und Support
  • Auch die bisherigen Kommunikationskanäle bleiben unverändert bestehen
• Künftig wird erwogen, auf der Core-Bibliothek aufbauend noch hochwertigere und benutzerfreundlichere Premium-Komponenten hinzuzufügen
  • Im Fokus stehen dabei keine isolierten Funktionen wie 50 Landingpage-Layouts, sondern anspruchsvolle Komponenten, die komplexe CSS- und React-Logik erfordern

Die Entscheidung, an die Community zurückzugeben

• Nach fünf Jahren Closed Source wird nun alles an die Community zurückgegeben, verbunden mit der Vorfreude auf neue Möglichkeiten

[GN⁺]

Hacker-News-Kommentare

• Eine wirklich großartige Bibliothek, und zugleich Dankbarkeit dafür, dass so viel Code kostenlos genutzt werden kann
• Das Design wirkt sauber und gut gemacht
  • Unter der Kombination aus Manjaro Linux und LibreWolf v135 gibt es beim Wechseln von Tabs oder bei der Navigation innerhalb der Dokumentationsseiten für einige Millisekunden Freeze-Effekte
    • Ähnlich im Fennec-Browser auf Android: Beim Wechsel zwischen den Tabs Documentation und Properties kommt es ebenfalls zu einem kurzen Hänger von etwa 0,5 Sekunden; möglicherweise ist es kein echter Freeze, sondern eher eine fehlerhafte Verarbeitung von Animations-Fließkommazahlen
    • Das langsame Navigationsverhalten ist bekannt und wird überprüft; derzeit werden beim Navigieren das Auflösen von mdx-Dateien sowie eine einfache Authentifizierung auf dem Server verarbeitet, daher wird aktuell noch ein Server verwendet, aber durch die Open-Source-Umstellung ist nun wohl auch eine direkte Umstellung auf eine statische Website möglich
    • Der Next JS-Server braucht etwa 0,5 Sekunden, um statische Inhalte zu rendern siehe Bild
• Ich persönlich suche nach einem Framework/einer Bibliothek mit vollständig durchdachten und entwickelten Mikrointeraktionen; selbst die besten UI-Toolkits wirken oft so, als hätten sie subtile Sprünge oder Glitches
  • Falls es Beispiele für Mikrointeraktionen gibt, die verbessert oder ergänzt werden sollten, würde ich mich über Hinweise freuen; derzeit werden zusätzliche Komponenten-Sets entwickelt, und solche Mikrointeraktionen ließen sich vermutlich umsetzen
• Ich finde das Design hervorragend; ich nutze derzeit Mantine aktiv und bin zufrieden, werde mir diese Bibliothek aber ebenfalls merken. Allerdings wünschte ich, es gäbe eine Bibliothek dieser Qualität für ReactNative; die derzeit existierenden Lösungen sind noch nicht wirklich zufriedenstellend
  • Soweit ich weiß, hatte Mantine früher a11y-(Barrierefreiheits-)Probleme; mich würde interessieren, ob du mit Mantine schon einmal die Einhaltung der Barrierefreiheit geprüft hast
• Im README führt der getting started-Link zum Changelog, sodass die Einstiegshilfe nicht direkt erscheint
  • Mit einem Dankeschön wurde das Problem sofort als PR eingereicht
• Diese Bibliothek wirkt sehr aufgeräumt und sauber, was beeindruckend ist; es wäre schön, wenn es eine einfache Möglichkeit zur Anbindung an WordPress gäbe, oder vielleicht existiert so etwas ja bereits
• Ich finde, dass hier nicht nur wunderschöne Komponenten entstanden sind, sondern auch eine sehr mutige Entscheidung getroffen wurde; Glückwunsch zum bisherigen Erfolg, und ich hoffe, dass diese Veränderung nicht nur dir, sondern dem gesamten Ökosystem sehr helfen wird
• Ich frage mich, warum es auf der Website keinerlei Preispläne, Bezahlaufforderungen oder Spendenoptionen für diese Bibliothek gibt, also ob an einer Monetarisierung nach der vollständigen Open-Source-Freigabe kein Interesse mehr besteht
  • In den vergangenen fünf Jahren wurde mit dem Verkauf dieser Bibliothek genug verdient, und nun ist man zufrieden damit, sie auch für Menschen zugänglich zu machen, die sich den Kauf schwer leisten konnten (die bisherigen Preise waren auf Teams ausgerichtet); künftig sollen einige zusätzliche Komponenten als Plus-Lizenz erscheinen, aber die Kernbibliotheken für React und Figma bleiben weiterhin kostenlos und Open Source
  • Am Ende des Artikels steht außerdem: „Um Reshaped weiterzuentwickeln, planen wir, auf der Kernbibliothek komplexe und meinungsstarke Premium-Komponenten einzuführen — nicht einfach nur 50 Landingpage-Layouts, sondern fortgeschrittene Komponenten, die ausgefeilte CSS- und React-Logik erfordern.“
• Es wurde ein Problem entdeckt, bei dem in der Autocomplete-Funktion die Backspace-Eingabe nicht funktioniert (bestätigt in OSX Safari & Chrome), was interessant ist
  • Es wurde umgehend um Entschuldigung gebeten; die Dokumentation soll heute neu deployt werden, und das Problem ist im neuesten Patch bereits behoben