Kontakt

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.

Lese hier mehr zu den Integrationen ...

Backend

Adapter und Plugins für headless Systeme: Sanity, WordPress, Contentful

Generatoren

Themes, Plugins und Generatoren für: Next.js, Gatsby, GraphQL

Design System Tooling

Templates und Konnektoren für: Style Dictionary, Figma, Backlight

Design System Derivate

Design System Theme Konverter für: Bootstrap, Material UI

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.

Storyblok mit visual Editing

Storyblok erweist sich als Allrounder mit einem innovativen Visual Editor. kickstartDS Komponenten können über unsere Component-API sehr schnell dort integriert werden. Das optimiert die Benutzererfahrung (UX) und macht Ihr Brand-Team glücklich. Ein entscheidender Vorteil hierbei ist die permanente Synchronisation zwischen Frontend und Ihrem Designsystem. 

Zum CMS Starter Paket mit Storyblok

Enterprise-Lösung mit Netlify Create

Wenn Sie größere Seiten visuell erstellen wollen, insbesondere solche, die mehrere CMS-Quellen benötigen, ist Netlify Create eine großartige Lösung, um Ihr digitales Team zu unterstützen. Netlify Create ist auch einer der Kandidaten, die umfassende Lösungen für Kunden mit Unternehmensanforderungen anbieten. 

Mehr über Headless-Lösungen lesen

Static CMS für den kleinen Anfang

Das kleine Entwickler-CMS. Holen Sie sich einen CMS-Ansatz, der direkt in Ihren bestehenden Git-Workflows funktioniert. Static CMS, als Nachfolger von Netlify CMS, ist vollständig Open Source und die Editoroberfläche kann statisch gehostet werden, wo immer Sie wollen! 

Mehr zu Static CMS lesen

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!

Mehr über Sanity CMS lesen

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!

Beispiel mit Wordpress

Generatoren für Headless

... 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, für direkt nutzbare Starter, die alles enthalten, was eine Website braucht (für SEO, Leistung usw.). Diese basieren auf Schema-Tools (die JSON Schema unter der Haube verwenden), die wir geschrieben haben, um diese Starter zu ermöglichen. Und wenn Sie Next.js verwenden, haben wir einige Plugins, mit denen Sie Ihre Komponenten auch dort auf performante Weise nutzen können, ohne selbst Glue-Code schreiben zu müssen.

Schließlich können Sie unser GraphQL-Tooling nutzen, um TypeScript-Typen für Ihre Komponenten und GraphQL-Typen und -Fragmente für die Verwendung in Gatsby und Next zu generieren, wobei die Komponentendokumentation automatisch mitgeliefert wird.

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.

Mehr zu Next.js

11ty Starter, bereit zum Deploy!

11ty ist ein benutzerfreundlicher Generator für statische Websites, bei dem Einfachheit und Schnelligkeit im Vordergrund stehen, so dass Sie schnelle und effiziente Websites ohne einen aufwändigen Build-Prozess erstellen können. Unser kickstartDS-spezifisches Plugin integriert JSX nahtlos in Ihren 11ty-Build.

 

Zur offiziellen 11ty Webseite

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.

Mehr zu GraphQL

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 FigmaStyle 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-EigenschafteniOS-Definitionen oder Themes. Alle unsere Token sind in einem Style Dictionary definiert.

Mehr zu Style Dictionary

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

kickstartDS Design-Token Template

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!

Mehr zu Backlight.dev

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.

Komponenten-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

 

Design-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.

 

Mehr zu Bootstrap-Themes

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!

 

Mehr zu Material UI-Themes

Sie wollen kickstartDS in Ihren Projekten nutzen?

Gerne überlegen wir gemeinsam, welche Integration der Open Source Software sinnvoll sind,