Umfangreiche Integrationen unseres Design System Starterkits kickstartDS
... 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.
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
Mit unserem Next.js-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 Design Systems.
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-first 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!
Derivate
... generieren Low-Code Integrationen
Design-Tokens können ebenfalls dazu verwendet werden, Themes für andere Frameworks und Bibliotheken zu generieren.
