Wir wollen Designsysteme demokratisieren. Deshalb gehen wir schon bald Open Source.Infomiert werden

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:

Backend

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

Generatoren

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

Design Tooling

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

Derivate

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.

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!

Beispiel mit Sanity-Integration

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!

Unser Blog zum Beispiel

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.

Unser Glossar zum Beispiel

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.

Mehr zu Next.js

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

Mehr zu GatsbyJS

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

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.

Unser 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-sided 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.

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.

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

Verpasse nicht unser Open Source Release

Lass Dich einfach von uns erinnern, wenn es soweit ist. Wir senden Dir nur zwei E-Mails, eine Bestätigungsmail und die Release-Benachrichtigung. Versprochen 🤞