Tutorial en vídeo: ordenar y renombrar capas automáticamente
Usa la pestaña Tidy para convertir un grupo desordenado de capas de Figma en un lienzo y una lista de capas organizados. Tidy puede detectar el flujo visual de la selección, alinear las capas en una cuadrícula con espaciado, hacer que el orden de las capas coincida con su posición en el lienzo, renombrar frames con números secuenciales y actualizar el texto de numeración de las presentaciones.
Preparar la selección
- En un archivo de Figma Design, selecciona las capas que quieres organizar.
- Asegúrate de que las capas seleccionadas son hermanas y tienen el mismo elemento padre.
- Abre TinyImage y selecciona la pestaña Tidy.
El estado de la selección muestra cuántas capas están listas y qué elemento padre las contiene. Tidy no mueve ni reordena capas dentro de un elemento padre con Auto Layout; en ese caso, selecciona capas del lienzo o de un frame normal.
Elegir las acciones de Tidy
Abre Actions y activa la combinación de opciones que quieras:
Alineación en cuadrícula
Detecta la disposición en filas o columnas más clara y alinea las capas seleccionadas con el espaciado horizontal y vertical de Preferences. Tidy tolera pequeños desplazamientos y capas de distintos tamaños cuando comparten un borde o un centro visual. Es la única acción activada por defecto.
Cambio de nombre
Añade números secuenciales según la posición de cada capa en el lienzo. Con el número inicial por defecto, 000, las capas se llaman 000, 001, 002, etc.
Orden de capas
Reordena las capas seleccionadas en el panel Layers de Figma para que coincidan con su orden visual en el lienzo. Las capas seleccionadas se mantienen juntas en la parte superior de la pila de capas de su elemento padre.
Numeración de presentaciones
Busca las capas de texto coincidentes dentro de cada capa seleccionada y sustituye su texto por un número según el orden en el lienzo, empezando por uno: 1, 2, 3, etc. Activa Leading zero en Preferences para usar 01, 02, 03, etc.
Configurar las preferencias de Tidy
Abre Preferences para configurar cómo se ejecutan las acciones activadas.
| Preferencia | Qué controla |
|---|---|
| Grid spacing | El espaciado horizontal y vertical entre las capas alineadas. Ambos son 100 px por defecto. |
| Layout | Auto detecta el flujo visual. Elige Rows o Columns para imponer otro. |
| Wrap component instances | Coloca las instancias seleccionadas dentro de frames del mismo tamaño cuando se ejecuta la alineación en cuadrícula. |
| Pager variable | El nombre exacto de la capa de texto de numeración que se actualiza. Por defecto es {current}. |
| Pager number | Añade un cero inicial a los valores de numeración, con lo que se obtiene 01, 02, 03, etc. |
| Starting frame number | El primer valor de {n} y el número de cifras que usan {n} y {total}. Por defecto es 000. |
| Rename strategy | Sustituye los nombres existentes, combina el número con cada nombre o aplica un patrón personalizado. |
Detección automática de la disposición
La disposición Auto, que es la predeterminada, compara las franjas visuales horizontales y verticales que ya hay en tu selección. Una lista horizontal o una cuadrícula ancha se organiza en filas, y una lista vertical o una cuadrícula alta, en columnas. Tidy reconoce las capas que comparten la alineación superior, central o inferior, así que los pequeños desplazamientos y los frames de distintos tamaños se siguen agrupando de forma natural.
Elige Rows o Columns cuando quieras imponer un orden de lectura concreto en lugar de usar el flujo detectado.
Estrategias de cambio de nombre
- Replace usa el número secuencial como nombre completo de la capa, por ejemplo
000. - Merge combina el número y el nombre existente, por ejemplo
000_Home. - Custom pattern combina tu propio texto con variables de nombre opcionales. Úsalo para controlar exactamente dónde aparecen los números y los nombres de capa existentes.
Variables de nombre
Escribe cualquier texto en Name pattern y añade variables donde quieras que aparezcan sus valores. Las variables son opcionales, así que también puedes aplicar el mismo nombre fijo a todas las capas seleccionadas.
| Variable | Qué añade |
|---|---|
{n} | El número secuencial según el orden en el lienzo, con las cifras de Starting frame number. |
{total} | El número de capas seleccionadas, con las mismas cifras que {n}. |
{name} | El nombre actual de la capa. |
{parent} | El nombre de la capa padre común. En las capas de nivel superior, es el nombre de la página de Figma. |
{type} | El tipo de capa, como Frame, Instance o Component Set. |
{page} | El nombre de la página actual de Figma. |
{row} | El número de fila visual de la capa, empezando por uno. |
{column} | El número de columna visual de la capa, empezando por uno. |
Por ejemplo, con Starting frame number en 001:
| Patrón de nombre | Resultado de ejemplo |
|---|---|
{n} Client Name | 001 Client Name |
Client Name {n} | Client Name 001 |
{n} {name} | 001 Home |
{n} of {total} {name} | 001 of 024 Home para una selección de 24 capas |
{parent} — {n} {name} | Client Screens — 001 Home |
{page} / {type} / {name} | Presentation / Frame / Home |
{n} Row {row}, Column {column} | 001 Row 1, Column 1 |
Client Name | Client Name en todas las capas seleccionadas |
Ejecutar Tidy
Después de revisar Actions y Preferences, selecciona Tidy n Layers. TinyImage aplica todas las acciones activadas a la selección actual e indica cuántas capas se han ordenado.
Usa el comando Undo normal de Figma si quieres restaurar las posiciones, los nombres, el orden de capas, los frames contenedores y los valores de numeración anteriores.
Auto funciona mejor cuando la selección ya sugiere un flujo visual. Si una disposición irregular a propósito se detecta de forma distinta a lo que esperas, elige Rows o Columns en Preferences.
La fuente que usan las capas de texto de numeración coincidentes debe estar disponible en Figma para que TinyImage pueda actualizar sus caracteres.