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 theoretical value. This is why kickstartDS comes with ready-to-use integrations and adapters 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.
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 setup 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.
Sanity for structured content
Sanitys approach to structured data gels really well with our way of creating components. The existing component JSON Schemas can be re-used with our tooling to create Sanity configurations in a generic way - always in sync with your Design System, without additional, manual overhead!
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) with our Gatsby theme, you can leverate the editorial experience without losing out on a modern, performant and secure web stack!
Marketing sites with Contentful
When building bigger pages, especially those with more of a page-builder like marketing experience, Contentful is a great solution to empower your digital team. It's also one of the contenders offering deep solutions for customers with enterprise needs.
Generators and Jamstack
... multiplying existing value
What a generator can do for you:
Your Design System already has a really good knowledge about what a component is, how it is structured and how it behaves. We use that knowledge to provide a Gatsby theme, that already includes everything a website needs (for SEO, performance, etc). We even already have transformers for that theme for WordPress, Netlify CMS, Contentful, MDX. 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.
Plugin and starter for 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.
Complete Gatsby theme
Our theme automates everything related to rendering your frontend (SEO, performance, etc), while also providing a common interface to implement your own transformers and resolvers. Or you just re-use one of those we've already written for: WordPress, Netlify CMS, Contentful, MDX
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, and, for example, powers the core of our Gatsby theme.
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!