figma-layout-reader

Convert Figma design files into layout handoffs with canvas sizes, spacing, typography, and colors.

Updated Aug 23, 2026

Search Tags:#layout #frontend #figma #handoff #design-system #design-implementation

Ready to run

npx skills add https://github.com/ringlochid/Homura-WorkSpace --skill figma-layout-reader

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-layout-reader
Source: https://github.com/ringlochid/Homura-WorkSpace/tree/main/skills/figma-layout-reader
Command: npx skills add https://github.com/ringlochid/Homura-WorkSpace --skill figma-layout-reader

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Convert Figma design files into precise, build-ready layout handoffs to accelerate frontend implementation and reduce rework caused by ambiguous specs.

Core Features & Use Cases

Frame-by-frame inventory: extract exact canvas sizes, absolute positions, and frame names to map to UI components.
Design-token capture: collect typography, color, spacing, radii, and shadows to feed into a design system and CSS variables.
Handoff generation: produce a clear, implementation-oriented summary using the layout-summary-template.md for engineering handoff and QA.
Use Case: Given a Figma file key or URL, produce a deterministic handoff for multiple frames and breakpoints to guide pixel-accurate builds.

Quick Start

Provide a Figma file key or URL to generate a build-ready layout handoff for your project.

Frequently Asked Questions about figma-layout-reader

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

FAQPage Schema

How do I generate a frontend handoff from a Figma file?▼

To generate a frontend handoff from a Figma file, provide the file key or URL to extract per-frame inventories, exact canvas sizes, spacing, typography, and color details into a build-ready layout summary.

Can I extract design tokens like spacing and typography from Figma for CSS variables?▼

Yes, you can extract design tokens from Figma by fetching the file JSON to collect typography, color, spacing, radii, and shadows, which can then feed directly into your design system and CSS variables.

What do I need to extract layout details from a Figma file URL?▼

To extract layout details from a Figma URL, you need a valid FIGMA_TOKEN for authentication to run the provided Python scripts, which fetch the file JSON and filter it by page or frame.

Does Figma layout extraction work for multiple frames and breakpoints?▼

Figma layout extraction works for multiple frames and breakpoints by filtering the fetched file JSON to produce a deterministic, pixel-accurate layout handoff for each specified frame.

How does a frame-by-frame inventory help with frontend implementation?▼

A frame-by-frame inventory helps frontend implementation by extracting exact canvas sizes, absolute positions, and frame names from Figma, allowing developers to accurately map design elements directly to UI components.

What is the best way to convert Figma designs into a build-ready layout summary?▼

The best way to convert Figma designs into a build-ready layout summary is to run Python scripts that fetch file data and output a precise, implementation-oriented summary compliant with the layout-summary-template.