AutoLayers

About this plugin

AutoLayers v1.1.2 – Intelligent Layer Renaming for Modern Design Workflows

AutoLayers is a powerful Figma plugin that transforms your design workflow with intelligent, developer-friendly layer naming. Using semantic detection and context-aware analysis, it automatically renames layers with meaningful names that align with modern design systems like Tailwind, Radix, and shadcn/ui.

🎯 What's New in v1.1.2:

1. Ordered Naming System: Intelligent frame ordering within device containers
2. Smart Navbar/Header Detection: First frame <100px height → "navbar", second frame → "header"
3. Automatic Section Naming: All middle frames named "section" for consistent structure
4. Footer Detection: Last frame automatically named "footer"
5. Enhanced Device Container Logic: Better organization for desktop/tablet/mobile layouts

✨ Key Features:

1. Semantic detection recognizes common UI patterns (header, footer, card, modal, hero, etc.)
2. Smart dimension analysis identifies buttons, avatars, badges, and dividers automatically
3. NEW: Ordered naming system for responsive layouts (navbar → header → sections → footer)
4. Intelligent auto-layout naming (flex-row, flex-col, button, label, nav)
5. Component and instance names are preserved to maintain design system integrity
6. Enhanced naming aligned with modern web development conventions
7. Context-aware renaming detects UI elements by their purpose, not just type
8. Works on single or multiple selections with recursive child renaming
9. Transforms frames, rectangles, vectors, and more into semantic names
10. Perfect for design-to-code handoffs and team collaboration
11. Keeps your Figma files organized and developer-ready

Whether you're building a design system, cleaning up messy files, or streamlining handoffs to developers, AutoLayers saves you time with intelligent, automated layer organization.

AutoLayers v1.1.2 by Kemonn98

Last Updated: October 17, 2025

muhsalmon.com