npx claudepluginhub thebushidocollective/han --plugin figmaThis skill uses the workspace's default tool permissions.
figma:figma-analyze-frame - Analyze Figma frame structure and implementation guidance
Analyzes a single Figma frame from local image.png, structure.xml, and context.md files. Assesses layout, UI elements, interactions, data display, and scope. Outputs analysis.md.
Analyzes Figma files to extract design data, export assets as PNG/SVG/PDF/WEBP, audit accessibility compliance, analyze design systems, and generate documentation.
Analyzes Figma designs via MCP server to generate PRDs with design tokens, typography, spacing, components, and pixel-perfect visual specs. Use for Figma links or screenshots.
Share bugs, ideas, or general feedback.
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