Es gibt eine Reihe von Fragen, mit denen ich schon so lange kämpfe, wie ich mich erinnern kann. Die Fragen drehen sich um die Arbeit an Design-Systemen: Wo sollen wir Dinge dokumentieren? Machen wir eine separate App? Verwenden wir ein Drittanbieter-Tool, um unsere Komponenten zu dokumentieren? Wie soll das mit Figma oder Sketch verknüpft werden? Was ist mit schriftlicher Dokumentation? Sollen wir viel Zeit investieren, um ein riesiges, Polaris-ähnliches Wiki darüber zu erstellen, wie man Dinge baut?
Das Problem bei all diesen Tools, Links und Repositories ist, dass es immer schwieriger werden kann, sich zu merken, wohin man für welche Art von Informationen gehen muss. Designer sollten *hier* gehen und Ingenieure sollten *dort* gehen – es sei denn, Sie sind natürlich ein iOS-Ingenieur, dann benötigen Sie stattdessen *diese* spezielle Ressource. Es kann überwältigend und verwirrend für alle sein, die nicht im Umfeld des Design-System-Dramas leben und nur versuchen, pünktlich eine Funktion auszuliefern.
Nach Jahren des Ringens mit diesen Fragen ist mein aktueller Rat an mich selbst in der Vergangenheit (und in der Gegenwart) dieser: *Treffen Sie die Leute dort, wo sie sind*. Und wo stellen die meisten Leute Fragen zu Design-Systemen, sei es zu einer Farbvariable, einer Komponente oder einem Designmuster?
In Slack!
Neulich dachte ich, es wäre nett, einige benutzerdefinierte Antworten für Slackbot einzurichten, um eine recht einfache Sache zu tun. Wenn jemand color me in einen Kanal eingibt, werden alle Farbvariablen und ihre Hex-Werte eingefügt. So muss niemand ein neues Tool lernen oder *noch einen Link* als Lesezeichen speichern.
Hier erfahren Sie, wie es funktioniert.
Zuerst müssen wir die Einstellungen der Organisation, in der Sie sich befinden, öffnen und in diesem Dropdown-Menü auf „Anpassen“ klicken
Das öffnet einen neuen Tab mit den Einstellungen „Workspace anpassen“. Wenn Sie „Slackbot“ aus den Optionen auswählen, können Sie alle bereits eingerichteten benutzerdefinierten Antworten sehen. Von dort aus können wir eine neue Antwort wie folgt erstellen
Dieses \n ist das, was Dinge in eine neue Zeile bricht, damit ich es jetzt in einem Chat mit mir selbst testen kann, sobald ich dies gespeichert habe
Da dies so viel Platz beansprucht, habe ich auch separate Antworten für jede Farbe gemacht, wie blue und purple. Aber all das lässt mich fragen: Wie können wir Slack – oder jede andere Chat-App oder jedes Kommunikations-Tool – noch nutzen, um die Sache guter Design-System-Arbeit voranzutreiben?
Ich wette, es gibt noch viele andere Dinge, die wir tun können, um unser Leben in solchen Tools zu verbessern und die Arbeit an Design-Systemen noch einfacher zu machen.
Ich sehe Slack in letzter Zeit auch als Design-Ressourcenzentrum. Ich schreibe derzeit eine Slack-App, die eine Publishing-Datenbank namens Consonance integriert, und ich überlege, dies zu klonen, um eine Design-Spezifikations-API zu erstellen, die von Slack mit Slash-Befehlen aufgerufen werden kann.
Ich denke, eine API und die Kommunikation über Slash-Befehle ist eine viel praktikablere Wahl! Ich freue mich darauf, mehr über Ihr Projekt zu erfahren.
Für uns synchronisieren wir die Dokumentation nicht mit Figma, sondern lassen Figma selbst die Quelle der Wahrheit sein und halten unsere Tailwind-Konfiguration damit synchron. Unsere Komponentenbibliothek stellt dann sowohl unsere Vue-Komponenten als auch die Tailwind-Konfigurationsdatei bereit.
Was für eine großartige Idee und sie ist so einfach zu implementieren. Ich werde es definitiv auf einem kollaborativen Projekt ausprobieren, das viele Farben verwendet.
Ich liebe diese Idee auch für Mockups.
mockup [site-name]kann die Links zu den neuesten XD-Mockups ausgeben. Sehr praktisch, danke für die Inspiration.