figma-to-spec

Convert Figma design URLs into structured feature specifications.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/kirvin/agent-dev-harness --skill figma-to-spec
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-to-spec
Source: https://github.com/kirvin/agent-dev-harness/tree/main/plugins/kf/skills/figma-to-spec
Command: npx skills add https://github.com/kirvin/agent-dev-harness --skill figma-to-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill bridges the gap between Figma design and code, automating the creation of feature specifications, reducing design handoff bottlenecks.

Core Features & Use Cases

  • Figma to Spec Conversion: Automatically transforms Figma URLs into detailed feature specifications.
  • Spec Generation: Outputs user stories, acceptance criteria, and implementation notes for developers.
  • Use Case: Before beginning frontend development, activate this Skill with a Figma URL to get a comprehensive spec to guide the implementation process.

Quick Start

Activate the figma-to-spec skill with a Figma design URL: 'activate figma-to-spec <figma-url>'

Frequently Asked Questions about figma-to-spec

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

FAQPage Schema
How do I convert a Figma design into a feature specification for development?

To convert a Figma design to a feature specification, you can use a spec-first approach that automatically transforms Figma URLs into structured user stories, acceptance criteria, and implementation notes for developers.

What is a spec-first approach to processing Figma designs?

A spec-first approach for Figma designs prioritizes generating detailed feature specifications before coding. It extracts navigation, user flows, states, and data from the design URL to guide the frontend implementation process.

Can I generate user stories and acceptance criteria directly from a Figma URL?

Yes, you can generate user stories and acceptance criteria directly from a Figma URL. The conversion process analyzes the design link and outputs structured feature specifications intended to reduce design handoff bottlenecks.

Do I need browser access to create feature specs from Figma designs?

Browser access is not strictly required to create feature specs from Figma designs. If direct URL access is unavailable, you can provide screenshots or text descriptions as input to generate the specification.

What is the best way to automate design handoff from Figma to developers?

The best way to automate Figma design handoff is using a conversion tool that bridges the gap between design and code. It automatically extracts design states and data to produce comprehensive implementation notes for developers.

Why does Figma to spec conversion require screenshots when URL access fails?

Figma to spec conversion requires screenshots when URL access fails because the tool needs visual context to accurately map user flows and states. Providing descriptions or images ensures the feature specification remains accurate.