# Figma Page Autolayout Cleanup

> Clean up and modularize existing Figma pages into reusable Auto Layout structures. Use when a user wants to reorganize an imported webpage, article page, blog detail page, documentation page, or an already-designed frame in Figma without redesigning the visuals from scratch. Apply when the task involves duplicating a frame, flattening unnecessary wrappers, renaming layers semantically, setting stretch/fill behavior, preserving spacing rhythm, or turning a messy page into a developer-friendly component tree.

- Skill: `bango-zhou/figma-page-autolayout-cleanup` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add bango-zhou/figma-page-autolayout-cleanup`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bango-zhou/figma-page-autolayout-cleanup/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: bango-zhou (https://skillmd.com/u/bango-zhou)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/bango-zhou/figma-page-autolayout-cleanup

---


# Figma Page Autolayout Cleanup

## Overview

Turn an existing Figma page into a cleaner, reusable module file while preserving the original visual design. Work from a duplicated frame, not the original, and optimize for semantic structure, Auto Layout behavior, and easier handoff to developers.

## Workflow

1. Duplicate the target frame and leave the original untouched.
2. Inspect the current structure before changing anything:
   - top-level layout
   - article/content column
   - sidebar/TOC
   - footer or feedback sections
   - repeated wrapper patterns
3. Rebuild the main page skeleton with Auto Layout first:
   - page/root frame
   - main content container
   - article column
   - optional sidebar
   - footer
4. Clean the interior structure:
   - flatten wrappers that have no layout or styling responsibility
   - preserve containers that control padding, background, border, grouping, or future extensibility
5. Rename layers semantically.
6. Apply stretch/fill behavior so major content adapts when container width changes.
7. Validate that the cleaned version still looks close to the source frame.

## Structural Rules

Prefer a component-tree structure over a screenshot-tree structure.

Good:

```text
Article Column
  Article Header
    Title / H1
    Summary / Dek
    Meta / Updated
  Callout / Note
  Section / Intro
    Title / H2
    Body / Paragraph
```

Avoid:

```text
Article Header
  Title
    Actual text layer
  Summary
    Actual text layer
  Meta
    Actual text layer
```

Flatten a wrapper when all of these are true:

- it contains only one text node
- it has no padding
- it has no background or stroke
- it has no effect
- it has no future layout role

Keep a wrapper when it controls:

- padding
- fill, border, radius, or effect
- layout grouping
- repeated module boundaries
- future slots such as tags, icons, or multiple meta items

## Naming Rules

Use semantic names, not current content strings.

Prefer names like:

- `Article Header`
- `Title / H1`
- `Summary / Dek`
- `Meta / Updated`
- `Section / Getting started`
- `Subsection / Plugins`
- `Body / Paragraph`
- `Body / Note`
- `Label / TOC Section`
- `Action / Submit`

Do not leave important reusable layers named after the current article copy unless the text itself is the artifact being reviewed.

## Auto Layout Rules

Default to these behaviors:

- Root/page frame: vertical Auto Layout
- Main content container: vertical Auto Layout
- Article layout row: horizontal Auto Layout
- Article column: `Fill` or grow in the horizontal row
- Sidebar / TOC: fixed width unless the user asks otherwise
- Major sections: vertical Auto Layout
- Text inside vertical stacks: stretch when possible and use height-based auto resize

For text-heavy layouts, prefer:

- text width follows parent container
- text height grows naturally with wrapping
- content columns stretch with the parent container

When a container should adapt to width changes, make the child content participate in Auto Layout instead of leaving it absolutely positioned.

## Spacing Rules

Preserve the page's rhythm rather than equalizing every gap.

For article and blog detail pages, a stable default system is:

- `12` for tightly related header items
- `16` for title-to-body inside subsections
- `20` or `24` for paragraph rhythm
- `36` for subsection separation
- `40` for header-to-content transitions
- `48` for large section separation

Use a small set of spacing tokens repeatedly. Do not invent one-off gaps unless the source frame clearly depends on them.

## TOC / Sidebar Rules

If a page has a table of contents:

- rebuild it as a vertical Auto Layout list
- keep semantic item names such as `TOC Item / Section`, `TOC Item / Subsection`, `TOC Item / Sub-item`
- use indentation to express hierarchy instead of ad hoc x offsets
- let long labels wrap with container width

## Validation Checklist

Before finishing:

- confirm the duplicated frame still visually matches the source
- confirm major content columns resize sensibly
- confirm unnecessary wrappers are removed
- confirm semantic naming is consistent
- confirm text layers are not trapped inside meaningless one-child frames
- confirm sidebar and feedback areas are also cleaned, not just the main article

## Output Expectation

Deliver a cleaned frame that is:

- safe to reuse as a template
- easier to inspect in the layer panel
- closer to a developer-facing component tree
- responsive within the intended container widths