figma-to-code

# Figma to Code - Production-Ready Component Generator ## 🎯 Purpose Extract **complete, lossless** design information from Figma and generate production-ready React/Next.js components with TypeScript and Tailwind CSS. --- ## 🚨 CRITICAL RULES - Read First! ### **Rule 1: NEVER Truncate Code** Use **100% of Figma MCP output**. Every className, every property matters. ```tsx // ✅ CORRECT: Keep ALL className from Figma MCP <div className="absolute font-source-serif h-[108px] leading-[1.8] left-[100px] not-italic text-[20px] text-[rgba(29,38,45,0.8)] text-justify top-[210px] w-[1096px] whitespace-pre-wrap"> // ❌ WRONG: Removing any className <div className="absolute left-[100px] top-[210px] font-source-serif text-[20px]"> ``` ### **Rule 2: Flatten `absolute contents` Structures** **🔥 CRITICAL: Figma MCP returns nested `absolute contents` containers. `display: contents` makes the parent "disappear" - children are positioned relative to the nearest positioned ancestor (root)!** **Key Insight: Children's positions are ALREADY absolute - DO NOT add parent's top/left!** ```tsx // ❌ WRONG: Figma MCP output (has redundant parent wrapper) <div className="absolute contents left-0 top-[41px]"> <p className="absolute left-[100px] top-[41px]">TITLE</p> <div className="absolute left-0 top-[100px]">Line</div> </div> // ✅ CORRECT: Just remove the parent wrapper, keep children's positions AS-IS <> <p className="absolute left-[100px] top-[41px]">TITLE</p> <div className="abs...