figma-analyze-frame

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Analyze Figma Frame

分析Figma框架

Name

名称

figma:figma-analyze-frame - Analyze Figma frame structure and implementation guidance

figma:figma-analyze-frame - 分析Figma框架结构并提供实现指导

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.

分析Figma框架的层级结构、样式、布局、交互性，并提供全面的实现建议，包括HTML结构、CSS方案、组件拆分、无障碍设计考量以及响应式策略。

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.

你的任务是分析Figma框架，理解其结构、属性并提供实现指导。本命令提供详细的技术分析，帮助工程师了解如何实现设计稿。

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.

使用Figma Desktop MCP服务器访问框架属性、图层、样式和布局信息。分析组件实例、自动布局配置、约束条件和设计令牌，生成可执行的实现指导。

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.)
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
Analyze Interactivity:
- Identify interactive elements (buttons, links, inputs)
- Note any prototyping connections or interactions
- Check for states (hover, active, disabled, etc.)
- Identify any component variants for different states
Implementation Analysis:
- Recommend HTML structure and semantic elements
- Suggest CSS approach (flexbox, grid, custom properties)
- Identify component breakdown opportunities
- Note accessibility considerations
- Recommend responsive strategy

访问框架:
- 使用Figma MCP工具访问指定框架
- 支持基于选择或链接的输入方式
- 如果两者都未提供，请要求用户选择一个框架或提供URL
分析结构:
- 识别框架的层级结构（父子关系）
- 列出所有图层及其类型（文本、矩形、组、组件等）
- 记录框架的布局方式（自动布局、固定布局、绝对定位）
- 识别使用的所有组件实例
分析样式:
- 提取颜色（填充、描边、阴影）
- 记录排版属性（字体、字号、字重、行高）
- 识别间距和尺寸数值
- 检查设计令牌的使用情况
- 记录特效（阴影、模糊等）
分析布局:
- 描述布局系统（等效于flexbox、grid、绝对定位）
- 记录响应式行为（约束条件、调整规则）
- 识别间距模式（内边距、间隙、外边距）
- 检查对齐和分布方式
分析交互性:
- 识别交互元素（按钮、链接、输入框）
- 记录任何原型连接或交互效果
- 检查状态（悬停、激活、禁用等）
- 识别不同状态对应的组件变体
实现分析:
- 推荐HTML结构和语义化元素
- 建议CSS方案（flexbox、grid、自定义属性）
- 识别组件拆分的可能性
- 记录无障碍设计考量
- 推荐响应式策略

Report Format

报告格式

Provide a comprehensive analysis report:

markdown

undefined

提供全面的分析报告:

markdown

undefined

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)


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

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)

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

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

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)

Card shadow: 0px 4px 6px rgba(0, 0, 0, 0.1)
Button hover: 0px 2px 4px rgba(0, 0, 0, 0.2)

Components Used

Button (4 instances)
- Variant: Primary (2), Secondary (2)
- Size: Medium
- Figma: [component URL]
FeatureCard (6 instances)
- No variants
- Figma: [component URL]
NavItem (4 instances)
- State: Default (3), Active (1)
- Figma: [component URL]

Button (4 instances)
- Variant: Primary (2), Secondary (2)
- Size: Medium
- Figma: [component URL]
FeatureCard (6 instances)
- No variants
- Figma: [component URL]
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

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

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

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>

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>

ARIA Requirements

Navigation landmarks
Heading hierarchy (h1 → h2 → h3)
Button labels and roles
Image alt text
Focus indicators

Navigation landmarks
Heading hierarchy (h1 → h2 → h3)
Button labels and roles
Image alt text
Focus indicators

Keyboard Navigation

All interactive elements reachable via Tab
Skip-to-content link
Logical tab order
Focus visible styles

All interactive elements reachable via Tab
Skip-to-content link
Logical tab order
Focus visible styles

Implementation Recommendations

Component Breakdown

Suggest creating these components:

```
Header
```
- Top navigation bar
```
Hero
```
- Hero section with title and CTA
```
FeatureGrid
```
- Grid of feature cards
```
FeatureCard
```
- Individual feature card
```
Footer
```
- Footer section

Suggest creating these components:

```
Header
```
- Top navigation bar
```
Hero
```
- Hero section with title and CTA
```
FeatureGrid
```
- Grid of feature cards
```
FeatureCard
```
- Individual feature card
```
Footer
```
- Footer section

CSS Approach

css

/* 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);
}

css

/* 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);
}

Responsive Strategy

Mobile-first approach
CSS Grid with auto-fit for feature cards
Flexbox for header navigation
Media queries at 768px and 1200px
Fluid typography (clamp for heading sizes)

Mobile-first approach
CSS Grid with auto-fit for feature cards
Flexbox for header navigation
Media queries at 768px and 1200px
Fluid typography (clamp for heading sizes)

Design Tokens

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

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

Potential Issues

Performance: 6 feature cards with images - consider lazy loading
Accessibility: Ensure sufficient color contrast (verify WCAG AA)
Responsive: Navigation may need hamburger menu on mobile
Content: Text lengths vary - ensure layout handles overflow

Performance: 6 feature cards with images - consider lazy loading
Accessibility: Ensure sufficient color contrast (verify WCAG AA)
Responsive: Navigation may need hamburger menu on mobile
Content: Text lengths vary - ensure layout handles overflow

Next Steps

Generate component code (use
```
/figma:generate-component
```
)
Extract design tokens (use
```
/figma:extract-tokens
```
)
Create responsive breakpoint tests
Implement accessibility features
Add loading states and error handling

undefined

Generate component code (use
```
/figma:generate-component
```
)
Extract design tokens (use
```
/figma:extract-tokens
```
)
Create responsive breakpoint tests
Implement accessibility features
Add loading states and error handling

undefined

Best Practices

Be Thorough: Analyze every aspect of the frame
Be Specific: Include exact values, not approximations
Be Actionable: Provide concrete implementation guidance
Be Accessible: Always consider accessibility from the start
Be Responsive: Think mobile-first and adaptive layouts

Be Thorough: Analyze every aspect of the frame
Be Specific: Include exact values, not approximations
Be Actionable: Provide concrete implementation guidance
Be Accessible: Always consider accessibility from the start
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

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

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