How sksammy33/product-design-system works
This is a Figma-led product design system: token extraction and generated themes provide a foundation for React controls, with Storybook for interactive exploration and documentation for design and accessibility guidance. The token package and several React controls are implemented, while other documented areas remain guidance or deferred scope. The README documents the token-to-components-to-Storybook flow; source excerpts are limited, so internal wiring beyond that documented flow is not inferred.
Main entry points: index.ts React exports · SelectionText.tsx Selection text · figma Figma snapshots · src Token sources
Components 22
Token foundation
- Figma snapshots
packages/tokens/figma - Token sources
packages/tokens/src - Token conversion
packages/tokens/scripts/build.mjs - Generated themes
packages/tokens/dist
React controls
- React exports
packages/react/src/index.ts - Button
packages/react/src/components/Button/Button.tsx - Input and fields
packages/react/src/components/Input/Input.tsx - Textarea
packages/react/src/components/Textarea/Textarea.tsx - Checkbox
packages/react/src/components/Checkbox/Checkbox.tsx - Radio
packages/react/src/components/Radio/Radio.tsx - Switch
packages/react/src/components/Switch/Switch.tsx - Selection text
packages/react/src/internal/SelectionText.tsx - Theme styles
packages/react/src/styles
Storybook exploration
- Component stories
apps/storybook/stories/components - Storybook app
apps/storybook
Design guidance
- Foundation guidance
docs/foundations - Component guidance
docs/components - Complex components
docs/complex-components - Patterns and templates
docs/patterns - Accessibility guidance
docs/accessibility
Other components
- Figma source
- Product developer
Connections 22
- Figma source → Figma snapshots: records decisions
- Figma snapshots → Token sources: normalizes tokens
- Token sources → Token conversion: converts tokens
- Token conversion → Generated themes: generates themes
- Generated themes → React exports: provides token types
- React exports → Button: exports
- React exports → Input and fields: exports
- React exports → Textarea: exports
- React exports → Checkbox: exports
- React exports → Radio: exports
- React exports → Switch: exports
- Checkbox → Selection text: renders
- Radio → Selection text: renders
- Switch → Selection text: renders
- Component stories → React exports: renders components
- Storybook app → Component stories: loads stories
- Product developer → Storybook app: explores controls
- Product developer → Foundation guidance: consults
- Product developer → Component guidance: consults
- Product developer → Complex components: consults
- Product developer → Patterns and templates: consults
- Product developer → Accessibility guidance: consults