jhonatan-oliveiradev Translating Figma to Next.js
Workflow
- Read the Figma hierarchy before coding: frames, auto-layout behavior, constraints, variants, variables, typography, grids, and component instances.
- Map design primitives to existing code primitives before inventing new ones.
- Infer responsive intent from constraints and neighboring frames; do not encode one screenshot as absolute pixels everywhere.
- Use Next.js image/font facilities when they fit the repository.
- Keep decorative layers separate from semantic content so responsiveness does not depend on fragile DOM ordering.
- Implement reusable variants only where Figma shows a real component family or the product reuses the pattern.
- Render and compare against Figma at the target frame dimensions.
Fidelity priorities
- geometry;
- typography;
- image crop;
- color and surface treatment;
- interaction and motion.
Guardrails
- Existing app architecture wins over generated Figma structure.
- Avoid exporting raw Figma CSS as production architecture.
- Avoid unnecessary absolute positioning.
- Preserve accessible names when splitting or animating text.
- If an icon or asset is missing, source a legitimate equivalent rather than redrawing a brand mark inaccurately.