'%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)
Réduire l'utilisation de la mémoire dans les fichiers
Si vous utilisez UI3, le nouveau design de Figma, certaines parties de cet article peuvent ne pas correspondre à ce que vous voyez dans le produit aujourd'hui. Nous vous remercions de votre patience pendant que nous effectuons des mises à jour. En savoir plus sur la refonte de Figma →
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible sur tous les forfaits
Toute personne ayant accès à l'édition peut passer en mode de récupération et réduire l'utilisation de la mémoire dans un fichier design.
Si vous travaillez avec des fichiers ou des bibliothèques volumineux dans Figma, vous risquez de rencontrer des limitations de mémoire. Dans cet article, nous allons vous présenter quelques façons dont vous pouvez adapter vos fichiers afin qu’ils fonctionnent dans ces limites.
- Qu’est-ce que la mémoire
- Explorer les alertes relatives à l'utilisation de la mémoire
- Réduire l'utilisation de la mémoire dans les fichiers
- Accéder aux fichiers verrouillés ou écrasés
Qu’est-ce que la mémoire ?
Nous utilisons le terme général "mémoire" tout au long de cet article afin d'expliquer et traiter les alertes de mémoire que vous verrez dans Figma.
Dans cet article, nous faisons référence à un type spécifique de mémoire : la mémoire WASM (WebAssembly Memory). Figma utilise la mémoire WASM pour restituer les calques et les objets sur le plan de travail et offrir une expérience multijoueur collaborative.
Chaque navigateur a sa propre limite de mémoire active. Cela peut varier d'un appareil à l'autre, mais il est généralement admis que la mémoire active est limitée à 2 Go par onglet de navigateur.
Figma étant construit sur des technologies basées sur un navigateur, ces limites s'appliquent même lorsque vous utilisez les applications de bureau de Figma.
Figma utilise quelques méthodes pour essayer de s’assurer que vous ne manquez pas de mémoire pendant que vous travaillez. Par exemple, Figma ne charge les pages et les calques d'un fichier qu'en cas de besoin afin de réduire au maximum l'utilisation de la mémoire. Cependant, comme nous l'expliquons dans cet article, certaines situations peuvent encore provoquer un épuisement de la mémoire d'un fichier.
Gérer la mémoire
Figma mesure votre utilisation de la mémoire en pourcentage de la mémoire disponible dans votre navigateur ou votre appareil. L'utilisation de la mémoire n'est suivie que pour les pages chargées dans un fichier.
Pour afficher les indicateurs d'utilisation de la mémoire pour le contenu de votre fichier :
- Sélectionne le menu principal et passez le curseur de la souris sur Afficher.
- Sélectionnez Utilisation de la mémoire. L'utilisation de la mémoire apparaîtra sous forme de compteur dans votre barre latérale gauche.
- Clique sur Gérer la mémoire.
- Dans la fenêtre modale Gérer la mémoire, cochez la case Afficher la mémoire dans le panneau des calques. Cela vous permet de voir la quantité de mémoire utilisée par vos calques et vos composants.
Astuce : vous pouvez également consulter les conseils de réduction de la mémoire dans la fenêtre modale afin de s'informer sur les meilleures pratiques pour gérer la mémoire de votre fichier.
Alertes sur l'utilisation de la mémoire
Pour vous tenir informé de votre utilisation de la mémoire, et de tout éventuel problème, Figma affiche des bannières et des alertes à certains seuils :
Remarque : il se peut que toutes ces alertes ne s'affichent pas dans l'ordre. Si l'utilisation de la mémoire augmente rapidement, il se peut que vous ne receviez aucun avertissement.
Lorsque tu atteins 60 % de la limite de mémoire du navigateur, Figma affiche une tuile d'alerte jaune dans la barre latérale gauche.
Accès en lecture seule
Accès éditeur
À ce stade, vous pouvez rencontrer des problèmes de performances, tels que des décalages en multijoueur, lors de l’interaction avec le fichier.
Lorsque vous atteignez 75 % de votre limite de mémoire, Figma affiche une tuile d'alerte rouge dans la barre latérale gauche. Vous ne pouvez pas ignorer cette alerte.
Accès en lecture seule
Accès éditeur
Vous pouvez encore apporter des modifications au fichier, mais nous vous recommandons de prendre des actions immédiates pour protéger votre travail. Si vous ne réduisez pas l'utilisation de la mémoire maintenant, vous augmenterez le risque de perte de données.
Clique sur En savoir plus pour obtenir des suggestions pour réduire l'utilisation de la mémoire ou suis les conseils ci-dessous ↓
Si votre fichier atteint 100 % de votre limite de mémoire, Figma verrouillera le fichier et vous informera qu'il n'y a plus de mémoire disponible.
Expérience lorsque tu as un accès au dossier en vue seule
Les utilisateurs ayant un accès visuel au fichier auront la possibilité de le recharger. Parfois, le rechargement du fichier libérera suffisamment de mémoire pour que vous puissiez continuer à le visualiser.
Expérience lorsque vous disposez d’un accès à la modification du fichier
Les utilisateurs ayant un accès en mode modification au fichier auront la possibilité de recharger le fichier. Parfois, le rechargement du fichier libérera suffisamment de mémoire pour que vous puissiez continuer à le visualiser.
Sinon, vous serez invité à passer en mode de récupération si vous utilisez une version de navigateur compatible et que vous avez un accès de modification au fichier. Le mode de récupération est pris en charge par les versions suivantes du navigateur :
- Firefox 89+
- Chrome 83+
- Safari 15.2+
- Microsoft Edge 93+
Si la version actuelle de votre navigateur n'est pas compatible, il vous sera demandé de mettre à jour la version du navigateur ou d'ouvrir le fichier dans l'application de bureau.
Mode de récupération
Le mode de récupération vous permet de réduire l'utilisation de la mémoire et de remettre votre fichier dans un état modifiable sans perdre votre travail.
Lors du passage en mode de récupération, toutes les pages du fichier sont chargées et la fenêtre modale de gestion de la mémoire s'ouvre. L’utilisation de la mémoire doit être réduite à moins de 90 % pour quitter le mode de récupération.
Remarque : le fichier sera rechargé une fois que vous auriez quitté le mode de récupération.
Astuces pour réduire la mémoire
Un certain nombre de facteurs contribuent à la mémoire. Malheureusement, il n'existe pas de nombre spécifique de calques, de données ou de ressources à surveiller. Cela signifie que nous ne pouvons pas vous proposer une approche unique pour réduire la mémoire. Si vous constatez une utilisation élevée de la mémoire, les solutions suivantes vous aideront à résoudre le problème.
Calques cachées
Les couches cachées contribuent largement à l'utilisation de la mémoire. En effet, Figma a besoin de stocker et de restituer des informations sur ces calques, même lorsqu'elles ne sont pas visibles.
Solutions
Utilisez les propriétés des composants booléens
Les propriétés booléennes sont un type de propriété de composant qui vous permet d'activer ou de désactiver une propriété, telle que la visibilité d'une couche. Bien que cette méthode utilise des calques masqués, celle-ci réduit le nombre de variantes et de calques nécessaires dans un design system, améliorant ainsi l'utilisation de la mémoire du fichier.
| Avant | Après |
|---|---|
|
Notre ensemble de composants de bouton comporte deux variantes pour représenter les deux états du bouton : avec une icône et sans icône. Ce composant comporte au total sept calques (un calque de jeu de composants, deux calques de variantes et quatre calques imbriqués). |
Nous n'avons besoin que d'un composant et d'une propriété booléenne appliquée à l'icône pour faire basculer sa visibilité. Cette version comporte au total trois calques (un calque de composants et deux calques imbriqués). |
Conseil ! Pour supprimer un calque, sélectionnez-le dans le plan de travail ou dans le panneau Calques de la barre latérale gauche. Appuyez ensuite sur la touche Supprimer ou Retour arrièrepour le supprimer.
Remarque : Figma charge les calques uniquement sur les pages que vous ouvrez. La navigation entre les pages nécessite le chargement de tout contenu restant sur ces pages, ce qui peut entraîner une augmentation de la mémoire et du nombre de calques dans le panneau de la mémoire.
Grandes bibliothèques de composants ou de variantes
Le nombre de composants et de variantes peut contribuer à l'utilisation de la mémoire. Vous pouvez toujours rencontrer des limites de mémoire si vous n'avez que quelques ensembles de composants, mais ils ont des milliers de variantes.
Solutions
Utiliser les propriétés des composants
Si une bibliothèque comporte un grand nombre de variantes ou si un fichier est proche de la limite de mémoire, envisagez d'utiliser les propriétés des composants pour réduire le nombre de composants et de variantes nécessaires.
Cela améliore l'utilisation de la mémoire car Figma charge tous les composants d'un ensemble de composants. Cela vous permet de passer rapidement d'une variante à l'autre. Si vous utilisez des propriétés des composants et avez moins de variantes, Figma doit charger moins de composants.
Séparez les fichiers de bibliothèque volumineux
Si votre fichier de bibliothèque est toujours proche de la limite de mémoire après avoir effectué ces ajustements, vous devrez peut-être le diviser en bibliothèques plus petites.
Déplacez les composants publiés et les ensembles de composants entre les fichiers, sans rompre les liens vers les instances. Il s'agit d'un processus en deux parties : coupez et collez les composants, puis publiez les modifications.
Il existe de nombreuses façons de diviser votre bibliothèque. La meilleure approche est celle qui répond aux besoins des utilisateurs de votre bibliothèque. Pour plus de conseils sur la façon d'organiser vos fichiers de bibliothèque, consultez Leçon 3 de notre cours Introduction aux design systems.
Fichiers volumineux contenant plusieurs images et pages
Si vous avez un fichier volumineux avec un nombre important de pages, ou beaucoup d'images à haute résolution, vous pouvez rencontrer des problèmes de performance ou de mémoire.
Si cela provoque des plantages au niveau du navigateur, Figma n'affichera pas les bannières d'utilisation de la mémoire. C'est un élément à prendre en compte lorsque vous travaillez sur des fichiers contenant un grand nombre d'images haute résolution.
Solutions
Divisez les gros fichiers en fichiers plus petits
Il existe différentes approches pour organiser les fichiers de votre bibliothèque. Pour commencer, créez de nouveaux fichiers pour chaque page de votre fichier actuel. Pour plus de conseils sur la façon d'organiser vos fichiers de bibliothèque, consultez la leçon 3 de notre cours Introduction aux systèmes de conception.
- Créez un nouveau fichier dans votre compte Figma. Dans un autre onglet, ouvrez le fichier original et visualisez la page que vous souhaitez déplacer.
- Utilisez le raccourci Sélectionner tout pour sélectionner tout ce qui se trouve sur la page.
- Mac : Commande ⌘ A
- Windows : Ctrl + A
- Utilisez le raccourci Copier pour copier le contenu de la page dans votre presse-papiers.
- Mac : ⌘ Commande C
- Windows : Ctrl + C
- Retourner au nouveau fichier dans un onglet séparé. Utilisez le raccourci Coller pour coller le contenu de votre presse-papiers :
- Mac : Commande ⌘ V
- Windows : Ctrl + V
- Dans le fichier original : ouvrez la liste des pages dans la barre latérale gauche. Effectuez un clic droit sur le nom de la page et sélectionnez Supprimer la page.
Compressez vos fichiers images
Le plugin Downsize vous permet de compresser de grandes images sur le plan de travail.
Actifs importants
L'importation de grandes quantités de texte, d'images ou de vecteurs complexes comportant de nombreux points peut également avoir un impact sur votre utilisation de la mémoire. Vous devrez peut-être réduire le nombre ou la qualité des ressources que vous importez, ou réduire la taille des fichiers que vous importez :
- Divisez les fichiers volumineux en fichiers plus petits.
- Compressez les images à haute résolution.
- Importer des SVG complexes en plusieurs parties.
Découvrez comment importer des fichiers dans Figma →
Remarque : le décodage d'images utilise de la mémoire JS, qui n'est pas incluse dans le pourcentage de mémoire ou les alertes de bannière. Les images peuvent toujours contribuer à la mémoire WASM lorsqu'elles sont rendues sur la toile.
Accéder aux fichiers verrouillés
Si votre fichier atteint 100 % de votre limite de mémoire, Figma verrouille le fichier et vous informe qu'il n'y a plus de mémoire disponible. Il y a deux choses que vous pouvez essayer :
- Restaurez le fichier vers une version qui utilise moins de mémoire. Si vous ne pouvez pas accéder à l'historique des versions à partir du fichier, vous pouvez toujours effectuer cette action dans le navigateur de fichiers.
- Si vous voyez un écran blanc, il se peut que votre fichier se soit écrasé à cause de la mémoire de l'image. Dans cet état, vous ne pourrez pas accéder au fichier ou à l'historique des versions du fichier. Vous pouvez essayer d'ouvrir le fichier avec les images en mode vignette ↓.
Restaurer une version précédente
- Ouvrez le projet où se trouve le fichier.
- Maintenez les touches de modification enfoncées et cliquez sur le fichier :
- Mac : ⇧ Maj ⌃ Control ⌥ Option
- Windows : Alt Maj
- Sélectionnez Restore from version.
- Cliquez sur Restaurer à côté de la version appropriée.
Ouvrez le fichier en mode miniature uniquement
Vous pourrez peut-être accéder à nouveau au fichier en utilisant le mode vignette uniquement. Cela charge le fichier contenant des images en basse résolution.
Pour accéder au mode vignette uniquement, ajoutez un paramètre de requête ?thumbnails-only=1 (également appelé chaîne de requête) à la fin de l'URL du fichier.
- Si le lien n'inclut pas de paramètres existants, le lien se termine par le nom du fichier. Vous pouvez ajouter un nouveau
?thumbnails-only=1chaîne de requête à la fin du lien. L'URL finale ressemblera à ceci :https://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?thumbnails-only=1 - Si le lien a déjà des paramètres, comme un paramètre
?node-id, vous devez ajouter à la place&thumbnails-only=1. Utilisez un&pour ajouter des paramètres à une chaîne de requête. L'URL finale ressemblera à ceci :http://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?node-id=211-2665&t=D5QnxlouJ9sKF1dM-0&thumbnails-only=1
Vous pouvez maintenant essayer n'importe quelle approche pour réduire l'utilisation de la mémoire ↑.