figma-handoff-extractor

Extract structured requirements, policies, and case matrices from Figma files into Markdown.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/herren-official/product-agents --skill figma-handoff-extractor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-handoff-extractor
Source: https://github.com/herren-official/product-agents/tree/main/skills/b2c-backend/figma-handoff-extractor
Command: npx skills add https://github.com/herren-official/product-agents --skill figma-handoff-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Extract structured development requirements, policies, case states, and API/domain estimates from a Figma hand-off file to speed up engineering documentation.

Core Features & Use Cases

  • Convert current/previous project content (distinguished by opacity) into a clean hand-off document containing per-screen requirements, policy tables, and a case/state matrix.
  • Extract Bucket A policies verbatim and Bucket B case labels to build a complete, actionable spec; include Bucket C sample data only for UI context.
  • Output a single Markdown hand-off with sections for API/domain estimates, design notes, and a questions list for gaps.

Quick Start

Provide a Figma file URL or file key (and a Personal Access Token if required), then trigger the figma-handoff-extractor to generate the hand-off specification.

Frequently Asked Questions about figma-handoff-extractor

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

FAQPage Schema
How do I extract engineering requirements from a Figma hand-off file?

To extract engineering requirements from a Figma hand-off, provide the file URL or key to generate a Markdown document structured with policies, case states, and API estimates. The process distinguishes active content from dimmed previous project work using opacity indicators.

What is the best way to convert Figma designs into development specs and policy tables?

Converting Figma designs into development specs requires categorizing content into three buckets: extracting policies verbatim, identifying case labels, and pulling sample data for UI context. This yields a single Markdown hand-off with design notes and a questions list.

Do I need a Personal Access Token to extract requirements from a Figma URL?

You may need a Personal Access Token to extract requirements from a Figma URL, depending on the file's access permissions. Providing the token alongside the file key or URL ensures the extraction can access the design data to generate the hand-off specification.

How does the Figma hand-off extractor handle mixed current and previous project work?

The Figma hand-off extractor handles mixed project work by applying opacity rules to identify active sections versus dimmed previous work. It filters out the dimmed content to ensure only current project requirements and case labels populate the final Markdown specification.

Can I generate API and domain estimates directly from a Figma file?

You can generate API and domain estimates directly from a Figma file by processing the hand-off content through the extractor. It analyzes the design structure to output a dedicated Markdown section for API and domain estimates alongside the main requirements.