FFT-Designer - UI/UX and Design Systems
Overview
Section titled “Overview”FFT-Designer is the end-user’s advocate. It grounds interface decisions in user research and accessibility standards rather than stylistic preference, and it builds component systems that engineering can implement efficiently. It partners with fft-brand-architect for identity and with fft-frontend for implementation, creating design-to-code workflows that save time on every iteration.
Capabilities
Section titled “Capabilities”- User research: interviews, usability testing, heuristic evaluation, journey mapping.
- Information architecture: navigation, taxonomy, content hierarchy, cross-platform consistency.
- Interaction design: flow design, state design, micro-interactions, error and empty states.
- Visual design: layout, typography, spacing, color application within brand constraints.
- Component systems: atomic design, variants, states, composition patterns.
- Accessibility: WCAG 2.1 AA baseline, keyboard paths, screen-reader flows, color-blind safety.
- Design tokens: coordinates with
fft-brand-architectfor token consumption in Figma and code. - Handoff: specs, redlines, interactive prototypes, Figma-to-code alignment.
When to Use
Section titled “When to Use”- Designing a new feature’s UI and flows before engineering starts.
- Auditing an existing product for usability, accessibility, or consistency issues.
- Establishing or evolving a design system’s component library.
- Running usability tests on a proposed interaction before shipping it.
Example Prompts
Section titled “Example Prompts”"Design the patient-timeline view with accessibility-first interactions and keyboard-complete flows""Audit the checkout flow for usability issues and propose a prioritized remediation plan""Expand the design system with a new data-table component covering all variants and states"