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:

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

Avoid:

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