figma-execute

Figma Execute — 基于 Plan 的设计实现

Overview

基于 figma-plan 阶段产出的 figma-context.md、截图和 plan 文件，实现 1:1 设计还原。本 skill 不依赖 Figma MCP——所有设计数据已在规划阶段沉淀到文件中。

Prerequisites

• figma-context.md 已存在（由 figma-plan 产出），包含完整的 Figma 设计数据
• 截图已保存在 attachments/ 目录
• Plan 文件已存在，包含组件映射和实现步骤
• Project should have an established design system or component library (preferred)

如何找到设计信息

需要什么	在哪里找
设计数值（layout、spacing、typography、color、token）	figma-context.md 的 ## Figma Design Context section
视觉参照	attachments/figma-screenshot.png
组件映射（Figma 节点 → 代码组件）	plan 文件的 Design Reference section
状态/交互逻辑	plan 文件的 Design Reference section
资产文件	attachments/ 目录
实现步骤和文件路径	plan 文件的方案 section

Required Workflow

Follow these steps in order. Do not skip steps.

Step 1: Read Design Data

1. 读取 figma-context.md 获取完整设计数据
2. 读取截图作为视觉参照
3. 读取 plan 文件获取组件映射和实现步骤

Step 2: Translate to Project Conventions

Translate the Figma output into this project's framework, styles, and conventions.

Key principles:

• Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style
• Replace Tailwind utility classes with the project's preferred utilities or design system tokens
• Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality
• Use the project's color system, typography scale, and spacing tokens consistently
• Respect existing routing, state management, and data-fetch patterns

Step 3: Achieve 1:1 Visual Parity

Strive for pixel-perfect visual parity with the Figma design.

Guidelines:

• Prioritize Figma fidelity to match designs exactly
• Avoid hardcoded values - use design tokens from Figma where available
• When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals
• Follow WCAG requirements for accessibility
• Add component documentation as needed

Step 4: Validate Against Figma

Before marking complete, use the Read tool to open the screenshot referenced in figma-context.md (the ![[attachments/figma-screenshot.png]] embed). Compare your implemented code against this visual reference to verify each item below.

Validation checklist:

• Layout matches (spacing, alignment, sizing)
• Typography matches (font, size, weight, line height)
• Colors match exactly
• Interactive states work as designed (hover, active, disabled)
• Responsive behavior follows Figma constraints
• Assets render correctly
• Accessibility standards met

Implementation Rules

Component Organization

• Place UI components in the project's designated design system directory
• Follow the project's component naming conventions
• Avoid inline styles unless truly necessary for dynamic values

Design System Integration

• ALWAYS use components from the project's design system when possible
• Map Figma design tokens to project design tokens
• When a matching component exists, extend it rather than creating a new one
• Document any new components added to the design system

Code Quality

• Avoid hardcoded values - extract to constants or design tokens
• Keep components composable and reusable
• Add TypeScript types for component props
• Include JSDoc comments for exported components

Best Practices

Always Start with Context

Never implement based on assumptions. Always read figma-context.md and the screenshot first.

Incremental Validation

Validate frequently during implementation, not just at the end. This catches issues early.

Document Deviations

If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.

Reuse Over Recreation

Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.

Design System First

When in doubt, prefer the project's design system patterns over literal Figma translation.

Examples

Example 1: Implementing a Button Component

Actions:

1. Read figma-context.md for button design data (colors, padding, border radius, typography)
2. Read screenshot for visual reference
3. Check if project has existing button component
4. If yes, extend it with new variant; if no, create new component using project conventions
5. Map Figma colors to project design tokens (e.g., primary-500, primary-hover)
6. Validate against screenshot for padding, border radius, typography

Result: Button component matching Figma design, integrated with project design system.

Example 2: Building a Dashboard Layout

Actions:

1. Read figma-context.md for full layout structure (sections, spacing, components)
2. Read screenshot for visual reference of the complete page
3. Build layout using project's layout primitives
4. Implement each section using existing components where possible
5. Use assets from attachments/ for logos, icons, charts
6. Validate responsive behavior against Figma constraints

Result: Complete dashboard matching Figma design with responsive layout.

Common Issues and Solutions

Issue: Design doesn't match after implementation

Cause: Visual discrepancies between the implemented code and the original Figma design. Solution: Compare side-by-side with the screenshot. Check spacing, colors, and typography values in figma-context.md.

Issue: Assets not loading

Cause: Assets were not properly downloaded during the plan phase. Solution: Check attachments/ directory for the required assets. If missing, the plan phase needs to be re-run.

Issue: Design token values differ from Figma

Cause: The project's design system tokens have different values than those specified in the Figma design. Solution: When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity.

Understanding Design Implementation

The Figma implementation workflow establishes a reliable process for translating designs to code:

For designers: Confidence that implementations will match their designs with pixel-perfect accuracy. For developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions. For teams: Consistent, high-quality implementations that maintain design system integrity.

By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.

Additional Resources

• Figma MCP Server Documentation
• Figma MCP Server Tools and Prompts
• Figma Variables and Design Tokens