← ClaudeAtlas

auto-layout-refactorlisted

Converts flat Figma frames built with absolute (free-form) positioning into proper auto-layout structures, in place. Triggers when the user describes a legacy or messy Figma file where layers were dragged into position instead of stacked — phrasings like "this file has no auto-layout", "everything is absolutely positioned", "refactor this screen to auto-layout", "auto-layout this page", "convert these frames to auto-layout", "clean up this old Figma file", "the layout is flat / has no structure", "add auto-layout to these frames", "wrap these into auto-layout", "fix this legacy layout", or "auto-layoutify". Also trigger when a designer opens an old design and asks for help making it editable, responsive, or maintainable. Do NOT trigger for creating new layouts from scratch (use figma-generate-design) or for component construction (use figma-generate-library).
Hosseinkm89/figma-skills · ★ 0 · Web & Frontend · score 70
Install: claude install-skill Hosseinkm89/figma-skills
# Auto-Layout Refactor Old Figma files are full of frames where every layer was dragged into position by hand. Nothing is stacked, nothing reflows, and editing one element shifts everything else. This skill takes those flat frames and turns them into proper auto-layout structures the designer can actually maintain — without redrawing the screen. The skill always loads alongside [figma-use](../figma-use/SKILL.md), which covers the Plugin API rules required by `use_figma`. Load `figma-use` first. ## What this skill does Walks the **current page** of the open Figma file, finds every frame whose `layoutMode === "NONE"`, and refactors each one **bottom-up** into auto-layout: 1. **Detects intent from geometry** — clusters children into rows and columns based on bounding-box overlap, picks `HORIZONTAL` or `VERTICAL` per frame, and wraps any cluster that doesn't fit a clean axis into an intermediate frame. 2. **Reorders children by position** before flipping `layoutMode`, so Figma's auto-arrange doesn't scramble the visual order. 3. **Measures padding and gap from the original layout**, snapped to the nearest 4 px. 4. **Preserves the frame's original width and height** as `FIXED` on both axes, so the screen does not visibly reflow. 5. **Processes everything** — instances, locked layers, hidden layers all participate in the refactor. The designer asked for an aggressive cleanup pass, not a conservative one. 6. **Modifies frames in place.** Original frame IDs are preserved. Return