Overview

Getting value from a design system isn't about crafting and releasing the perfect, complete library into the wild. It's about starting to work in a systematic way today.

Knapsack provides a place to document your design system - through dynamic connections to the source - as you design and build. This means you can organically build and start using your system without constantly trying to carve out time.

Engineers

Running Knapsack Locally

Before you get started, follow the instructions in our Knowledge Base to set up and run Knapsack locally on your machine.

Connect Design Tokens

Knapsack provides both dynamic documentation and cross-platform transforms for your design tokens, making it a turnkey solution for many of your token management needs. To get started quickly, follow our guide for adding or modifying tokens and configuring the Knapsack Token Engine.

Once your tokens are connected:

• Engineers across web and native platforms will be able to leverage the tokens and any styles you create to power their products immediately.
• Designers and other non-engineers will be able to review, copy, and even propose changes to token values and metadata using the web UI.

Connect the Components You Build

Each time you build or reference a component for a UI you're building, ensure it is connected to Knapsack for reference and reuse.

If a component isn't yet documented connect it using the following steps: (when working locally)

1. Find or Add a Page – Find the existing Pattern Page with the design asset. If it doesn't exist, add a new Pattern Page to Knapsack.
2. Add Usage Guidelines – Add Engineering Usage Guidelines using the Markdown content block.
3. Add a Code Tab – Add a Code Tab to the page, selecting the proper renderer.
4. Connect the Source Template – Add the package path and namespace for the pattern.