figma-task-extractor

Parse Figma file URLs to extract screens and generate Markdown task files.

1|1|Updated Jun 21, 2025
One-click install
npx skills add https://github.com/AdhamHashim/Flutter_Base --skill figma-task-extractor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-task-extractor
Source: https://github.com/AdhamHashim/Flutter_Base/tree/main/.claude/skills/figma-task-extractor
Command: npx skills add https://github.com/AdhamHashim/Flutter_Base --skill figma-task-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the tedious process of manually creating development tasks from Figma designs, ensuring all screens are accounted for and accelerating project setup.

Core Features & Use Cases

  • Automated Screen Extraction: Extracts all screens from a given Figma file URL.
  • Task File Generation: Creates individual Markdown task files for each screen, including Figma links and placeholders for API details.
  • Master Schedule Creation: Generates a consolidated schedule (_schedule.md) for tracking task progress and execution order.
  • Use Case: When starting a new feature, provide the Figma file URL, and the Skill will generate all necessary task files and a master schedule, ready for review and implementation.

Quick Start

Use the figma-task-extractor skill to generate tasks from the Figma file at https://www.figma.com/file/examplefilekey/example-file-name.

Frequently Asked Questions about figma-task-extractor

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

FAQPage Schema
How do I generate development tasks from a Figma design file?

To generate development tasks from a Figma design, you provide the Figma file URL to automate screen extraction. The tool then parses the URL to identify relevant frames and automatically creates individual Markdown task files for each screen.

What is the best way to automate project management task creation from Figma screens?

Automating project management task creation from Figma screens is best handled by parsing the Figma file URL to extract design frames. This process generates individual task files and a consolidated master schedule to accelerate project setup.

Does the task generation tool convert Figma screen names automatically?

Yes, the task generation tool converts extracted Figma screen names into snake_case format. This ensures consistent file naming for the individual Markdown task files and the master tracking schedule.

How does automated screen extraction from Figma handle design frames?

Automated screen extraction from Figma handles design frames by applying specific filtering rules to identify relevant screens. It parses the Figma file URL to isolate necessary frames and excludes irrelevant elements from task generation.

Can I track execution order when generating tasks from Figma designs?

You can track execution order when generating tasks from Figma designs through a generated master schedule. This consolidated Markdown file maps individual screen tasks and provides a central hub for monitoring progress.

What limitations exist when parsing a Figma file URL for task generation?

Limitations when parsing a Figma file URL for task generation include relying on specific filtering rules to identify relevant frames. If design frames are not properly structured or named, the automated screen extraction may not capture them accurately.