figma-analyze-frame

# Analyze Figma Frame

## Name

hashi-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

1. **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

2. **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

3. **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.)

4. **Analyze Layout**:
   - Describe layout system (flexbox equivalent, grid, absolute)
   - Note responsive behavior (constraints, resizing rules)
   - Identify spacing patterns (padding, gaps, margins)
   - Check alignment and distribution

5. **Analyze Interactivity**:
   - Identify interactive elements (buttons, links, inputs)
   - Note any prototyping