Flutter Figma Workflow
Treat Figma as design evidence, not generated code. Inspect the target node and the Flutter project before implementation. If Figma access is unavailable, ask for exported screens/specs or work from supplied artifacts and state the limitation; never claim to have inspected a file you could not access.
Workflow
- Resolve the exact frame, variants, breakpoints, states, and platform targets.
- Extract reusable tokens, components, assets, typography, constraints, and interactions.
- Map them to the existing Flutter theme and components before creating new primitives.
- Implement semantic, constraint-driven Flutter structure; do not mirror every Figma layer or paste CSS coordinates.
- Render deterministic fixtures at the reference viewport and relevant responsive sizes.
- Compare screenshots, correct the largest hierarchy and geometry differences, then verify accessibility and interaction states.
Load design extraction and mapping for Dev Mode, tokens, assets, or Code Connect. Load Flutter implementation and parity for layout translation and visual verification.
Boundaries
- Use
flutter-ui-design when the source is incomplete or the task requires new visual direction.
- Use
flutter-ui-patterns for component structure without a Figma source.
- Add
flutter-responsive-layout, flutter-animation, or flutter-accessibility only when those concerns are explicit.
- Preserve the repository's packages, fonts, icons, theme, and state management unless the design or task proves a change is needed.
Sources
1---2name: flutter-figma-workflow3description: Translate an explicit Figma file, frame, component, or node into production Flutter while preserving the app's design system and verifying rendered parity. Use when the request provides or names a Figma source; use flutter-ui-design instead for art direction without Figma.4---56# Flutter Figma Workflow78Treat Figma as design evidence, not generated code. Inspect the target node and the Flutter project before implementation. If Figma access is unavailable, ask for exported screens/specs or work from supplied artifacts and state the limitation; never claim to have inspected a file you could not access.910## Workflow11121. Resolve the exact frame, variants, breakpoints, states, and platform targets.132. Extract reusable tokens, components, assets, typography, constraints, and interactions.143. Map them to the existing Flutter theme and components before creating new primitives.154. Implement semantic, constraint-driven Flutter structure; do not mirror every Figma layer or paste CSS coordinates.165. Render deterministic fixtures at the reference viewport and relevant responsive sizes.176. Compare screenshots, correct the largest hierarchy and geometry differences, then verify accessibility and interaction states.1819Load [design extraction and mapping](references/design-extraction-and-mapping.md) for Dev Mode, tokens, assets, or Code Connect. Load [Flutter implementation and parity](references/flutter-implementation-and-parity.md) for layout translation and visual verification.2021## Boundaries2223- Use `flutter-ui-design` when the source is incomplete or the task requires new visual direction.24- Use `flutter-ui-patterns` for component structure without a Figma source.25- Add `flutter-responsive-layout`, `flutter-animation`, or `flutter-accessibility` only when those concerns are explicit.26- Preserve the repository's packages, fonts, icons, theme, and state management unless the design or task proves a change is needed.2728## Sources2930- [Figma Dev Mode](https://developers.figma.com/docs/plugins/working-in-dev-mode/)31- [Figma Code Connect](https://developers.figma.com/docs/code-connect/)32- [Flutter adaptive and responsive design](https://docs.flutter.dev/ui/adaptive-responsive)
thiennc-tesoglobal