Figma Design Analyzer

概要

Systematically analyze Figma designs to extract structured specifications that serve as a blueprint for implementation. This skill extracts precise design properties like layout, spacing, and typography, classifies components using Atomic Design principles, and generates comprehensive specification documents. It's ideal for developers needing to translate a Figma design into code, audit existing components against a design, or deconstruct complex pages into a structured component hierarchy.

主な機能

• Generates comprehensive, implementation-ready design specification documents in Markdown.
• 2 GitHub stars
• Extracts detailed design properties (layout, spacing, typography, colors) from Figma nodes.
• Analyzes responsive designs across different breakpoints.
• Classifies components using Atomic Design principles (Atoms, Molecules, Organisms).
• Compares existing code implementations with Figma designs to identify discrepancies.

ユースケース

• Converting a Figma design into a detailed specification for a developer to implement.
• Auditing an existing frontend component against its original Figma design for inconsistencies.
• Deconstructing a full-page design into a hierarchical component tree with individual specifications.