Umfangreiche Integrationen
... erleichtern jegliches Setup und weitere Aufgaben
Konzentration auf das Wesentliche!
Ein Designsystem braucht Anwendungen und Projekte, die es auch verwenden. Sonst bleibt es leider nutzlos. Deshalb kommt kickstartDS direkt mit gebrauchsfertigen Integrationen für viele Use Cases und Systeme.
Zum Beispiel bieten wir Adapter, Plugins und Generatoren, um kickstartDS in diversen Headless CMS für Marketing-Websites, Blogs u.v.m. nutzbar zu machen oder die Art und Weise, wie man Designentscheidungen in einen automatisierten Prozess integriert.
Lese hier mehr zu den Integrationen von:
CMS Integration auf Knopfdruck
Warum sind gute Integrationen besonders wichtig?
Anstatt alles selbst und händisch zu erstellen und Euer Projekt im Headless-CMS selbst einzurichten, könnt Ihr einfach unsere Plugins und Starterkits verwenden. Somit gelingt auch hier der "Kickstart" und gleichzeitig ist Eurer Designsystem von Anfang an automatisch mit integriert.
Sanity.io für strukturierte Daten und Inhalte
Sanitys Herangehensweise an strukturierte Daten passt wirklich gut zu unserer Art, Komponenten zu erstellen. Die vorhandene Komponente JSON-Schemas kann mit kickstartDS wiederverwendet werden, um Sanity-Konfigurationen auf generische Weise zu erstellen – immer synchron mit Eurem Designsystem, ohne zusätzlichen manuellen Aufwand!
Headless WordPress für Blogs
WordPress ist das beliebteste Tool um Blogs zu erstellen und zu pflegen. Mit dem unserem Gatsby Theme (via wpgraphql) macht Ihr WordPress zum Headless CMS. Dabei bleibt die UX des Redakteurs erhalten und Ihr bekommt dennoch einen modernen, leistungsstarken und sicheren Web-Stack!
Marketing- und Content-Seiten mit Contentful
Contentful ist eine großartige Lösung, wenn es darum geht größere Webseiten zu erstellen. Die kickstartDS Integration ermöglicht es, Designsystem-Komponenten ohne großen Aufwand im Page-Builder verfügbar zu machen. Contentful bietet auch umfassende Lösungen für große Unternehmen und Ihre Anforderungen.
Generatoren und Jamstack
... helfen beim Skalieren.
Wie helfen Dir Generatoren?
In einem Designsystem, welches mit kickstartDS erstellt wurde, sind alle Komponenten mit ihren Eigenschaften perfekt strukturiert. Wir nutzen diese Struktur, um ein Gatsby-Theme bereitzustellen, das bereits alles enthält, was eine Website benötigt (für SEO, Performance usw.).
Zusätzlich gibt es für dieses Theme sog. Transformer für WordPress, Netlify CMS, Contentful, MDX. Wenn Sie Next.js verwenden, haben wir einige Plugins, um die Komponenten auch dort performant zu verwenden, ohne selbst Glue-Code schreiben zu müssen.
Nutzt unsere GraphQL-Tools, um TypeScript-Typen für die Komponenten und GraphQL-Typen und -Fragmente für die Verwendung in Gatsby und Next zu generieren. Gleichzeitig wird die Komponenten-Dokumentation automatisch erzeugt.
Plugin und Starter für Next.js
Use our starter to have a project running in mere minutes, or use our plugins directly to configure everything the way you like... while still profiting from work already done. All components are completely SSR-compatible, too.
Mit unserem Starter bringt Ihr ein Projekt in wenigen Minuten zum Laufen. Oder nutzt unser Plugin direkt, um alles so zu konfigurieren, wie Ihr es braucht ... dabei ist schon ein Großteil der Arbeit getan. Alle Komponenten sind zudem vollständig SSR-kompatibel.
Vollständiges Gatsby-Theme
Unser Theme automatisiert alles, was mit dem Rendern Eures Frontends zu tun hat (SEO, Performance usw.). Dabei bietet es gleichzeitig eine gemeinsame Schnittstelle zur Implementation eigener Transformatoren und Resolver. Oder ihr nutzt einfach eines von denen, für die wir bereits erstellt haben: WordPress, Netlify CMS, Contentful, MDX
GraphQL-Types & Fragmente
Basierend auf unserer Komponenten-API verfügen wir über Tools (via GraphQL Tools), um automatisch GraphQL-Types und Fragmente zu generieren. Dies kann der ideale Baustein für die Erstellung einer gemeinsamen API zwischen Frontend und Backend. Wir nutzen es z.B. als Kern unseres Gatsby-Themes.
Von Design zu Entwicklung und zurück
Design Tokens sind nur der Anfang
Wie verbessern Design Tokens den Designprozess:
Tokens sind der perfekte Ausgangspunkt um den Design- und Entwicklungsprozess zu erleichtern und die Kommunikation, sowie die Verantwortlichkeiten zwischen Designern und Entwicklern entscheidend zu verbessern. Tools wie Figma, Style Dictionary oder Plattformen wie Knapsack oder Backlight unterstützen Token und sorgen für die Skalierbarkeit und Flexibilität Eures Designsystems.
Style Dictionary
Style Dictionary ist ein von Amazon entwickeltes Open Source Tool, das dabei hilft, eine zuverlässige Struktur für Eure Design-Tokens zu erstellen. In JSON werden alle Token definiert und dann in verschiedene Zielformate zu konvertiert: CSS-Eigenschaften, iOS-Definitionen oder Themes. Alle unsere Token sind in einem Style Dictionary definiert.
Figma
Figma erobert derzeit die Designszene im Sturm. Wir bieten eine Figma-Vorlage an, in der alle unsere semantischen Design-Token visuell kodiert sind. Ihr könnt die Werte in Figma ändern und einen unserer Konnektoren verwenden, um sie automatisch wieder in Eure Codebasis zu integrieren ... zum Beispiel als Teil Eures CI/CDs.
Backlight.dev
Backlight kann als ganzheitliche Plattform Ihres Teams für Design System Management / DesignOps dienen. kickstartDS ist vollständig kompatibel mit Backlight und seinen Funktionen wie der Style Dictionary-Integration, Bundling, Packaging usw. Ihr könnt sogar unser Starterkit verwenden, um Euer erstes code-sided Design-System an den Start zu bringen!
Integration in
Storybook ist de-facto der Standard in der Entwicklung hochwertiger, isolierter Code-Komponenten. Deswegen haben wir viel Zeit investiert, um sicherzustellen, dass sich alles zwischen KickstartDS und Storybook bestmöglich integriert. Und dafür haben wir extra zwei Storybook-Addons selbst geschrieben!
Controls
Mit unserer Component-API interagiert Ihr einfach über automatisch konfigurierte Storybook-Steuerelemente.
Tokens
Anzeigen und Ändern von Komponenten-Tokens direkt in Storybook mit unserem eigenen Storybook-Addon.
Composition
Wir nutzen für alle Designsystem-Projekte Composition. So findet sich unsere Doku direkt in Eurem Storybook.
JSON Schema
Überprüft das JSON-Schema, das die Component-APIs definiert oder ändert Werte mit dem typed auto-complete.
Derivate
... generieren Low-Code Integrationen
Tokens können ebenfalls dazu verwendet werden, Themes für andere Frameworks und Bibliotheken zu generieren.
Bootstrap
Generiert einfach automatisch ein Bootstrap-Theme, basierend auf unseren semantischen Design-Tokens, indem Ihr die Style Dictionary-Integration nutzt. Themes sind eine gute Möglichkeit , um in kürzester Zeit eine 80%-Lösung zu erreichen, um von dort weiter auszubauen.
Material UI / MUI
Wie beim Bootstrap-Theme ist es sehr sinnvoll, vorhandene Design-Tokens und unsere Style Dictionary-Konfiguration zu nutzen, um automatisch ein passendes Material UI / MUI-Theme zu generieren. Natürlich auch als Teil eurer connected CI/CD!