Figma MCP Frontend
Use when work references a Figma file/frame, design system, component library,
tokens, or visual implementation from design.
Before Code
- Read repo UI rules, existing components, tokens, and route/page patterns.
- Verify Figma MCP tools are available.
- Pull design context for the selected frame or file.
- Extract:
- design tokens: color, type, spacing, radius, shadows
- components and variants
- molecular component composition
- layout constraints and responsive rules
- states: hover, focus, disabled, loading, empty, error
- Map Figma components to existing code components before creating new ones.
If Figma MCP is unavailable or rate-limited, use project-local design exports
and screenshots before guessing. Common fallback locations: checked-in design
docs, docs/design/, templates/design-system/, and user-provided PNG exports.
Report the gap clearly.
Implement
- Reuse existing design system first.
- Create new components only when no matching local component exists.
- Do not invent visual rules that conflict with Figma, local tokens, or shared
components.
- Preserve accessibility basics: labels, focus, contrast, keyboard flow.
- Validate visually with screenshot or browser check when UI changed.
Report
List Figma source, mapped components, changed files, validation, and visual risks.
1---2name: figma-mcp-frontend3description: Use Figma MCP design context to implement frontend screens, design systems, components, and styles.4---56# Figma MCP Frontend78Use when work references a Figma file/frame, design system, component library,9tokens, or visual implementation from design.1011## Before Code12131. Read repo UI rules, existing components, tokens, and route/page patterns.142. Verify Figma MCP tools are available.153. Pull design context for the selected frame or file.164. Extract:17 - design tokens: color, type, spacing, radius, shadows18 - components and variants19 - molecular component composition20 - layout constraints and responsive rules21 - states: hover, focus, disabled, loading, empty, error225. Map Figma components to existing code components before creating new ones.2324If Figma MCP is unavailable or rate-limited, use project-local design exports25and screenshots before guessing. Common fallback locations: checked-in design26docs, `docs/design/`, `templates/design-system/`, and user-provided PNG exports.27Report the gap clearly.2829## Implement3031- Reuse existing design system first.32- Create new components only when no matching local component exists.33- Do not invent visual rules that conflict with Figma, local tokens, or shared34 components.35- Preserve accessibility basics: labels, focus, contrast, keyboard flow.36- Validate visually with screenshot or browser check when UI changed.3738## Report3940List Figma source, mapped components, changed files, validation, and visual risks.
me-cedric