More screenshots

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseOpenClawOpenClaw+21 more

    Figma Tidy Up — Auto Layout & Semantic Layer Names

    1

    Turns a hand-positioned or captured Figma frame into a clean auto-layout hierarchy with semantic layer names, section by section, checking each step against the original screenshot.

    $9

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned
    Figma Tidy Up — Auto Layout & Semantic Layer Names

    Figma Tidy Up — Auto Layout & Semantic Layer Names

    Example session with this skill installed

    /figma-tidy-up https://www.figma.com/design/v14N2TMCUfOqvHNMefnmsy/code-to-canvas?node-id=12-2
    • Read your context and instructions
    • Compiled the figma tidy up
    • Generated the UI component

    Scan: a landing page captured with Code to Canvas, 1440 x 3370, 113 layers. None of the frames has auto layout, and 71 layers carry generic names (Container, Paragraph, Text, Link, Section). Top level: Header, Main Content (four sections), Footer. Figma variables and styles: none found.

    Before changing anything, the skill recommended a backup and noticed two places that look like intentional overlaps: the hero (text over a background photo with a dark scrim) and the location map (a caption badge over the map). It asked how to treat them, and the answer was to keep them as overlays.

    Plan: header, hero, villa spaces, location, reservation, footer, in that order. Each section is rebuilt on its own and compared with the Before screenshot before the next one starts.

    SectionWhat it did
    headerRow with a brand group on the left and an actions group on the right, spread apart; language links and the CTA button keep their 44px touch height
    heroPhoto and scrim kept as absolutely positioned layers that stretch with the section; heading, description, and buttons stacked in a column with 16 and 32px gaps
    villa-spacesTitle group on the left, intro on the right; a large card beside a column of two cards, with the column stretched so the bottom edges line up
    locationText column and map side by side, centered vertically; the caption badge pinned to the bottom left of the map
    reservationCentered column: eyebrow, heading, intro, button, and two notes with a 40px rhythm
    footerBrand on the left, three links on the right, and a legal row underneath

    Two things it found along the way. The first line of the hero heading ended with a hidden line break, so it measured 130px tall instead of 65 and pushed the rest of the heading down; the skill removed the trailing break and listed it in the report. A one-pixel border on the small tagline badge added to its padding, so the padding was reduced by one pixel to match the original size exactly.

    Result (Before, After):

    BeforeAfter
    Frames with auto layout068
    Layers with generic names710
    Overlapping layers kept as absolute(none)4
    Frame height3370px3365px

    The final full-frame screenshot matches the Before screenshot. The 6px difference in height comes from 8px of unused space that sat inside two cards (removed) and 2px added to the footer by its padding and border.

    Final layer tree (top levels):

    coral-terrace-landing-page
├─ header
│  ├─ header-brand (logo, brand-tagline)
│  └─ header-actions (language-nav, inquiry-button)
├─ main-content
│  ├─ hero (hero-background, hero-content)
│  ├─ villa-spaces-section (villa-spaces-header, villa-gallery)
│  ├─ location-section (location-copy, location-map)
│  └─ reservation-section (reservation-header, reservation-cta-button, reservation-notes)
└─ footer (footer-main, footer-legal-row)

    Next step suggested: run a tokenize pass to bind the colors and font sizes to variables.

    figma-tidy-up-auto-layout-semantic-layer.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Turn a Code to Canvas or Design Agent capture into a frame that is easy to edit and hand off.Replace hand-positioned elements with auto layout, with spacing rounded to a 4px grid.Give every layer a semantic name such as hero-cta-button or footer-nav.Keep intentional overlaps, like text over a hero image, as absolutely positioned layers.Check each section against the original screenshot before moving to the next one.

    About this skill

    Frames captured from code (Code to Canvas), generated by Figma's Design Agent, or built by dragging things into place come out with no auto layout and layers named Container, Paragraph, and Text. They are hard to edit, hard to hand off, and hard for any AI tool to read later. This skill rebuilds the frame as a proper auto-layout hierarchy and gives every layer a meaningful name — while the page keeps looking the way it did.

    What it does

    • Reads a Figma FRAME or SECTION, takes a Before screenshot, and works one section at a time instead of rewriting the whole page in one shot
    • Groups elements into rows and columns: it finds clusters in a horizontal row from the gaps between elements, so a header becomes a logo group and a navigation group pushed apart
    • Applies auto layout with padding and spacing normalized to a 4px grid, while keeping the macro spacing between sections and the overall proportions
    • Fixes small misalignments (off-center button text, uneven card padding) by letting auto layout do the alignment
    • Renames every layer to a semantic kebab-case name: hero-cta-button, villa-card-bedroom, footer-nav
    • Keeps intentional overlaps, such as text over a hero photo or a badge on a map, as absolutely positioned layers with constraints instead of flattening them
    • Compares a screenshot of each finished section with the Before screenshot and fixes problems before moving on
    • Reports any variables or styles it finds without touching them

    How it works

    1. Give it a Figma frame or section URL
    2. It checks the frame, shows the sections it found and the order it will work in, and recommends a backup before the first write
    3. If it suspects an intentional overlap, it asks before changing it
    4. It restructures section by section and verifies each one against the Before screenshot
    5. It finishes with a full-frame comparison, a numeric size check, and the final layer tree

    Includes field notes for the Figma Plugin API

    The skill ships with a reference of 21 known pitfalls in writing to Figma through use_figma — for example a section that collapses to 100px, text that silently overflows its column, and captured text that ends in a hidden line break and doubles its height once stacked. The skill opens only the entry that matches a symptom.

    What it is not

    It does not bind colors or sizes to variables (run a tokenize step afterwards) and it does not accept component or component-set URLs. It restructures layout and names; colors, fonts, and image content are left as they are. Sizes can shift by a few pixels where the source spacing was uneven, so review the final screenshot.

    Requirements

    Runs inside an agent connected to the official Figma MCP server — the same connection used for implementing Figma designs as code. Needs edit access to the Figma file. No local file access and no arbitrary network calls.

    Try it free first

    Try it Free on Agensi runs on Agensi's servers, which have no connection to your Figma file. Use the example session above to see the flow and the kind of report you get; the installed skill works on your real file through your own Figma MCP connection.

    Works well with

    Run it right after a Code to Canvas or Design Agent capture, before renaming leftovers, binding variables, or making components.

    More from KMRVID

    The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 1 day ago

    • Passed all security checks, Safe to install

    Listed2 days ago

    What's inside

    Frequently Asked Questions