# KNAPSACK FOR DESIGNERS
## Design with production-ready code
Knapsack unifies design, documentation, and code to streamline collaboration between design, engineering, and product teams. Designers can leverage reusable components, effortless UI prototyping, and automatically updating documentation to deliver exceptional user experiences.
## Loved by digital product teams at
## Sync with design tools
Seamless integration with tools allows you to connect your designs directly to production-ready code components and automatically update assets and documentation as your design and brand guidelines evolve.
- Knapsack's dynamic connection uses Figma’s REST API and our deep Git integration to auto-update design and code documentation and demos.
- Import styles and themes using Variables, Collections, and Modes, maintaining all groupings and associations from design tools of your choice.
[Explore Connecting Design Sources](https://docs.knapsack.cloud/site/ks-docs/latest/pages/figma-design-source)
## Effortless design documentation
Automatically maintain and implement design decisions and guidelines through a dynamic connection between coded components and design assets. Real-time updates keep everything accurate and up-to-date without relying on engineers.
- Connect and manage design and code assets in Knapsack’s centralized platform, ensuring alignment across teams.
- Contextualize design assets with a versatile content block system, ensuring a comprehensive understanding of your product standards and brand guidelines.
[Explore Adding Documentation](https://app.knapsack.cloud/site/ks-docs/latest/pages/adding-documentation)
## Reduce QA issues
Knapsack reduces design-to-code discrepancies with real-time feedback and alignment. Theme changes are instantly reflected on production-ready components, helping teams catch issues early and avoid rework to ensure fast, high-quality product delivery.
- See changes to themes rendered on production code components as you make them.
- Immediate feedback loops ensure that designs are implemented as expected.
[Explore Prototyping for Non-Technical Users](https://www.knapsack.cloud/feature-listing/prototyping-and-composition)
## Drive collaboration across teams
Designers can proactively collaborate across teams using individual branching, advanced composition tools, sharable links, and commenting to bridge the gap between design and development. With full visibility into design choices, tokens, and components, teams can easily find what they need; simply design it once and leverage it across the board.
- Empower designers to innovate with individual branching and prototyping tools that can be shared via browser link.
- Use browser-based contributions, backed by Git, allowing developers, designers, and product managers to provide real-time feedback.
- Control visibility, access, and editing capabilities for your documents and assets to ensure the fidelity of your digital production operations.
[Explore Team Permissions and Controls](https://docs.knapsack.cloud/site/ks-docs/latest/pages/team-management)
## See Knapsack in action with a guided, interactive tour
### Designer Tour
Demo Workspace | Knapsack
Design Tokens
View and manage building blocks for our digital brand.
Components Overview
Find and understand UI elements in design and code.
Full-Page Prototyping
Assemble modular elements into UIs based in code.
To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
### Variables
| Collection | Modes | Vars | |
| :-- | :-- | :-- | :-- |
| density | cozy, compact | 7 | |
| theme | arcadiaLight, arcadiaDark, basisLight, basisDark | 13 | |
#### Variable Usage
Use the dropdowns below to select the mode for each collection. Then use the body data attributes to use the variables in your codebase.
``` html
```
### Patterns
New Pattern
#### Author
Design: Needs Updated
Development: Reviewing
QA: Perfect!
Mobile: Not Gonna Build
React: Not Gonna Build
Angular: Proposed
| | | |
| --- | --- | --- |
| Designs Add Design Source | Docs Add Docs | Templates Add Template |
#### Button
Spec Alignment
Design: Ready to Rock
Development: Ready to Roll
QA: Not Quite Right
Mobile: Ready to Use
React: Ready to Use
Angular: Proposed
| | | |
| --- | --- | --- |
| Designs ButtonAdd Design Source | Docs UsageComparisonAdd Docs | Templates Add Template |
#### Callout
Design: Needs Designed
Development: Ready to Roll
QA: Perfect!
Mobile: Needs Reviewd
React: Ready to Use
Angular: Proposed
| | | |
| --- | --- | --- |
| Designs Add Design Source | Docs Add Docs | Templates Add Template |
#### Card
Spec Alignment
Design: Ready to Rock
Development: Ready to Roll
QA: Perfect!
Mobile: Not Built Yet
React: Ready to Use
Angular: Proposed
| | | |
| --- | --- | --- |
| Designs CardAdd Design Source | Docs Add Docs | Templates Add Template |
#### Divider
Spec Alignment
Design: Needs Reviewed
Development: Building
QA: Not Quite Right
Mobile: Not Built Yet
React: Needs Reviewed
Angular: Proposed
| | |
| --- | --- |
| Designs DividerAdd Design Source | |
**Welcome to Knapsack for Designers**
Welcome to this quick demo tailored for designers! From leveraging the power of cloud authoring to seamlessly prototyping with advanced component variations and supercharging your workflows with Figma integrations, we’ll uncover how Knapsack empowers you to take full creative control of your design system.