This guide shows exactly how to turn Figma designs into fully functional Lovable apps with true 1:1 fidelity. The Goal For every Figma screen, you will: Recreate the screen in Lovable with pixel-perfect accuracy Map every interactive element Wire real navigation and logic Micro-edit until it matches Figma exactly Lock components Move screen-by-screen until the app is complete High-Level Workflow Upload a Figma screen Tell Lovable to copy the layout exactly Map all buttons, inputs, cards, and actions Fix spacing, typography, and hover states QA with pixel comparison Lock components Move to the next screen Repeat. Naming & Prep Conventions (DO THIS FIRST) Consistent naming makes Lovable dramatically better. Screen Files Screen_<Feature>_<Variant>.png Examples: Screen_Home_Default.png Screen_Profile_LoggedIn.png Components CPT_Button/Primary CPT_Card/Product/Compact Actions ACT_Navigate_Profile ACT_Submit_Login Figma Export Settings Export screens at 2x or 3x PNG Export icons/logos as SVG Export component states separately: hover active disabled Core Workflow (Repeat for Every Screen) Step 1 — Upload the Screen to Lovable Upload the screen image using the naming convention Upload any SVGs or assets used on that screen Step 2 — Recreate the Exact Layout (Base Prompt) Paste this as one instruction: Base Prompt Create a pixel-perfect replica of the uploaded screen Screen_Home_Default.png. Recreate layout, spacing, fonts, colors, and element sizes exactly. Use semantic components and Tailwind-style layout classes (flex, grid, gap-4, justify-between). Desktop is the source breakpoint; scale cleanly to tablet and mobile. Export components as reusable library items named CPT_*. Step 3 — Map Every Interactive Element (Action Map) Immediately follow with an explicit interaction list. Example: BTN_ProfileTopRight → onClick: navigate to Screen_Profile_LoggedIn.png CARD_Product_1 → onClick: navigate to Screen_Product_Details.png Pass productId=123 INPUT_Search → onInput: