Can I extract specific components instead of whole files?

Yes, by providing a specific node-id from the Figma URL, the skill extracts precise layout and style data for individual components or sections.

What happens if a design element isn't in Figma?

The skill follows a 'No Figma = No Component' principle, prompting you to verify designs or document discrepancies before proceeding with implementation.

How do I authenticate with Figma for this skill?

You must have the Figma CLI installed. Use the 'figma auth --show' command within the tool to verify your credentials before running extraction tasks.

What formats does the data extraction support?

The skill primarily fetches layout data in YAML format for easy parsing and human readability, but can also handle JSON via the Figma CLI.

Does this skill help with color management?

Yes, it includes rules to audit your codebase for framework-default colors (like Expo or Tailwind defaults) and ensures only Figma-defined constants are used.

Figma Design & Fidelity Sync

Name: Figma Design & Fidelity Sync
Author: kazuph

bykazuph

•

Design Tools

Streamlines UI development by ingesting Figma design specs and enforcing strict visual fidelity via CLI automation.

This skill integrates the Figma CLI directly into the Claude Code workflow, allowing developers to extract layout data, text assets, and color schemes directly from Figma URLs. It facilitates a 'design-first' implementation process by automating the conversion of Figma nodes into actionable YAML/JSON specifications. Beyond data extraction, it enforces strict fidelity rules—ensuring every component has a Figma reference, preventing the use of non-compliant framework colors, and mandating Storybook documentation for visual verification.