Analyze a Figma frame's structure, properties, and implementation considerations
Analyzes a Figma frame's structure, styling, and layout to provide comprehensive implementation guidance.
/plugin marketplace add TheBushidoCollective/han/plugin install hashi-github@hanhashi-figma:figma-analyze-frame - Analyze Figma frame structure and implementation guidance
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.
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.
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.
Access the Frame:
Analyze Structure:
Analyze Styling:
Analyze Layout:
Analyze Interactivity:
Implementation Analysis:
Provide a comprehensive analysis report:
# Figma Frame Analysis
Frame: [Frame name]
File: [Figma file name]
URL: [Figma URL]
Analyzed: [date]
## Overview
Brief description of the frame's purpose and content.
## Structure
### Hierarchy
Frame: [name] (Auto-layout, Vertical) ├─ Header (Auto-layout, Horizontal) │ ├─ Logo (Component Instance) │ └─ Navigation (Auto-layout, Horizontal) │ ├─ NavItem (Component Instance) x4 │ └─ Button (Component Instance) ├─ MainContent (Auto-layout, Vertical) │ ├─ Hero (Frame) │ │ ├─ Title (Text) │ │ └─ Subtitle (Text) │ └─ Features (Auto-layout, Horizontal, wrap) │ └─ FeatureCard (Component Instance) x6 └─ Footer (Auto-layout, Horizontal)
### Layout System
- **Type**: Auto-layout (Flexbox equivalent)
- **Direction**: Vertical
- **Spacing**: 24px gap between sections
- **Padding**: 64px horizontal, 32px vertical
- **Alignment**: Center-aligned content
## Styling
### Colors
- Background: #FFFFFF (--color-background)
- Primary: #3B82F6 (--color-primary)
- Text: #111827 (--color-text)
- Border: #E5E7EB (--color-border)
### Typography
- Heading: Inter 32px/40px, weight 700
- Body: Inter 16px/24px, weight 400
- Caption: Inter 14px/20px, weight 500
### Spacing
- Section gap: 24px
- Card gap: 16px
- Button padding: 12px 24px
### Effects
- Card shadow: 0px 4px 6px rgba(0, 0, 0, 0.1)
- Button hover: 0px 2px 4px rgba(0, 0, 0, 0.2)
## Components Used
1. **Button** (4 instances)
- Variant: Primary (2), Secondary (2)
- Size: Medium
- Figma: [component URL]
2. **FeatureCard** (6 instances)
- No variants
- Figma: [component URL]
3. **NavItem** (4 instances)
- State: Default (3), Active (1)
- Figma: [component URL]
## Responsive Behavior
### Constraints
- Header: Fixed to top, stretches horizontally
- MainContent: Center-aligned, max-width 1200px
- Footer: Fixed to bottom, stretches horizontally
### Breakpoints Needed
- Desktop (1200px+): 6 feature cards in 3 columns
- Tablet (768px-1199px): 4 cards in 2 columns
- Mobile (<768px): Stack cards in 1 column
### Resizing Rules
- Text: Fixed size, wraps at small widths
- Images: Scale proportionally
- Containers: Flexible width with max-width
## Accessibility Considerations
### Semantic HTML
```html
<header>
<nav>
<a href="/" aria-label="Home">
<img src="logo.svg" alt="Company Name" />
</a>
<ul role="list">
<li><a href="/about">About</a></li>
<!-- ... -->
</ul>
</nav>
</header>
<main>
<section aria-labelledby="hero-title">
<h1 id="hero-title">...</h1>
</section>
<section aria-labelledby="features-title">
<h2 id="features-title">Features</h2>
<div role="list">
<!-- Feature cards -->
</div>
</section>
</main>
<footer>
<!-- Footer content -->
</footer>
Suggest creating these components:
Header - Top navigation barHero - Hero section with title and CTAFeatureGrid - Grid of feature cardsFeatureCard - Individual feature cardFooter - Footer section/* Use CSS Grid for feature layout */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
}
/* Use Flexbox for header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md) var(--spacing-xl);
}
Reference these tokens (create if they don't exist):
--color-primary, --color-text, --color-background--spacing-sm, --spacing-md, --spacing-lg, --spacing-xl--font-family-base, --font-size-body, --line-height-body--shadow-sm, --shadow-md/figma:generate-component)/figma:extract-tokens)
## Best Practices
1. **Be Thorough**: Analyze every aspect of the frame
2. **Be Specific**: Include exact values, not approximations
3. **Be Actionable**: Provide concrete implementation guidance
4. **Be Accessible**: Always consider accessibility from the start
5. **Be Responsive**: Think mobile-first and adaptive layouts
## Additional Analysis
If the user requests, also analyze:
- **Performance**: Large images, heavy animations, rendering complexity
- **Browser Support**: CSS features used, fallbacks needed
- **Internationalization**: Text direction, character sets, dynamic content
- **Dark Mode**: Color tokens, theme switching, contrast
- **Print Styles**: If the design should be printable
## Notes
- If the frame is very complex, offer to analyze sections separately
- Suggest improvements to the Figma design if appropriate
- Note any Figma-specific features that don't translate to code
- Recommend collaboration points between design and engineering