Antes de começar
Quem pode usar esse recurso
Disponível em qualquer equipe ou plano.
Qualquer pessoa que tenha acesso do tipo permissão para editar um arquivo pode criar protótipos.
Nos protótipos, queremos que nossas interações sejam o mais parecidas possível com a coisa real, especialmente ao alternar entre vários quadros.
O gerenciamento de estados nos permite manter as propriedades e os estados dos objetos ao navegar nos quadros e entre eles ao reproduzir protótipos.
O gerenciamento de estado pode ser usado com componentes interativos, posição de rolagem e vídeos em protótipos de três maneiras:
- Memorização de estado: Preserve o estado de um objeto ao sair e retornar ao quadro
- Compartilhamento de estado: Compartilhe estados entre objetos correspondentes em diferentes quadros
- Reset de estado: Redefina os estados dos objetos em cada interação
Para compartilhar estados entre quadros, os objetos devem corresponder.
Atualizações para preservar a posição de rolagem
Fizemos atualizações na configuração Preservar posição de rolagem. A posição de rolagem de quadros de nível superior agora é preservada automaticamente, desde que os nomes dos quadros de nível superior tenham nomes idênticos ou um prefixo compartilhado. Renomeie camadas em massa para adicionar um prefixo compartilhado.
Saiba mais sobre preservar posição de rolagem →
Memorização de estado
Quando você navega de um quadro para outro, os objetos reabrem em seu último estado definido.
Componentes interativos
O Figma memoriza a última variante definida do seu componente interativo.
Por exemplo, você pode ter um componente interativo para uma caixa de seleção. Se você definir o componente interativo para a variante marcada, o Figma lembrará o estado dessa variante. Isso significa que, se você sair desse quadro e voltar a ele mais tarde, o componente interativo permanecerá no estado marcado.
Posição de rolagem
O Figma memoriza sua posição de rolagem.
Por exemplo, você pode ter um mapa com rolagem horizontal e vertical ativada. Se você rolar até um local específico no mapa, o Figma lembrará a posição da sua rolagem. Isso significa que, se você sair desse quadro e voltar a ele posteriormente, você permanecerá rolado na mesma localização no mapa.
Vídeos
O Figma memoriza o estado de reprodução de qualquer vídeo utilizado em seus protótipos.
Por exemplo, você pode começar a reproduzir um vídeo em um quadro. Quando você atingir a marca de 5 segundos, navegue para outro quadro. Se você voltar para o quadro original, o vídeo continuará a ser reproduzido a partir da marca de 5 segundos, exatamente de onde você parou.
Compartilhamento de estado
Quando você navega entre quadros com objetos correspondentes, o estado do primeiro objeto é compartilhado com o segundo objeto.
Componentes interativos
O Figma compartilha estados entre componentes interativos correspondentes. Os estados só são compartilhados após a interação inicial com o componente.
Por exemplo, você pode ter um componente interativo para uma caixa de seleção, com uma instância da variante desmarcada em cada um dos dois quadros. Quando você reproduz seu protótipo, você marca a caixa de seleção no primeiro quadro. Então, ao navegar para o segundo quadro, o componente correspondente no segundo quadro também será definido para a variante marcada.
Posição de rolagem
O Figma compartilha a posição de rolagem entre objetos correspondentes.
Por exemplo, você pode ter um mapa com rolagem horizontal e rolagem vertical habilitada em cada um dos dois quadros. Se você rolar para uma localização específica no mapa e então navegar para o segundo quadro, o objeto de mapa correspondente no segundo quadro será rolado para a mesma localização.
Vídeos
O Figma compartilha o estado de reprodução de vídeo entre objetos correspondentes.
Por exemplo, você pode começar a reproduzir um vídeo em um quadro. Quando você navega para um segundo quadro com um objeto de vídeo correspondente, o vídeo no segundo quadro continuará reproduzindo de onde você parou.
Reset de estado
Quando os usuários estão navegando pelos protótipos, o estado de um objeto pode precisar ser resetado em interações específicas. Os estados dos objetos devem ser resetados na interação que navega para o próximo quadro.
- Clique em uma conexão de protótipo para abrir o painel Detalhes da interação.
- Na seção gerenciamento de estado do painel, marque qualquer uma das seguintes configurações:
- Reset da posição de rolagem: Redefinir para a posição de rolagem original
- Reset do estado do componente: Redefinir para o estado original do componente, conforme definido na tela de trabalho
- Reset do estado do vídeo: Reinicie o vídeo do início e redefina para seu estado de reprodução original
Nota: As configurações de redefinição só aparecem no painel Detalhes da interação se forem relevantes para a interação atualmente selecionada. Por exemplo, se a interação se conecta a um quadro sem vídeo, não haverá uma configuração de Reset do estado do vídeo.
Componentes interativos
Redefina estados de componentes interativos para seu estado original, conforme definido na tela de trabalho.
Por exemplo, você pode ter um componente interativo para uma barra de carregamento com variantes vazia e completa.
Você quer que a barra de carregamento reinicie na variante vazia quando o usuário clica no botão de recarregar, então você marca a configuração Redefinir estado do componente na interação do botão.
Posição de rolagem
Use Redefinir posição de rolagem para retornar à localização original de rolagem, conforme definido na tela de trabalho.
Por exemplo, você pode ter um mapa com rolagem horizontal e vertical ativada. Você quer retornar à localização original de rolagem ao navegar entre quadros, então marque a configuração Redefinir posição de rolagem na interação.
Vídeos
Reinicie o vídeo do início e redefina para seu estado de reprodução original, conforme definido na tela de trabalho.
Por exemplo, você pode começar a reproduzir um vídeo em um quadro. Quando você atingir a marca de 5 segundos, navegue para outro quadro. Quando você retorna ao quadro original, quer reiniciar o vídeo desde o início, então você marca a configuração Redefinir estado do vídeo na interação.
Objetos correspondentes
Para compartilhar estados entre quadros, os objetos devem corresponder.
Saiba mais sobre objetos correspondentes →
Para identificar objetos que correspondem entre quadros:
- Abra a aba Protótipo na barra lateral direita.
- Passe o mouse sobre um objeto ou camada na tela de trabalho.
- O Figma destacará o objeto correspondente em qualquer outro quadro em que ele exista.
Objetos aninhados
Os objetos são considerados correspondentes se tiverem o mesmo nome de camada e o mesmo conjunto de pais em todos os quadros de nível superior.
Dica: Se você não quiser que o estado seja compartilhado entre dois objetos, pode renomeá-los para que não correspondam mais.
Quadros de nível superior
Quadros de nível superior são quadros colocados diretamente na tela de trabalho. Como os quadros de nível superior não têm objetos pai, você pode combiná-los fazendo uma das seguintes ações:
- Use nomes de camada idênticos
- Use nomes de camada com strings correspondentes e barras diagonais. Por exemplo, um quadro de nível superior com o nome
Checkout / 1corresponderá a outro quadro de nível superior com o nomeCheckout / 2, já que tudo antes da barra é idêntico.
Dica: Precisa renomear camadas? Aprenda a renomear camadas em massa →
Atualize para o novo gerenciamento de estado
O Figma foi atualizado para seus controles atuais de gerenciamento de estado em 24 de maio de 2023.
Para interações de protótipos criados antes de 24 de maio de 2023:
- Componentes interativos não podem compartilhar estados entre quadros
- Objetos de rolagem não podem memorizar seu estado ao serem reabertos
- Objetos de rolagem podem compartilhar estados entre quadros somente se a configuração Preservar posição de rolagem estiver marcada
Nota: Em novas interações, a posição de rolagem é compartilhada automaticamente, desde que os nomes dos objetos correspondam entre os quadros.
Saiba mais sobre preservar posição de rolagem e transitar para o novo gerenciamento de estado →
Para atualizar quaisquer interações antigas para os novos controles de gerenciamento de estado:
- Clique em uma conexão de protótipo para abrir o painel Detalhes da interação.
- Clique em Atualizar.
Dica: Uma vez que você atualiza uma interação, uma mensagem de sucesso aparece na parte inferior da tela de trabalho. Clique no botão Atualizar tudo na faixa da mensagem de sucesso para atualizar todas as outras interações no arquivo.