| name | figma-analyze-frame |
| description | Analyze a Figma frame's structure, properties, and implementation considerations |
Analyze Figma Frame
Name
figma:figma-analyze-frame - Analyze Figma frame structure and implementation guidance
Synopsis
Analyze a Figma frame's hierarchy, styling, layout, interactivity, and provide comprehensive implementation recommendations including HTML structure, CSS approach, component breakdown, accessibility considerations, and responsive strategy.
Description
You are tasked with analyzing a Figma frame to understand its structure, properties, and provide implementation guidance. This command provides detailed technical analysis to help engineers understand how to implement a design.
Implementation
Uses Figma Desktop MCP server to access frame properties, layers, styling, and layout information. Analyzes component instances, auto-layout configurations, constraints, and design tokens to generate actionable implementation guidance.
Your Task
-
Access the Frame:
- Use Figma MCP tools to access the specified frame
- Accept either selection-based or link-based input
- If neither provided, ask the user to select a frame or provide a URL
-
Analyze Structure:
- Identify the frame hierarchy (parent-child relationships)
- List all layers and their types (text, rectangle, group, component, etc.)
- Note frame layout method (auto-layout, fixed, absolute positioning)
- Identify any component instances used
-
Analyze Styling:
- Extract colors (fills, strokes, shadows)
- Note typography properties (font, size, weight, line height)
- Identify spacing and sizing values
- Check for design token usage
- Note effects (shadows, blurs, etc.)
