skills.rest
coinbase
coinbaseOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma.audit-connect

Audit Figma Code Connect mapping files for accuracy and completeness.

493|101|Updated Nov 8, 2024
Search Tags:#react#audit#figma#component#mapping#code connect
One-click install
npx skills add https://github.com/coinbase/cds --skill figma-audit-connect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma.audit-connect
Source: https://github.com/coinbase/cds/tree/main/.claude/skills/figma.audit-connect
Command: npx skills add https://github.com/coinbase/cds --skill figma-audit-connect

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that Figma Code Connect mappings accurately reflect the component's properties and variants, preventing inconsistencies between design and code.

Core Features & Use Cases

  • Accuracy Check: Verifies that Figma properties are correctly mapped to React component props.
  • Completeness Analysis: Identifies unmapped Figma properties and missing component variants.
  • Use Case: A developer can use this Skill to audit a new component's Code Connect file before merging, ensuring all design tokens and variants are correctly implemented in code.

Quick Start

Use the figma.audit-connect skill to audit the mapping file for the Button component.

Frequently Asked Questions about figma.audit-connect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit Figma Code Connect mappings for React components?▼

To audit Figma Code Connect mappings, analyze the mapping files against component source code and Figma metadata to verify property mappings, variant coverage, and type correctness. This ensures Figma properties accurately map to React props.

Why does my Figma Code Connect mapping have unmapped properties and missing variants?▼

Unmapped Figma properties and missing component variants occur when mapping files are incomplete. A completeness analysis identifies these gaps by comparing Figma metadata directly against the React component source code.

What do I need to check Figma Code Connect mapping accuracy?▼

To check Figma Code Connect mapping accuracy, you need local file system access to read component source code and Figma MCP API calls to retrieve design metadata and context for comparing property and variant definitions.

When should I verify Figma Code Connect mappings before merging?▼

You should verify Figma Code Connect mappings before merging a new React component to ensure all design tokens and variants are correctly implemented in code, preventing inconsistencies between design and code.

Can I use a Figma MCP API to verify Code Connect type correctness?▼

Yes, you can use Figma MCP API calls for `get_metadata` and `get_design_context` to verify Code Connect type correctness by analyzing property mappings and variant coverage against the local component source code.

Related Skills

Explore More Design & Creative Skills→
coinbasecoinbase
493

figma.create-connect

Generate Figma Code Connect mapping files for React components.

Official
Intermediate
CharitablebusinessroninCharitablebusinessronin

figma-code-connect

Maps Figma components to Code Connect templates via .figma.ts generation.

Community
Advanced
taewook486taewook486

moai-design-tools

Fetch Figma design context and export Pencil designs into React and Tailwind CSS code.

Community
Advanced
hulusi-tunchulusi-tunc
3

figma-code-connect

Generates Code Connect templates from Figma components for React/TypeScript projects.

Community
Advanced