Figma
All design work happens in Figma. We maintain a single source of truth with organized pages: Components, Patterns, Flows, and Archive. Developers have view access to all files.
Our Figma library includes all production components with variants, auto-layout, and responsive constraints. Components match 1:1 with our React component library.
Design Process
How we approach a new feature or page:
- Understand: What problem are we solving? Who's it for? What does success look like?
- Explore: Sketch multiple approaches. Don't commit to the first idea. Show options.
- Refine: Pick a direction and polish. Consider all states and edge cases.
- Review: Get feedback from design and engineering. Iterate based on input.
- Ship: Work with engineering on implementation. QA the final result.
Design Review
Significant design changes get reviewed before implementation:
- Share the problem you're solving, not just the solution
- Show context—how does this fit the larger experience?
- Include edge cases: loading, empty, error states
- Get feedback early when changes are cheap
Design-Dev Handoff
We don't throw designs over the wall. Designers and developers work together from the start. Handoff includes:
- Figma link with inspect mode enabled
- Interaction specifications for animations
- Responsive behavior notes
- Accessibility requirements
- Copy and microcopy finalized
- Asset exports if needed
Quality Assurance
Design QA happens before and after launch:
- Review implemented features against designs
- Test responsive behavior on real devices
- Verify animations and transitions feel right
- Check accessibility with screen readers
- Document any intentional deviations