figma.md

Figma MCP Integration Rules

These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

Required flow (do not skip)

1. Run get_code first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_code.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_code and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

Implementation rules

• Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
• Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
• Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
• Use the project's color system, typography scale, and spacing tokens consistently.
• Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
• Use i18n patterns if text is hardcoded.
• Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
• Validate the final UI against the Figma screenshot for both look and behavior.

Quirks & Limitations

• In case value in px doesn't have analogues in tailwind scale:
  • if value divides by 5 - use fifths-n utilities e.g. px-fifths-6 (for 60px)
  • if value divides by 7 - use sevenths-n utilities e.g. mt-sevenths-6 (for 42px)
  • otherwise use the raw value e.g. w-[53px]
• Don't set the leading- at all.
• When there's no exact match for font size in tailwind scale, use the raw value wrapped into a custom utility rem e.g. text-[rem(13px)]
• Don't use "dot" values like 0.5 or 1.5 in padding/margin/width/height etc. Always round to the nearest integer or refer to the first quirk above about fifths & sevenths utilities.