Leverage rich integrations...
... to ease setup and everyday tasks
Focus on the stuff that really matters:
While having a solid Design System is the necessary start, without projects using it this is of theoretical value.
This is why kickstartDS comes with ready-to-use integrations, adapters and even CMS starters for a lot of common scenarios you might encounter while thinking about a project - like your main marketing site, your blog or the way you want to integrate design decisions into an automated process, because ...
... a Design System is nothing without a System applying it!
Jump directly to integrations for:
Immediate integration with your favorite CMS backend
... because you shouldn't start from zero here, either
Why good integrations matter:
Instead of doing the legwork to set up a project with these headless CMS yourself, you can use our plugins and starters to hit the ground running... while also having your Design System automatically integrated from the get-go. And best thing, with automatic conversion of component API to CMS configuration, everything stays in sync, always! Without additional development time needed!
Static CMS to start small
Get a content management approach that works right inside your existing Git workflows. Static CMS, as a successor to Netlify CMS, is completely Open Source and the editor interface can be statically hosted wherever you like!
Visual Editing with Storyblok
Storyblok proves to be an all-rounder with an innovative visual editor. kickstartDS components can be integrated very quickly via our component API. This optimizes the user experience (UX) and makes your brand team happy. A decisive advantage here is the permanent synchronization between the frontend and your design system.
Enterprise pages with Netlify Create
When wanting to build bigger pages visually, especially those with the need for multiple CMS sources, Netlify Create is a great solution to empower your digital team. It's also one of the contenders offering deep solutions for customers with enterprise needs.
WordPress for blogs
WordPress shines for blog content, and many editors have a really solid working knowledge of it! By using WordPress in a headless way (using wpgraphql), you can leverage the editorial experience without losing out on a modern, performant and secure web stack!
Generators and Jamstack
... multiplying existing value
What a generator can do for you:
Your Design System already has really good knowledge about what a component is, how it is structured and how it behaves. We use that knowledge to provide starters that include everything a website needs (for SEO, performance, etc). Those are based on schema tooling (utilizing JSON Schema under the hood) we wrote to enable those starters. And if you're using Next.js we have some plugins to use your components in a performant way there too, without writing glue code yourself.
Finally: being able to use our GraphQL tooling to generate TypeScript types for your components and GraphQL types and fragments for usage in Gatsby and Next, all while including component documentation automatically.
Starter for Next.js
Use one of our starters 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.
Ready to deploy 11ty starter
11ty is an easy-to-use static site generator that prioritizes simplicity and speed, allowing you to build fast and efficient websites without a heavy build process. Our kickstartDS-specific plugin integrates JSX into your 11ty build seamlessly.
GraphQL types and fragments
Based on our component API we have tooling (based on GraphQL Tools) to automatically generate types and fragments for GraphQL. This can be the perfect building block to creating your shared API between frontend and backend.
Connect to Design Tooling
... to help bridge the dev-design divide
How Design Tokens enable better processes:
Tokens are the perfect starting ground when establishing shared processes and responsibilities between designers and developers, as they encode the most atomic design decisions of your Design System. Connecting design tools like Figma through Style Dictionary, or using complementary services to manage your Design System like Backlight, helps set up a baseline for your team, without requiring you to do everything by yourself!
Style Dictionary
Style Dictionary is a tool developed by Amazon to help with establishing a dependable structure for your Design Tokens. This includes defining them in a well-defined way (JSON) and then converting them to different target formats: CSS Properties, iOS definitions or themes. All our tokens are defined in a Style Dictionary.
Figma
Figma is currently taking the design space by storm. We offer a Figma template with all our semantic Design Tokens encoded in a visual way. You can even change values in Figma, and use one of our connectors to integrate them back into your code base automatically... for example as part of your CI/CD
Backlight
Backlight can function as your teams whole-in-one platform for Design System management / DesignOps. kickstartDS is wholly compatible with Backlight, and its features like the Style Dictionary integration, bundling and packaging, etc. You can even use our starter to cut even more corners in getting your first Design System release live!.
Integration with
Storybook is the de-facto standard for writing high-quality, isolated components. This is why we've not only invested a lot of time on making sure that everything between kickstartDS and Storybook integrates as nicely as possible, but also already written two addons ourselves!
Controls
Interact with our rich component API through automatically configured Storybook controls.
Tokens
View and change component tokens directly in Storybook with our own Storybook addon.
Composition
We enable Storybook composition, meaning you'll always get our docs inside your Storybooks.
JSON Schema
Inspect the JSON Schema defining the component APIs, or change values with typed auto-complete.
Derivatives
... generate low-code integration points
Re-use your tokens to generate themes for other frameworks and libraries.
Bootstrap
Generate a Bootstrap theme automatically, based on our semantic Design Tokens by utilizing the Style Dictionary integration. Themes can be a great way to achieve a 80% solution immediately; and build from there.
Material UI / MUI
As with the Bootstrap theme, it makes a lot of sense to leverage your existing Design Tokens and our Style Dictionary configuration to automatically generate a fitting Material UI / MUI theme, even as part of your connected CI/CD in a continuous way!