'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Reducir el uso de memoria en los archivos
Si usas UI3, el nuevo diseño de Figma, es posible que algunas partes de este artículo no coincidan con lo que ves en el producto en estos momentos. Gracias por tener paciencia mientras llevamos a cabo las actualizaciones. Más información sobre la nueva versión de Figma →
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes
Cualquier persona con acceso de puede editar puede entrar en el modo de recuperación y reducir el uso de memoria en un archivo de diseño.
Si trabajas con archivos o bibliotecas grandes en Figma, es posible que te encuentres con limitaciones de memoria. En este artículo, describiremos algunas de las formas en que puedes adaptar tus archivos para que funcionen dentro de estas limitaciones.
- Qué es la memoria
- Explorar las alertas de uso de memoria
- Reducir el uso de memoria en los archivos
- Acceder a archivos bloqueados o dañados
¿Qué es la memoria?
A lo largo de este artículo, usaremos el término general «memoria» a fin de explicar y abordar las alertas de memoria que verás en Figma.
En este artículo, nos referimos a un tipo específico de memoria: la memoria WASM (WebAssembly Memory). Figma utiliza la memoria WASM para renderizar capas y objetos en el lienzo y ofrecer una experiencia multiusuario colaborativa.
Cada navegador tiene su propio límite de memoria activa. Esto puede variar según el dispositivo, pero el entendimiento general es que hay un límite de memoria activa de 2 GB por pestaña del navegador.
Como Figma se basa en tecnologías basadas en navegador, estas limitaciones se aplican incluso cuando utilizas las aplicaciones de escritorio de Figma.
Figma emplea algunos métodos para intentar garantizar que no te quedes sin memoria mientras trabajas. Por ejemplo, Figma carga páginas y capas en un archivo solo cuando es necesario para ayudar a mantener el uso de memoria lo más bajo posible. Sin embargo, como explicaremos más adelante en el artículo, algunas situaciones todavía pueden provocar que un archivo se quede sin memoria.
Gestionar la memoria
Figma mide tu uso de memoria como un porcentaje de la memoria disponible en tu navegador o dispositivo. Solo se hace un seguimiento del uso de memoria para las páginas que se han cargado en un archivo.
Para ver los indicadores de uso de memoria del contenido de tu archivo:
- Selecciona el menú principal y pasa el cursor sobre Visualizar.
- Selecciona Uso de memoria. El uso de memoria aparecerá como un medidor en la barra lateral izquierda.
- Haz clic en Administrar memoria.
- Desde el modal Gestionar memoria, activa Mostrar memoria en el panel de capas. Esto te permite ver cuánta memoria utilizan tus capas y componentes.
Consejo: También puedes ver las sugerencias para reducir la memoria en el modal y conocer las mejores prácticas para administrar la memoria de tu archivo.
Alertas de uso de memoria
Para mantenerte informado sobre el uso de la memoria y cualquier problema potencial que pueda surgir, Figma muestra banners y alertas en ciertos umbrales:
Nota: Es posible que no vea todas estas alertas en orden. Si el uso de memoria aumenta en un corto espacio de tiempo, es posible que no recibas ninguna alerta.
Cuando alcances el 60 % del límite de memoria del navegador, Figma mostrará un icono de alerta amarillo en la barra lateral izquierda.
Acceso de solo visualización
Acceso de edición
En este punto, es posible que experimentes problemas de rendimiento (como retrasos en el modo multiusuario) al interactuar con el archivo.
Cuando alcances el 75 % del límite de memoria, Figma mostrará un icono de alerta rojo en la barra lateral izquierda. No es posible ignorar esta alerta.
Acceso de solo visualización
Acceso de edición
Todavía podrás hacer cambios en el archivo, pero te recomendamos que tomes medidas inmediatas para proteger tu trabajo. Si no se reduce el uso de memoria en ese momento, aumentará la posibilidad de pérdida de datos.
Haz clic en Más información para ver sugerencias para reducir el uso de memoria o sigue los consejos que describimos a continuación ↓
Si tu archivo alcanza el 100 % del límite de memoria, Figma bloqueará el archivo y te informará de que no hay memoria disponible.
Experiencia cuando tienes acceso de solo lectura al archivo
Aquellos con acceso al archivo tendrán la opción de volver a cargarlo. En ocasiones, volver a cargar el archivo liberará suficiente memoria para que puedas seguir viendo el archivo.
Experiencia cuando tienes acceso de edición al archivo
Aquellos con acceso de edición al archivo tendrán la opción de volver a cargarlo. En ocasiones, volver a cargar el archivo liberará suficiente memoria para que puedas seguir viendo el archivo.
De lo contrario, se te pedirá que entres en el modo de recuperación si tienes una versión de navegador compatible y tienes acceso de edición al archivo. El modo de recuperación es compatible con las siguientes versiones de navegador:
- Firefox 89+
- Chrome 83+
- Safari 15.2+
- Microsoft Edge 93+
Si la versión actual del navegador no es compatible, se te pedirá que actualices la versión del navegador o que abras el archivo en la aplicación de escritorio.
Modo de recuperación
El modo de recuperación te permite reducir el uso de memoria y devolver tu archivo a un estado editable sin perder tu trabajo.
Al entrar en el modo de recuperación, se cargarán todas las páginas del archivo y se abrirá el modal de gestión de memoria. El uso de memoria debe reducirse por debajo del 90 % para salir del modo de recuperación.
Nota: El archivo se volverá a cargar una vez que salgas del modo de recuperación.
Consejos para reducir el uso de memoria
Hay una serie de factores que contribuyen a la memoria. Desgraciadamente, no hay un número concreto de capas, datos o recursos en los que basarte. Esto significa que no podemos darte un enfoque único para reducir la memoria. Si experimentas un uso elevado de la memoria, sigue las siguientes indicaciones para solucionar el problema.
Capas ocultas
Las capas ocultas contribuyen en gran medida al uso de la memoria. Esto se debe a que Figma necesita almacenar y renderizar información sobre esas capas incluso cuando no están visibles.
Soluciones
Usar propiedades booleanas de componentes
Las propiedades booleanas son un tipo de propiedad de componente que te permiten activar y desactivar una propiedad, como la visibilidad de la capa. Aunque este método utiliza capas ocultas, reduce el número de variantes y capas necesarias en un sistema de diseño, mejorando el uso de memoria del archivo.
| Antes | Después |
|---|---|
|
Nuestro conjunto de componentes de botón tiene dos variantes para representar los dos estados del botón: con icono y sin icono. Este componente tiene un total de siete capas (una capa de conjunto de componentes, dos capas de variante y cuatro capas anidadas). |
Solo necesitamos un componente y una propiedad booleana aplicada al icono para cambiar su visibilidad. Esta versión tiene un total de tres capas (una capa de componente y dos capas anidadas). |
¡Consejo! Para eliminar una capa, selecciónala en el lienzo o en el panel Capas en la barra lateral izquierda. A continuación, pulsa la tecla Eliminar o Retrocesopara eliminarla.
Nota: Figma solo carga capas en las páginas que abres. Navegar por las páginas requiere cargar el contenido restante en esas páginas, lo que puede provocar un aumento de la memoria y del número de capas en el panel de memoria.
Grandes bibliotecas de componentes o de variantes
El número de componentes y variantes puede contribuir al uso de la memoria. Puede que aún te encuentres con límites de memoria si solo tienes unos pocos conjuntos de componentes, pero estos tienen miles de variantes.
Soluciones
Usar las propiedades de los componentes
Si una biblioteca tiene una gran cantidad de variantes o un archivo está cerca del límite de memoria, considera usar las propiedades de los componentes para reducir la cantidad de componentes y variantes necesarios.
Esto mejora el uso de la memoria porque Figma carga todos los componentes en un conjunto de componentes. Esto te permite cambiar rápidamente entre variantes. Si usas las propiedades de los componentes y tienes menos variantes, hay menos componentes que Figma necesita cargar.
Dividir los archivos de biblioteca de gran tamaño
Si tu archivo de biblioteca sigue estando cerca del límite de memoria después de llevar a cabo estos ajustes, es posible que tengas que dividirlo en bibliotecas más pequeñas.
Mover los componentes y los conjuntos de componentes publicados entre archivos, sin romper los enlaces a las instancias. Este proceso consta de dos partes: cortar y pegar los componentes y, luego, publicar los cambios.
Hay muchas formas diferentes de dividir una biblioteca, la mejor manera de hacerlo será la que satisfaga las necesidades de los usuarios de esa biblioteca. Para obtener más orientación sobre cómo organizar los archivos de una biblioteca, consulta la lección 3 de nuestro curso de introducción a los sistemas de diseño.
Archivos grandes con múltiples imágenes y páginas
Si tienes un archivo grande con un número significativo de páginas o muchas imágenes de alta resolución, es posible que tengas problemas de rendimiento o de memoria.
Si esto causa fallos a nivel de navegador, Figma no mostrará los banners de uso de memoria. Esto es algo a tener en cuenta cuando se trabaja en archivos con un gran número de imágenes de alta resolución.
Soluciones
Dividir los archivos grandes en archivos más pequeños
Existen diferentes enfoques para organizar los archivos de una biblioteca. Un punto de partida puede ser crear nuevos archivos para cada página del archivo actual. Para obtener más orientación sobre cómo organizar los archivos de una biblioteca, consulta la lección 3 de nuestro curso de introducción a los sistemas de diseño.
- Crear un nuevo archivo en tu cuenta de Figma. En una pestaña separada, abre el archivo original y visualiza la página que deseas mover.
- Utiliza el acceso directo Seleccionar todo para seleccionar todo lo que hay en la página.
- Mac: ⌘ comando A
- Windows: Ctrl + A
- Usa el atajo Copiar para copiar el contenido de la página al portapapeles.
- Mac: ⌘ comando C
- Windows: Ctrl + C
- Regresa al nuevo archivo en una pestaña separada. Usa el atajo Pegar para pegar el contenido del portapapeles:
- Mac: ⌘ comando V
- Windows: Ctrl + V
- En el archivo original: abre la lista de páginas en la barra lateral izquierda. Haz clic con el botón derecho en el nombre de la página y selecciona Eliminar página.
Comprimir los archivos de imagen
El complemento Downsize te permite comprimir imágenes grandes en el lienzo.
Recursos de gran tamaño
La importación de grandes cantidades de texto, imágenes o vectores complejos con muchos puntos también puede afectar al uso de la memoria. Es posible que tengas que reducir el número o la calidad de los recursos que vayas a importar o bien reducir el tamaño de los archivos a importar:
- Dividir los archivos grandes en archivos más pequeños.
- Comprimir las imágenes de alta resolución.
- Importar los SVG complejos en partes más pequeñas.
Aprende a importar archivos en Figma →
Nota: La decodificación de imágenes utiliza memoria JS, que no se incluye en el porcentaje de memoria ni en las alertas de banner. Las imágenes pueden seguir contribuyendo a la memoria WASM a medida que se renderizan en el lienzo.
Acceder a archivos bloqueados
Si tu archivo alcanza el 100 % del límite de memoria, Figma bloqueará el archivo y te informará de que no hay memoria disponible. Hay dos cosas que puedes probar:
- Restaurar el archivo a una versión que utilice menos memoria. Si no puede acceder al historial de versiones desde el archivo, aún puedes llevar a cabo esta acción en el explorador de archivos.
- Si ves una pantalla blanca, es posible que el archivo se haya bloqueado debido a la memoria de la imagen. En este estado, no podrás acceder al archivo ni al historial de versiones del archivo. Puedes tratar de abrir el archivo con las imágenes en modo miniatura ↓.
Restaurar la versión anterior
- Abre el proyecto donde se encuentra el archivo.
- Mantén presionadas las teclas modificadoras y haz clic en el archivo:
- Mac: ⇧ Mayús ⌃ Control ⌥ Opción
- Windows: Alt Mayús
- Selecciona Restaurar desde versión.
- Haz clic en Restaurar junto a la versión adecuada.
Abrir archivo en modo solo miniaturas
Es posible que puedas volver a acceder al archivo utilizando el modo de solo miniaturas. Esto carga el archivo con imágenes de baja resolución.
Para acceder al modo de solo miniaturas, añade un parámetro de consulta ?thumbnails-only=1 (también conocido como cadena de consulta) al final de la URL del archivo.
- Si el enlace no incluye los parámetros existentes, el enlace termina con el nombre del archivo. Puedes añadir una nueva cadena de consulta
?thumbnails-only=1al final del enlace. La URL final se verá así:https://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?thumbnails-only=1 - Si el enlace ya tiene parámetros, como un parámetro
?node-id, deberás añadir&thumbnails-only=1en su lugar. Utiliza un&cuando añadas más parámetros a una cadena de consulta. La URL final se verá así:http://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?node-id=211-2665&t=D5QnxlouJ9sKF1dM-0&thumbnails-only=1
Ahora puedes probar cualquiera de los enfoques para reducir el uso de memoria ↑.