Limpiar una importación de Figma: elimina el ruido y aplana solo lo que no vas a editar
Limpia una importación de Figma en un orden fijo: guarda una versión, borra capas ocultas y vacías, desagrupa contenedores inútiles, protege el auto layout y aplana al final.
Para limpiar una importación en Figma, trabaja en un orden fijo: guarda una versión, elimina el ruido, desagrupa los contenedores que no aportan nada, protege los frames que llevan auto layout y aplana al final. Aplanar va último porque es el único paso que no se puede deshacer capa por capa. Todo lo anterior es barato de revertir.
Este tutorial es para diseñadores y desarrolladores que acaban de traer una página web a Figma como capas. Necesitas la página importada abierta en un archivo donde tengas permiso de edición. Una importación te da frames, texto y vectores reales. Una página real también arrastra elementos ocultos, cajas vacías y capas de marcado contenedor. Los pasos siguientes los eliminan sin romper el diseño que quieres conservar.
Paso 0: guarda una versión antes de tocar nada
Aplanar es destructivo. El centro de ayuda de Figma indica que, una vez aplanado un objeto, sus capas individuales no se pueden volver a separar, y que el camino de vuelta es deshacer o restaurar una versión desde el historial de versiones.
Así que empieza poniéndole nombre a una versión. Abre el historial de versiones, guarda una versión y llámala "importación original". Si una pasada de limpieza sale mal dentro de una hora, es posible que deshacer ya no llegue tan atrás. La versión con nombre sí.
Paso 1: elimina el ruido
El ruido es cualquier capa que no aporta nada al diseño con el que vas a trabajar. En una página importada suele caer en cuatro grupos:
- Capas ocultas, como menús móviles, avisos de cookies y modales que no eran visibles cuando se capturó la página.
- Frames vacíos, sin hijos ni relleno, que dejan los elementos separadores.
- Duplicados fuera de pantalla, por ejemplo una segunda copia de la navegación pensada para otro breakpoint.
- Píxeles de seguimiento y otras imágenes diminutas sin función visual.
Ocultar frente a eliminar
Ocultar una capa y eliminarla no es lo mismo. Una capa oculta sigue en el archivo y sigue contando en el número de capas. La guía de auto layout de Figma dice que una lista con auto layout se adapta cuando los elementos se añaden, eliminan u ocultan, así que un hijo oculto no dejará un hueco en el diseño. Eso hace de ocultar una forma práctica de comprobar si una capa importa. Cuando estés seguro de que no, elimínala. Las capas ocultas siguen pesando en el archivo y siguen ensuciando el panel de capas.
Un límite honesto: en las páginas de ayuda de Figma que revisamos no encontramos ningún comando integrado que elimine de una vez todas las capas ocultas, ni otro que quite todos los frames vacíos. La propia página de flujos de trabajo con IA de Figma menciona "delete all invisible layers" solo como un prompt de ejemplo. Así que prepárate para hacerlo a mano. Despliega el panel de capas, selecciona las capas problemáticas con Shift o Command y pulsa Delete. Trabaja desde la parte baja del árbol hacia arriba, para que al borrar un hijo no tengas que buscar después el padre que se quedó vacío.
Paso 2: desagrupa los contenedores que no aportan nada
Las páginas web se construyen con contenedores anidados, y una importación refleja ese anidamiento. Puedes acabar con cinco niveles de frames alrededor de un solo botón. La mayoría de esos contenedores no hacen ningún trabajo en Figma.
Desagrupar elimina el contenedor y sube a sus hijos un nivel. El atajo es el mismo para grupos y frames: Shift Command G o Command Delete en Mac, Shift Control G o Control Backspace en Windows, según la página de Figma sobre la diferencia entre frames y grupos.
Antes de desagrupar, averigua qué tipo de contenedor es, porque los dos se comportan de forma distinta:
| Contenedor | Cómo se dimensiona | Qué elimina desagrupar | Qué comprobar antes |
|---|---|---|---|
| Group | Toma las dimensiones combinadas de sus hijos | Solo la agrupación. Las posiciones de los hijos no cambian. | Casi nada. Es seguro desagrupar. |
| Frame | Tiene un tamaño que defines tú | El frame, con su ancho y alto explícitos | Si tiene auto layout, relleno, trazo o un tamaño del que dependen otras capas |
Un frame sin relleno, sin trazo, sin auto layout y sin función es seguro de quitar. Un frame que lleva alguna de esas cosas está haciendo un trabajo, y eso nos lleva al siguiente paso.
Paso 3: conserva las capas que sostienen el diseño
Los frames que merece la pena proteger son los que tienen auto layout. UnHTML traduce el espaciado, el padding, el wrap y el stretch del CSS flex y grid de la página a auto layout, y cuando un frame no puede reproducir la geometría capturada, recurre al posicionamiento absoluto. Por eso un archivo importado es una mezcla: unos frames fluyen y otros están anclados.
Desagrupar o aplanar un frame con auto layout descarta su dirección, su gap y su padding. Los hijos se quedan, pero las reglas que los ordenaban desaparecen. Para comprobar un frame antes de actuar, selecciónalo y mira la barra lateral derecha. Si el auto layout está activado, déjalo en paz o elimina solo sus hijos hoja.
Un caso relacionado es un hijo anclado a propósito. La opción Ignore auto layout de Figma, antes llamada absolute position, excluye un objeto del flujo y lo mantiene dentro del frame con auto layout. Una capa así puede parecer un elemento suelto cuando en realidad es intencionada, así que compruébalo antes de borrarla. Si no estás seguro de cómo un elemento acabó anclado, cómo llegan los elementos absolute y fixed explica cada valor de position en CSS.
También puedes añadir auto layout donde el recurso alternativo no dejó ninguno. Selecciona las capas y pulsa Shift A, y Figma intentará adivinar el flujo: vertical, horizontal o grid. Revisa el resultado. Es solo una suposición. Para quitar el auto layout, el atajo es Option Shift A en Mac y Alt Shift A en Windows.
Paso 4: aplana solo lo que nunca vas a editar
Aplanar fusiona una selección en una única capa vectorial. Figma indica que esto reduce el tamaño del archivo y simplifica el diseño. Funciona con selecciones de vectores, con capas de texto y con frames o secciones. Aplanar un contenedor fusiona a sus hijos y elimina el propio contenedor. El atajo es Option Shift F en Mac y Alt Shift F en Windows, o clic derecho y Flatten.
Buenos candidatos:
- Iconos construidos con varios trazados vectoriales superpuestos, cuando solo necesitas la forma final.
- Ilustraciones decorativas hechas de decenas de formas pequeñas.
- Logotipos o logotipos tipográficos que piensas retocar como un único contorno.
Malos candidatos:
- Texto. Una capa de texto aplanada se convierte en contornos, así que ya no puedes editar las palabras ni aplicar un estilo de texto.
- Botones, tarjetas y cualquier frame con auto layout. Aplanar uno elimina el frame y sus reglas de diseño.
- Cualquier cosa que un desarrollador vaya a inspeccionar después para ver espaciado o tipografía.
Los SVG de una página ya llegan como vectores nativos, así que muchos iconos no necesitan aplanarse para ser editables. Aplánalos solo si quieres un único trazado fusionado. Un SVG aplanado es más simple, pero pierde su estructura interna, y no puedes recuperarla sin el historial de versiones.
Aplana de forma selectiva y en lotes pequeños. Selecciona un icono, aplánalo y mira el resultado antes de pasar al siguiente. Si aplanas una sección entera de golpe y el resultado es incorrecto, tienes un solo deshacer enorme y ninguna forma de saber qué grupo lo causó.
Revisa el resultado
Cuando termines la pasada, compara el archivo con tu versión "importación original". El árbol de capas debería ser más corto y menos profundo. El texto debería seguir siendo editable. Los frames que tenían auto layout deberían seguir mostrándolo en la barra lateral. Un archivo limpio también es más fácil de convertir en piezas reutilizables, que es el tema de convertir una página importada en componentes.
Una nota sobre las cifras. El plan gratuito de UnHTML limita una importación a 500 layers, y Pro elimina ese límite. El límite se aplica en el momento de importar, así que borrar capas después en Figma no cambia lo que produjo el importador. Si tu página alcanza el límite, la limpieza no recuperará la parte que falta: vuelve a importarla con Pro o por secciones. Los detalles de los planes están en la página de inicio de UnHTML.
En octubre de 2026, los comandos y atajos anteriores coinciden con las páginas del centro de ayuda de Figma citadas en este artículo. Los menús cambian entre versiones, así que si un atajo no hace nada, haz clic derecho sobre la selección y busca el mismo comando por su nombre.