Clean Up a Figma Import: Delete the Noise, Then Flatten What You Won't Edit

To clean up an import in Figma, work in a fixed order: save a version, delete the noise, ungroup wrappers that add nothing, protect the frames that carry auto layout, and flatten last. Flatten comes last because it is the one step you cannot take apart again. Everything before it is cheap to undo.

This tutorial is for designers and developers who just brought a webpage into Figma as layers. You need the imported page open in a file where you have edit access. An import gives you real frames, text and vectors. A real page also carries hidden elements, empty boxes and layers of wrapper markup. The steps below remove those without breaking the layout you want to keep.

Step 0: save a version before you touch anything

Flattening is destructive. Figma's help center says that once an object is flattened, its individual layers cannot be separated again, and that the way back is undo or restoring a version from version history.

So start by naming a version. Open version history, save a version, and call it "raw import". If a cleanup pass goes wrong an hour from now, undo may not reach back far enough. The named version will.

Step 1: delete the noise

Noise is any layer that contributes nothing to the design you are about to work on. On an imported page it usually falls into four groups:

• Hidden layers, such as mobile menus, cookie banners and modals that were not visible when the page was captured.
• Empty frames with no children and no fill, left behind by spacer elements.
• Off-screen duplicates, for example a second copy of the navigation used for a different breakpoint.
• Tracking pixels and other tiny images with no visual role.

Hide versus delete

Hiding a layer and deleting it are different. A hidden layer stays in the file and stays in the layer count. Figma's auto layout guide says an auto layout list adapts as items are added, removed, or hidden, so a hidden child will not leave a gap in the layout. That makes hiding a handy way to test whether a layer matters. Once you're sure it doesn't, delete it. Hidden layers still weigh on the file and still clutter the layers panel.

One honest limit: in the Figma help pages we checked, we found no built-in command that deletes every hidden layer at once, or one that removes every empty frame. Figma's own AI workflows page lists "delete all invisible layers" only as a sample prompt. Plan on doing this by hand, then. Expand the layers panel, select the offending layers with Shift or Command click, and press Delete. Work from the bottom of the tree upward, so that deleting a child does not leave you hunting for the now-empty parent.

Step 2: ungroup wrappers that add nothing

Web pages are built from nested containers, and an import mirrors that nesting. You can end up with five levels of frames around one button. Most of those wrappers do no work in Figma.

Ungrouping removes the wrapper and moves its children up one level. The shortcut is the same for groups and frames: Shift Command G or Command Delete on Mac, Shift Control G or Control Backspace on Windows, as listed on Figma's page on the difference between frames and groups.

Before you ungroup, know what the wrapper is, because the two kinds behave differently:

A frame with no fill, no stroke, no auto layout and no purpose is safe to remove. A frame that carries any of those is doing work, and that leads to the next step.

Step 3: keep the layers that carry the layout

The frames worth protecting are the ones with auto layout. UnHTML maps spacing, padding, wrap and stretch from the page's flex and grid CSS onto auto layout, and where a frame cannot reproduce the captured geometry it falls back to absolute positioning. So an imported file is a mix: some frames flow, some are pinned.

Ungrouping or flattening a frame with auto layout throws away its direction, gap and padding. The children stay, but the rules that arranged them are gone. To check a frame before you act, select it and look at the right sidebar. If auto layout is on, leave it alone, or delete only its leaf children.

A related case is a child that was pinned on purpose. Figma's Ignore auto layout, formerly called absolute position, excludes an object from the flow while keeping it inside the auto layout frame. A layer like this can look like a stray when it is intentional, so check before you delete it. If you are unsure how a pinned element got that way, how absolute and fixed elements arrive explains each CSS position value.

You can also add auto layout where the fallback left none. Select the layers and press Shift A, and Figma will guess the flow, vertical, horizontal or grid. Check the guess. It is only a guess. To remove auto layout again, the shortcut is Option Shift A on Mac and Alt Shift A on Windows.

Step 4: flatten only what you will never edit

Flattening merges a selection into a single vector layer. Figma says this reduces file size and simplifies the design. It works on vector selections, on text layers, and on frames or sections. Flattening a container merges its children and removes the container itself. The shortcut is Option Shift F on Mac and Alt Shift F on Windows, or right-click and choose Flatten.

Good candidates:

• Icons built from several overlapping vector paths, where you only ever need the finished shape.
• Decorative illustrations made of dozens of small shapes.
• Logos or wordmarks you plan to tweak as one outline.

Bad candidates:

• Text. A flattened text layer becomes outlines, so you can no longer edit the words or apply a text style.
• Buttons, cards and any frame with auto layout. Flattening one deletes the frame and its layout rules.
• Anything a developer will inspect later for spacing or type.

SVGs on a page arrive as native vectors already, so many icons need no flattening to be editable. Flatten them only if you want a single merged path. A flattened SVG is simpler but loses its inner structure, and you cannot get it back without version history.

Flatten selectively, and flatten in small batches. Select one icon, flatten it, and look at the result before moving to the next. If you flatten an entire section at once and the result is wrong, you have one big undo and no way to tell which group caused it.

Check the result

When the pass is done, compare the file against your "raw import" version. The layer tree should be shorter and shallower. Text should still be live. Frames that had auto layout should still show it in the sidebar. A clean file is also easier to turn into reusable pieces, which is the subject of turning an imported page into components.

One note on the numbers. UnHTML's free tier caps an import at 500 layers, and Pro removes that cap. The cap applies at import time, so deleting layers afterward in Figma does not change what the importer produced. If your page hits the cap, cleanup will not recover the missing part; import it again on Pro, or in sections. Details of the tiers are on the UnHTML homepage.

As of October 2026, the commands and shortcuts above match Figma's help center pages cited in this article. Menus move between releases, so if a shortcut does nothing, right-click the selection and look for the same command by name.