'%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)
Reduce 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 actualmente. Agradecemos tu paciencia mientras realizamos actualizaciones. Obtén más información sobre el nuevo diseño 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
- Explora las alertas de uso de memoria
- Reduce el uso de memoria en los archivos
- Accede a archivos bloqueados o dañados
¿Qué es la memoria?
Usamos el término general “memoria” en este artículo para 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 usa 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 los dispositivos, pero la comprensión general es que hay un límite de memoria activa de 2 GB para cada pestaña del navegador.
Como Figma se desarrolló a partir de tecnologías basadas en navegador, estas limitaciones se aplican incluso cuando empleas las aplicaciones de Figma para escritorio.
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 explicamos más adelante en el artículo, algunas situaciones aún pueden hacer que un archivo se quede sin memoria.
Administra la memoria
Figma mide el uso de memoria como un porcentaje disponible en tu navegador o dispositivo. Solo se realiza un seguimiento del uso de memoria para las páginas que se cargaron 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 Ver.
- Selecciona Uso de memoria. El uso de memoria aparecerá como un medidor en la barra lateral izquierda.
- Haz clic en Gestionar memoria.
- Desde el modo Gestionar memoria, activa la opción Mostrar memoria en el panel de capas. Esto te permite ver la cantidad de memoria que emplean sus capas y componentes.
Consejo: También puedes ver consejos de reducción de memoria en el modal a fin de conocer las mejores prácticas para administrar la memoria de tu archivo.
Alertas de uso de memoria
Para mantenerte informado sobre tu uso de memoria y cualquier problema potencial que pueda surgir, Figma muestra banners y alertas en ciertos umbrales:
Nota: Es posible que no veas todas estas alertas en orden. Si el uso de memoria aumenta en un breve período, es posible que no recibas ninguna alerta.
Cuando alcances el 60 % del límite de memoria del navegador, Figma mostrará un mosaico de alerta amarillo en la barra lateral izquierda.
Acceso de solo visualización
Acceso de edición
En este punto, es posible que tenga problemas de rendimiento, como retrasos en el modo multiusuario, al interactuar con el archivo.
Cuando alcances el 75 % de tu límite de memoria, Figma mostrará un mosaico de alerta roja en la barra lateral izquierda. No se puede descartar esta alerta.
Acceso de solo visualización
Acceso de edición
Todavía puedes hacer cambios en el archivo, pero te recomendamos que tomes medidas inmediatas para proteger tu trabajo. Si no se reduce el uso de memoria ahora, aumentará la posibilidad de pérdida de datos.
Haz clic en Más información para ver sugerencias a fin de reducir el uso de memoria o sigue los consejos que describimos a continuación ↓
Si el archivo alcanza el 100 % de tu límite de memoria, Figma lo bloqueará y te informará 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. A veces, recargar el archivo liberará suficiente memoria para que puedas seguir viéndolo.
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. A veces, recargar el archivo liberará suficiente memoria para que puedas seguir viéndolo.
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 del navegador:
- Firefox 89+
- Cromo 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 un conjunto de factores que contribuyen a la memoria. Desafortunadamente, no hay un número específico de capas, datos o recursos que puedas tener en cuenta. Esto significa que no podemos darte un enfoque único para reducir la memoria. Si experimentas un uso elevado de memoria, usa las siguientes soluciones para ayudar a 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
Usa propiedades de componentes booleanos
Las propiedades booleanas son un tipo de propiedad de componente que permite activar y desactivar una propiedad, como la visibilidad de una capa. Aunque este método emplea capas ocultas, reduce el número de variantes y capas necesarias en un sistema de diseño, lo que mejora el uso de memoria del archivo.
| Antes | Después |
|---|---|
|
Nuestro conjunto de componentes de botones tiene dos variantes para representar los dos estados del botón: con ícono y sin este. Este componente tiene un total de siete capas (una capa de conjunto de componentes, dos capas variantes y cuatro capas anidadas). |
Solo necesitamos un componente y una propiedad booleana aplicada al ícono para alternar 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 de capas, en la barra lateral izquierda. Luego presiona 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 variantes
El número de componentes y variantes puede contribuir al uso de la memoria. Es posible que aún tengas límites de memoria si solo tienes unos pocos conjuntos de componentes, pero estos cuentan con miles de variantes.
Soluciones
Usa 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 propiedades de componentes para reducir la cantidad de componentes y variantes necesarios.
Esto mejora el uso de memoria porque Figma carga todos los componentes de un conjunto de componentes. Esto te permite cambiar rápidamente de una variante a otra. Si usas propiedades de componentes y tienes menos variantes, hay menos componentes que Figma necesita cargar.
Divide archivos de biblioteca grandes
Si tu archivo de la biblioteca sigue estando cerca del límite de memoria después de realizar estos ajustes, es posible que tengas que dividirlo en bibliotecas más pequeñas.
Mueve componentes publicados y conjuntos de componentes entre archivos sin romper los vínculos a las instancias. Este es un proceso de dos partes: cortar y pegar los componentes, luego publicar los cambios.
Hay muchas formas diferentes de dividir tu biblioteca, el mejor enfoque es el que satisface las necesidades de los usuarios de tu biblioteca. Para obtener más directrices sobre cómo organizar los archivos de tu biblioteca, consulta la Lección 3 de nuestro curso 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 experimentes problemas de rendimiento o memoria.
Si esto provoca bloqueos a nivel del navegador, Figma no mostrará los banners de uso de memoria. Esto es algo en lo que hay que pensar cuando se trabaja en archivos con un gran número de imágenes de alta resolución.
Soluciones
Divide archivos grandes en otros más pequeños
Existen diferentes enfoques para organizar los archivos de la biblioteca. Un lugar para comenzar es crear nuevos archivos para cada página del archivo actual. Para obtener más directrices sobre cómo organizar los archivos de tu biblioteca, consulta la Lección 3 de nuestro curso Introducción a los sistemas de diseño.
- Crea un nuevo archivo en tu cuenta de Figma. En otra pestaña, abra el archivo original y ve la página que deseas mover.
- Utiliza el atajo Seleccionar todo para seleccionar todo en la página.
- Mac: ⌘ Command A
- Windows: Ctrl + A
- Usa el atajo Copiar para copiar el contenido de la página al portapapeles.
- Mac: ⌘ Command C
- Windows: Ctrl + C
- Regresa al nuevo archivo en una pestaña separada. Utiliza el atajo Pegar para pegar el contenido de su portapapeles:
- Mac: ⌘ Command 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.
Comprime tus archivos de imagen
El plugin Downsize te permite comprimir imágenes grandes en el lienzo.
Activos grandes
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 importas, o reducir el tamaño de los archivos que vas a importar:
- Divide los archivos grandes en otros más pequeños.
- Comprime imágenes de alta resolución.
- Importa SVG complejos en partes más pequeñas.
Aprende a importar archivos en Figma →
Nota: La decodificación de imágenes emplea memoria JS, que no se incluye en el porcentaje de memoria ni en las alertas de banner. Las imágenes aún pueden contribuir a la memoria WASM a medida que se renderizan en el lienzo.
Acceder a archivos bloqueados
Si el archivo alcanza el 100 % de tu límite de memoria, Figma lo bloqueará y te informará que no hay memoria disponible. Hay dos medidas que puedes implementar:
- Restaurar el archivo a una versión que emplee menos memoria. Si no puedes acceder al historial de versiones desde el archivo, aún puedes realizar esta acción en el explorador de archivos.
- Si ves una pantalla blanca, es posible que tu 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 intentar abrir el archivo con imágenes en modo de miniatura ↓.
Restaurar la versión anterior
- Abre el proyecto donde está ubicado el archivo.
- Mantén presionadas las teclas modificadoras y haz clic en el archivo:
- Mac: ⇧ Shift ⌃ Control ⌥ Option
- Windows: Alt Shift
- Selecciona Restaurar desde versión.
- Haz clic en Restaurar junto a la versión adecuada.
Abre el archivo en modo de solo miniaturas
Es posible que puedas acceder al archivo nuevamente utilizando el modo de solo miniatura. Esto carga el archivo con imágenes de baja resolución.
Para acceder al modo de solo miniaturas, agrega 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 agregar 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, necesitas agregar& thumbnails-only=1en su lugar. Usa&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 cualquier enfoque para reducir el uso de memoria ↑.