Tokenized Figma component library documentation for the Chassis Design System.
Chassis Figma provides documentation and reference material for the Chassis Design System's Figma component library. It documents how Figma components map to design tokens and code implementations, bridging the gap between design and development.
Note
This project is part of the multi-repository Chassis Design System. It focuses on Figma component documentation, while design tokens, CSS framework, icons, and assets are handled by their respective repositories.
Warning
This project uses pnpm for package management. Install it globally with npm install -g pnpm before running the commands below.
- Figma Component Documentation — Detailed reference for each Figma component with usage guidelines
- Token Mapping — Shows how Figma variables connect to design tokens and CSS output
- Tabbed Interface — Browse components by design specs, token usage, and code examples
- Search Integration — A Pagefind index that the search of chassis-ui.com reads
- Node.js 22.12.0 or higher (
.nvmrcnames the version that CI uses) - pnpm 10.0.0 or higher
- Git and Git LFS (for the
vendor/assetssubmodule)
git clone --recursive https://github.com/chassis-ui/figma.git chassis-figma
cd chassis-figma
pnpm install# Start development server (port 4326)
pnpm dev
# Build for production
pnpm build
# Preview production build
pnpm astro:preview| Script | Description |
|---|---|
pnpm dev |
Start development server at localhost:4326 |
pnpm build |
Build documentation site |
pnpm site:build |
Build vendor/assets at the pinned commit, then the site and its search index |
pnpm site:lint |
Run the linters (ESLint, unused Sass variables, Stylelint, Prettier) |
pnpm site:lint:html |
Validate the built site with html-validate |
pnpm site:lint:vnu |
Validate the built site with the Nu Html Checker (needs Java) |
pnpm site:format |
Format code with Prettier |
pnpm astro:dev |
Start Astro dev server |
pnpm astro:build |
Build Astro site |
pnpm astro:preview |
Preview production build |
pnpm check |
Run Astro check and the security audit |
pnpm vendor |
Check out and build the vendor/assets submodule at the pinned commit |
pnpm sync-submodules |
Move vendor/assets to the latest app/docs and build it |
chassis-figma/
├── site/
│ ├── astro.config.ts # Astro configuration
│ ├── config.yml # Site metadata and settings
│ ├── tsconfig.json # TypeScript configuration
│ ├── content/
│ │ ├── docs/ # Documentation content (MDX)
│ │ ├── figma/ # Figma component content (MDX)
│ │ └── callouts/ # Reusable callout content
│ └── src/
│ ├── components/ # Astro components
│ ├── layouts/ # Page layouts
│ ├── libs/ # Utility libraries
│ ├── pages/ # File-based routing
│ └── scss/ # Stylesheets
├── refs/ # Reference documentation
├── vendor/ # Git submodules (assets)
└── _site/ # Build output (generated)
Visit chassis-ui.com/figma for the full documentation site.
This project is part of the Chassis Design System's multi-repository architecture:
| Project | Description |
|---|---|
| chassis-website | Main website and shared documentation package |
| chassis-css | CSS framework and component library |
| chassis-tokens | Design token generation and management |
| chassis-icons | Icon library and build toolkit |
| chassis-assets | Multi-platform asset management |
| chassis-figma | Figma component documentation (this repository) |
All documentation sites share the @chassis-ui/docs package for consistent layouts, components, and styling.
See CONTRIBUTING.md for the dev setup, the conventions, what a pull
request needs before merge, and how the site is deployed. Pull requests target develop.
MIT License — see LICENSE file for details.