skills.rest
ringlochid
ringlochidCOMMUNITY
Explore all skills by this author →
Website𝕏@ringlochidGitHub

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
One-click install
npx skills add https://github.com/ringlochid/Homura-WorkSpace --skill figma-layout-reader
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
hoodinihoodini
262

figma

Convert Figma design data into React components, CSS, and Tailwind tokens.

Community
Intermediate
artosetrovartosetrov

figma-implement-design

Translate Figma frames into reusable frontend components aligned with design tokens.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
tuyoogametuyoogame
124

Figma

Query Figma design files to extract structure, components, and styles.

Official
Intermediate