Design-Systeme sind heutzutage ein Vollzeitjob. Agenturen werden beauftragt, sie zu erstellen. Interne Teams werden gebildet, um sie zu verwalten, sie zu veröffentlichen, damit andere Teams sie nutzen können, und um sicherzustellen, dass sie dies auch tun. Design-Systeme sind kein Trend, sie sind eine positive Weiterentwicklung der digitalen Designgestaltung. Backlight ist das ultimative All-in-One-Entwicklungstool für Design-Systeme.
Ich finde es interessant, am Ende darüber nachzudenken. Was ist das bestmögliche Szenario für ein Design-System für Websites? Ich denke, es ist, wenn Sie ein versioniertes Design-System auf npm veröffentlicht haben. So können Teams es als Abhängigkeit in ihr Projekt integrieren und nutzen. Wie macht man das? Ihr Design-System ist auf GitHub und Sie veröffentlichen von dort. Wie macht man das? Sie arbeiten an Ihrem Design-System über eine Entwicklungsumgebung, die nach GitHub pusht. Was ist Backlight? Es ist diese Entwicklungsumgebung.
Starten Sie ein komplettes Design-System in Sekunden
Möchtest du mir zusehen, wie ich es mache?
Sie müssen sich nicht *für* eine Startvorlage entscheiden, aber es ist erhellend, all die Möglichkeiten zu sehen. Backlight ist in Bezug auf die zu verwendende Technologie für das System nicht besonders voreingenommen. Lit und Web Components? Großartig. React und Emotion? Cool. Nur Vue? Alles gut. Nunjucks und Sass? Das funktioniert.
Ein Starter-Design-System gibt Ihnen hier wirklich einen Vorsprung. Wenn Sie damit einverstanden sind, etwas von der Stange zu verwenden und es dann anzupassen, sind Sie unglaublich schnell einsatzbereit. Etwas, von dem Sie vielleicht annehmen, dass es ein paar Wochen dauern würde, es herauszufinden und sich einzuleben, ist sofort erledigt. Und wenn Sie zu 100 % benutzerdefiniert sein möchten, steht das immer noch komplett zur Verfügung.
Hochladen zu GitHub
Selbst wenn Sie noch nur testen, finde ich es erstaunlich einfach und beeindruckend, wie Sie mit ein paar Klicks einfach ein GitHub (oder GitLab) Repo erstellen und dorthin pushen können.
Für mich ist das der Moment, in dem es wirklich real wird. Dies ist kein Drittanbieter-Tool, bei dem jeder zu 100 % gezwungen ist, es zu nutzen, und Sie für immer darin gefangen sind und es nur nützlich ist, wenn die Leute das Drittanbieter-Tool akzeptieren. Backlight nimmt einfach branchenübliche Praktiken und macht sie einfacher und bequemer zu handhaben.
Dann, hochladen zu einem Registry.
Wie ich oben sagte, ist dies der große Moment für jedes Design-System. Wenn Sie es an eine Paket-Registry wie npm oder GitHub Packages senden, bedeutet das, dass jeder, der Ihr Design-System nutzen möchte, es jetzt installieren und wie jede andere Abhängigkeit verwenden kann.
In Backlight ist dies nur eine Frage von ein paar Klicks.
Mit einer PRO-Mitgliedschaft können Sie den Geltungsbereich auf Ihre eigene Organisation ändern. Bald werden Sie alle Ihre Design-System-Releases direkt von hier aus verwalten, einschließlich Major-, Minor- und Patch-Versionen.
Erstellen Sie eine Komponente
Ich hatte Backlight vorher nie benutzt, niemand hat mir geholfen, und ich habe keine der (umfangreichen) Dokumentationen gelesen. Ich habe einfach herumgeklickt und problemlos eine neue Komponente erstellt. In meinem Fall habe ich ein neues Nunjucks macro erstellt, einige SCSS-Stile hinzugefügt und dann eine Demo davon als Storybook-„Story“ erstellt. Alles, was ich tat, war, eine vorhandene Komponente zu referenzieren, um zu sehen, wie alles funktionierte.
Als einer der Erfinder von CodePen habe ich natürlich die In-Browser-IDE-Qualitäten davon sehr geschätzt. Es kompiliert Ihre Code-Änderungen (sieht aus wie ein Vite-Prozess) super schnell neu und benachrichtigt Sie hilfreich über Fehler.
Da dies ein sehr echtes, ernstes Design-System ist, würde ich diese neue Komponente nicht direkt auf master in unserem Repository pushen. Zuerst wird sie zu einem Branch, und dann committe ich dazu. Ich müsste nichts über Git wissen, um das hinzubekommen, schauen Sie, wie einfach es ist
Hallo, Stakeholder!
Design-Systeme sind ebenso ein menschliches wie ein technisches Anliegen. Design-Systeme müssen besprochen werden. Ich schätze es sehr, dass ich Backlight mit jedem teilen kann, auch wenn er nicht angemeldet ist. Kopieren Sie einfach einen Freigabe-Link (den niemand erraten könnte) und los geht's.
Hier gibt es viel zu entdecken.
Sie können ein ganzes Design-System hier verwalten. Sie verwalten Dinge von der atomaren Token-Ebene bis hin zum Erstellen von Beispielseiten und dem Zusammenfügen des Systems. Sie schreiben buchstäblich den Code, um all diese Dinge zu erstellen, einschließlich der Vorlagen, Stories und Tests, direkt in Backlight.
Was ist mit den Leuten in Ihrem Team, die wirklich nicht davon überzeugt werden können, ihre lokale Entwicklungsumgebung zu verlassen? Backlight versteht das und zwingt sie nicht dazu! Backlight hat eine CLI, die die lokale Entwicklung ermöglicht, einschließlich des Startens eines Servers zur Vorschau der aktiven Arbeit.
Aber damit ist es nicht getan. Sie können Dokumentationen für alles direkt in Backlight erstellen. Design-Systeme werden oft am besten in Worten erklärt! Und Design-Systeme können sogar (oder parallel) in rein Design-orientierter Software wie Figma, Sketch oder Adobe XD entstehen. Es ist möglich, Design-Dokumente direkt in Backlight zu verlinken, wodurch sie leicht zu finden und viel besser organisiert sind.
Ich bin sehr beeindruckt! Ich war mir anfangs nicht sicher, was ich von einem Tool halten sollte, das ein vollständiges Tool für Design-Systeme sein möchte, wissend, wie komplex diese ganze Welt ist, aber Backlight liefert wirklich auf eine Weise, die ich sehr befriedigend finde, besonders aus der Perspektive eines Front-End-Entwicklers, Designers und Managers.