4 min leitura • Guide 390 of 877
How to Integrate Design Systems with Development Workflow?
How to integrate design systems with development workflow?
Integrate design systems by creating a dedicated design system project, tracking component development through design-dev stages, documenting components in NoteVault, and using labels to link feature work to design system components. Coordinate releases between design system updates and consuming applications to prevent breaking changes.
Design system board columns
| Column | Purpose |
|---|---|
| Backlog | Requested components |
| Design | Figma/design specs |
| Development | React/Vue implementation |
| Documentation | Storybook, usage docs |
| Review | Design + code review |
| Testing | Visual regression |
| Released | Published version |
Design system labels
| Label | Purpose |
|---|---|
| component:button | Button component |
| component:modal | Modal component |
| component:form | Form components |
| type:new-component | Brand new component |
| type:enhancement | Existing component update |
| type:bug | Component bug fix |
| breaking-change | Requires consumer updates |
| documentation | Docs-only change |
Component task template
## Component: [Name]
### Design Spec
- Figma: [link]
- Designer: @designer
### Variants
- [ ] Default
- [ ] Primary
- [ ] Secondary
- [ ] Disabled
- [ ] Loading
### States
- [ ] Hover
- [ ] Focus
- [ ] Active
- [ ] Error
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | string | 'default' | Visual variant |
| disabled | boolean | false | Disabled state |
| onClick | function | - | Click handler |
### Accessibility
- [ ] Keyboard navigation
- [ ] Screen reader labels
- [ ] Focus management
### Testing
- [ ] Unit tests
- [ ] Visual regression tests
- [ ] A11y tests
### Documentation
- [ ] Storybook stories
- [ ] Usage examples
- [ ] Props documentation
Design system workflow:
- Request component - Feature team identifies need
- Design spec - Designer creates Figma spec
- Design review - Approve design before dev
- Development - Build component
- Code review - Standard PR review
- Documentation - Storybook stories
- Visual testing - Regression tests
- Release - Semantic version bump
- Announce - Notify consuming teams
NoteVault design system documentation
# Design System
## Component Inventory
| Component | Status | Version | Owner |
|-----------|--------|---------|-------|
| Button | Stable | 2.1.0 | @dev-a |
| Modal | Stable | 1.4.0 | @dev-b |
| DataTable | Beta | 0.9.0 | @dev-c |
| DatePicker | In Dev | - | @dev-a |
## Design Tokens
- Colors: [link to tokens]
- Typography: [link to tokens]
- Spacing: [link to tokens]
## Migration Guides
- v1 to v2: [link]
- Button API changes: [link]
## Release Process
1. Bump version following semver
2. Update changelog
3. Run visual regression
4. Publish to npm
5. Announce in #design-system
Coordinating with feature teams
| Scenario | Process |
|---|---|
| New component needed | Create request in DS project |
| Feature blocked on DS | Label: blocked:design-system |
| Breaking change coming | Notify 2 weeks before release |
| Legacy migration | Create migration tasks |