Convert a Figma frame URL or nodeId into a single JSON blob of variables, regions, and states.
npx skills add https://github.com/aziontech/webkit --skill figma-discover
Please help me install this Agent Skill. Skill: figma-discover Source: https://github.com/aziontech/webkit/tree/main/.claude/skills/figma-discover Command: npx skills add https://github.com/aziontech/webkit --skill figma-discover
It turns a Figma frame into a structured, token-ready JSON payload so downstream pipelines can generate consistent design system outputs without manually interpreting the frame.
Use the figma-discover skill by providing a Figma frame URL (or nodeId) to produce a single JSON blob containing variables, regions, and states.
High-intent search queries and answers about installing and using this skill.
Extracting design tokens from a Figma frame requires passing a frame URL or nodeId to read its named variables and resolved values. The process outputs a single JSON blob containing component regions and interactive states for immediate pipeline consumption.
Figma component discovery captures named variables with resolved values, component anatomy regions like header or footer, and interactive states including default, hover, active, focus, and disabled. This data is normalized into a single structured JSON payload.
Yes, extracting component states uses read-only Figma MCP calls to query the frame. It normalizes the reported design inputs into a JSON blob without generating prose or causing side effects, ensuring the original Figma file remains unmodified.
Yes, the JSON output includes component anatomy and behavior by capturing structural regions and interactive states. It extracts these design inputs exactly as Figma reports them during the component discovery and spec creation workflows.
Automating design token generation from Figma is best achieved by converting frame URLs into token-ready JSON payloads. This approach emits standardized JSON output to stdout, allowing the next pipeline step to map tokens without manually interpreting the frame.
The Figma discovery output emits only JSON and no prose to ensure token-generation pipelines receive clean, structured data. This prevents parsing errors and allows downstream automation to consume the single JSON blob directly from stdout.
sumik5Translate Figma designs into code with token-based styling and component reuse.
bacchus-labsDetect design token drift between Figma and code implementations.
dmlguq456Define and validate reusable design tokens for colors, typography, and spacing.
AradotsoSynchronize Figma design tokens and components with code-ready formats.
