figma-to-page

Figma to Page

Implement the frontend page or component from $ARGUMENTS.

Core priorities

• Exact Figma visual and structural fidelity comes first.
• Prefer the structure explicitly present in Figma over generic frontend best practices.
• Pixel drift, copy drift, and unjustified structural simplification count as defects.
• Work section by section. Do not implement the whole page first and reconcile later.

Preconditions

• Figma MCP must be available. If get_design_context or get_screenshot are unavailable, stop and verify the connection before implementing.
• The target Figma URL or node must resolve to a concrete file key and node id.
• A local page, route, story, or test harness must exist so Playwright can verify the implementation.

Required workflow

0. Investigate the target project

Before writing any code:

1. Identify the framework and styling system in use.
2. Check for existing constants, utilities, and shared components that should be reused.
3. Check for framework-specific image components and use them instead of raw <img> tags when available.
4. Identify the existing page/route structure and follow the same patterns for file organization.
5. Extract repeated data (FAQ items, feature lists, navigation items) into constants files following the project's existing pattern.
6. Check for existing shared assets (store badges, social icons, common logos) that can be reused across pages.
7. Identify the project's font configuration and verify Figma fonts are available.

1. Identify the target node

• Extract the Figma file key and node id from the URL or provided node reference.
• Convert node-id=1-2 style URL parameters to 1:2 when a tool expects colon notation.
• For branch URLs, treat the branch key as the effective file key when required by the tooling.
• If the UI has variants or states, confirm that the selected variant or state matches the implementation target.

1b. Check for responsive variants

• Look for sibling frames named "Mobile", "SP", "Tablet" at the same level as the target node.
• If found, collect design context for both desktop and mobile frames.
• Implement responsive layouts using the project's breakpoint system.
• Do not ship a PC-only fixed-width implementation when a mobile frame exists in the Figma file.