Se estiver usando o UI3, o novo design do Figma, algumas partes deste artigo podem não corresponder ao que você vê no produto atualmente. Agradecemos a sua paciência enquanto fazemos as atualizações. Saiba mais sobre a reformulação do Figma →
Antes de você começar
Quem pode usar este recurso
Disponível em todos os planos
Qualquer pessoa com acesso de edição pode entrar no modo de recuperação e reduzir o uso de memória em um arquivo de design.
Se estiver trabalhando com arquivos ou bibliotecas grandes no Figma, talvez você enfrente limitações de memória. Neste artigo, descreveremos algumas das maneiras de adaptar seus arquivos para que funcionem dentro dessas limitações.
- O que é memória
- Explorar os alertas de uso de memória
- Reduzir o uso de memória em arquivos
- Acessar arquivos bloqueados ou com falhas
O que é memória?
Usamos o termo geral "memória" ao longo deste artigo para explicar e resolver os alertas de memória que você verá no Figma.
Neste artigo, nos referimos a um tipo específico de memória: a memória WASM (WebAssembly Memory). O Figma usa a memória WASM para renderizar camadas e objetos no canvas e oferecer uma experiência multiplayer colaborativa.
Cada navegador tem seu próprio limite de memória ativa. Ele pode variar de acordo com o dispositivo, mas o entendimento geral é que há um limite de memória ativa de 2 GB por aba do navegador.
Como o Figma foi desenvolvido com base em tecnologias de navegador, essas limitações se aplicam mesmo quando você usa os aplicativos Figma para desktop.
O Figma emprega alguns métodos para tentar garantir que você não fique sem memória enquanto trabalha. Por exemplo, o Figma carrega páginas e camadas em um arquivo somente quando necessário para ajudar a manter o uso da memória o mais baixo possível. No entanto, como explicaremos mais adiante neste artigo, algumas situações ainda podem fazer com que um arquivo fique sem memória.
Gerenciar memória
A Figma mede o uso da memória como uma porcentagem da memória disponível em seu navegador ou dispositivo. O uso da memória só é rastreado nas páginas que foram carregadas em um arquivo.
Para visualizar indicadores de uso de memória do conteúdo do seu arquivo:
- Selecione o menu principal e passe o mouse sobre Visualizar.
- Selecione Uso de memória. O uso da memória aparecerá como um medidor na barra lateral esquerda.
- Clique em Gerenciar memória.
- No modal Gerenciar memória, ative a opção Exibir memória no painel de camadas. Isso permite que você visualize o volume de memória que suas camadas e componentes estão usando.
Dica: você também pode ver dicas de redução de memória no modal, que indicam as práticas recomendadas para gerenciar a memória do seu arquivo.
Alertas de uso de memória
Para que você sempre tenha informações sobre o uso da memória e sobre qualquer problema que possa surgir, o Figma exibe banners e alertas em determinados limites:
Observação: talvez você não veja todos esses alertas em ordem. Se o uso da memória aumentar em um período curto, talvez você não receba um alerta.
Quando você atingir 60% do limite de memória do navegador, o Figma mostrará um bloco de alerta amarelo na barra lateral esquerda.
Acesso somente visualização
Acesso de edição
Neste ponto, você pode ter problemas de desempenho, como lentidão no modo multiplayer, ao interagir com o arquivo.
Quando você atingir 75% do limite de memória, o Figma mostrará um bloco de alerta vermelho na barra lateral esquerda. Você não pode ignorar esse alerta.
Acesso somente visualização
Acesso de edição
Você ainda pode fazer alterações no arquivo, mas recomendamos tomar medidas imediatas para proteger seu trabalho. Não reduzir a memória nesse momento aumentará a possibilidade de perda de dados.
Clique em Saiba mais para ver sugestões para reduzir o uso da memória ou siga as dicas abaixo ↓
Se o arquivo atingir 100% do limite de memória, o Figma bloqueará o arquivo e informará que não há memória disponível.
Experiência quando você tem acesso somente visualização ao arquivo
As pessoas com acesso de visualização ao arquivo terão a opção de recarregá-lo. Às vezes, recarregar o arquivo libera memória suficiente para que você possa continuar com a visualização.
Experiência quando você tem acesso de edição ao arquivo
As pessoas com acesso de edição ao arquivo terão a opção de recarregá-lo. Às vezes, recarregar o arquivo libera memória suficiente para que você possa continuar com a visualização.
Caso contrário, você precisará entrar no modo de recuperação se estiver em uma versão de navegador compatível e tiver acesso de edição ao arquivo. O modo de recuperação é compatível com as seguintes versões de navegador:
- Firefox 89+
- Chrome 83+
- Safari 15.2+
- Microsoft Edge 93+
Se a versão atual do seu navegador não for compatível, você precisará atualizar a versão do navegador ou abrir o arquivo no app para desktop.
Modo de recuperação
O modo de recuperação permite reduzir o uso da memória e fazer o arquivo voltar a um estado editável sem perder o trabalho.
Ao entrar no modo de recuperação, todas as páginas do arquivo serão carregadas, e o modal de gerenciamento de memória será aberto. O uso da memória deve ser reduzido para menos de 90% para sair do modo de recuperação.
Observação: o arquivo será recarregado quando você sair do modo de recuperação.
Dicas para reduzir a memória
Há vários fatores que contribuem para a memória. Infelizmente, não há um número específico de camadas, dados ou recursos que você possa procurar. Isso significa que não podemos oferecer uma abordagem única para reduzir o uso de memória. Se estiver consumindo muita memória, experimente as seguintes soluções para ajudar a solucionar o problema.
Camadas ocultas
As camadas ocultas contribuem muito para o uso da memória. Isso ocorre porque o Figma precisa armazenar e renderizar informações sobre essas camadas, mesmo quando elas não estão visíveis.
Soluções
Usar propriedades booleanas de componentes
As propriedades booleanas são um tipo de propriedade de componente que permite ativar e desativar uma propriedade, como a visibilidade da camada. Embora esse método use camadas ocultas, ele reduz o número de variantes e camadas necessárias em um design system, melhorando o uso da memória do arquivo.
| Antes | Depois |
|---|---|
|
Nosso conjunto de componentes de botões tem duas variantes para representar os dois estados do botão: com ícone e sem ícone. Esse componente tem um total de sete camadas (uma camada de conjunto de componentes, duas camadas de variantes e quatro camadas aninhadas). |
Precisamos apenas de um componente e de uma propriedade booleana aplicada ao ícone para alternar sua visibilidade. Essa versão tem um total de três camadas (uma camada de componente e duas camadas aninhadas). |
Dica! Para excluir uma camada, selecione-a na tela ou no painel de camadas na barra lateral esquerda. Em seguida, pressione a tecla delete ou voltarpara removê-la.
Observação: o Figma só carrega camadas nas páginas que você abre. A navegação entre páginas exige o carregamento de qualquer conteúdo restante nessas páginas, o que pode resultar no aumento da memória e do número de camadas no painel de memória.
Grandes bibliotecas de componentes ou variantes
O número de componentes e variantes pode contribuir para o uso da memória. Você ainda poderá enfrentar limites de memória se tiver apenas alguns conjuntos de componentes, mas eles têm milhares de variantes.
Soluções
Usar propriedades do componente
Se uma biblioteca tiver um grande número de variantes ou um arquivo estiver próximo do limite de memória, considere o uso de propriedades de componentes para reduzir o número de componentes e variantes necessários.
Isso melhora o uso da memória porque o Figma carrega todos os componentes em um conjunto de componentes. Dessa forma, é possível alternar rapidamente entre as variantes. Se você usar propriedades de componentes e tiver menos variantes, o Figma precisará carregar menos componentes.
Dividir arquivos grandes da biblioteca
Se o arquivo da biblioteca ainda estiver próximo do limite de memória depois de fazer esses ajustes, talvez seja necessário dividi-lo em bibliotecas menores.
Mova componentes e conjuntos de componentes publicados entre arquivos, sem quebrar links para instâncias. Esse é um processo em duas partes: recortar e colar os componentes e, em seguida, publicar as alterações.
Há muitas maneiras diferentes de dividir uma biblioteca. A melhor abordagem é aquela que atende às necessidades dos usuários da sua biblioteca. Para saber como organizar seus arquivos de biblioteca, confira a Lição 3 do curso de introdução aos design systems.
Arquivos grandes com várias imagens e páginas
Se tiver um arquivo grande com um número significativo de páginas ou muitas imagens de alta resolução, você poderá enfrentar problemas de desempenho ou de memória.
Se isso causar falhas no navegador, o Figma não exibirá os banners de uso de memória. É bom levar isso em conta ao trabalhar em arquivos com um grande número de imagens de alta resolução.
Soluções
Dividir arquivos grandes em arquivos menores
Existem diferentes abordagens para organizar seus arquivos de biblioteca. Um bom ponto de partida seria criar novos arquivos para cada página do seu arquivo atual. Para saber como organizar seus arquivos de biblioteca, confira a Lição 3 do curso de introdução aos design systems.
- Crie um novo arquivo na sua conta do Figma. Em uma aba separada, abra o arquivo original e visualize a página que gostaria de mover.
- Use o atalho Selecionar tudo para selecionar tudo na página.
- Mac: ⌘ Command A
- Windows: Ctrl + A
- Use o atalho Copiar para copiar o conteúdo da página para a área de transferência.
- Mac: ⌘ Command C
- Windows: Ctrl + C
- Volte ao novo arquivo em uma aba separada. Use o atalho Colar para colar o conteúdo da área de transferência:
- Mac: ⌘ Command V
- Windows: Ctrl + V
- No arquivo original: abra a lista de páginas na barra lateral esquerda. Clique com o botão direito no nome da página e selecione Excluir página.
Compactar seus arquivos de imagem
O plugin Downsize permite compactar imagens grandes no canvas.
Assets grandes
A importação de grandes volumes de texto, imagens ou vetores complexos com muitos pontos também pode afetar o uso da memória. Talvez seja necessário reduzir o número ou a qualidade dos assets importados ou reduzir o tamanho dos arquivos importados:
- Divida arquivos grandes em arquivos menores.
- Compacte imagens de alta resolução.
- Importe SVGs complexos em partes menores.
Aprenda a importar arquivos para o Figma →
Observação: a decodificação de imagens usa memória JS, que não está incluída nos banners de porcentagem de memória ou alertas. As imagens ainda podem contribuir para o uso de memória WASM à medida que são renderizadas na tela.
Acessar arquivos bloqueados
Se o arquivo atingir 100% do limite de memória, o Figma bloqueará o arquivo e informará que não há memória disponível. Há duas coisas que você pode tentar fazer:
- Restaure o arquivo para uma versão que use menos memória. Se não for possível acessar o histórico de versões do arquivo, você ainda poderá executar essa ação no navegador de arquivos.
- Se aparecer uma tela branca, seu arquivo pode ter travado devido à memória de imagens. Nesse estado, não será possível acessar o arquivo nem o histórico de versões dele. Você pode tentar abrir o arquivo com imagens no modo miniatura ↓.
Restaurar a versão anterior
- Abra o projeto onde o arquivo está localizado.
- Mantenha pressionadas as teclas modificadoras e clique no arquivo:
- Mac: ⇧ Shift ⌃ Control ⌥ Option
- Windows: Alt Shift
- Selecione Restaurar da versão.
- Clique em Restaurar ao lado da versão apropriada.
Abrir arquivo no modo somente miniatura
Talvez seja possível acessar o arquivo novamente usando o modo somente miniatura. Dessa forma, o arquivo será carregado com imagens de baixa resolução.
Para acessar o modo somente miniaturas, adicione um parâmetro de consulta ?thumbnails-only=1 (também conhecido como string de consulta) ao final da URL do arquivo.
- Caso não inclua parâmetros existentes, o link terminará com o nome do arquivo. Você pode adicionar uma nova string de consulta
?thumbnails-only=1ao final do link. A URL final terá a seguinte aparência:https://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?thumbnails-only=1 - Se o link já tiver parâmetros, como um parâmetro
?node-id, você precisará adicionar&thumbnails-only=1. Use um delimitador&ao adicionar mais parâmetros a uma string de consulta. A URL final terá a seguinte aparência:http://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?node-id=211-2665&t=D5QnxlouJ9sKF1dM-0&thumbnails-only=1
Agora você pode experimentar qualquer abordagem para reduzir o uso de memória ↑.