Design Layout Text Adaptation

Problem

When a design is adapted from Chinese to English, German, or other longer copy, the issue is often not just clipped text. Fixed sizes in auto layout can amplify the risk: a text node changes width without height, text inside INSTANCE components is missed, and button or tag text is treated like ordinary paragraphs, leading to overflow, collapse, or uneven spacing.

How It Works

The skill turns layout adaptation into an auditable workflow:
- Scan before fixing: read visible text under the target node and expand INSTANCE subtrees so both plain text and instance-internal text are included.
- Classify first: determine text type from visibility, parent naming, textAutoResize, parent width mode, and height mode, then map it to fill, skip, button, tag, or container-overflow rules.
- Keep width and height consistent: when text becomes fill_container or HEIGHT auto resize, container height should become hug_contents; if the container was fixed height, compensate with paddingTop and paddingBottom based on original height and text line height.
- Verify and report: output a report with fixed nodes, padding values, skipped nodes, and screenshot checks for clipping, overflow, and collapse.

Boundaries

It is useful for auto-layout-based multilingual adaptation, especially for buttons, tags, navigation, lists, and tables. If the file relies heavily on manual coordinates, absolute positioning, or pixel-perfect visual art, this skill alone is not enough. It focuses on keeping auto layout stable when text length changes, not replacing design judgment about visual weight or brand typography.