Skills
.Work. You
Rest

figma-analyze

Community

Ensure Figma designs meet code standards.

Design & Creative#design system#figma#frontend development#token analysis#component validation#code parity
AuthorNehaTanti-afk
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill bridges the gap between design and development by analyzing Figma designs for code implementation readiness, ensuring consistency with established conventions and token usage.

Core Features & Use Cases

  • Design-Code Parity Check: Validates that Figma components align with Nexus design system conventions.
  • Token Consistency: Verifies the correct usage of semantic tokens and identifies deviations from the source of truth.
  • Component Analysis: Checks property names, values, layer naming, and state definitions for adherence to best practices.
  • Use Case: A developer receives a Figma URL for a new button component. They use this Skill to analyze it against the Nexus design system, ensuring all properties, tokens, and layer names are correctly implemented before starting development, preventing costly rework.

Quick Start

Analyze the Figma design at https://figma.com/design/abc123/MyComponent?node-id=123-456 for code implementation readiness.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-analyze
Download link: https://github.com/NehaTanti-afk/Neha-Notes/archive/main.zip#figma-analyze

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.