Quem pode usar esse recurso

Compatível com qualquer equipe ou plano.

Qualquer pessoa com acesso de edição pode criar componentes interativos.

Qualquer pessoa com acesso de edição ao arquivo pode publicar componentes em uma biblioteca.

Está começando na prototipagem? Confira nosso Guia de prototipagem no Figma →

Os componentes interativos permitem que você crie interações de protótipo entre variantes em um conjunto de componentes. Sempre que você adiciona uma instância aos seus designs, essas interações estão configuradas e prontas para uso. Isso economiza tempo na criação de protótipos e evita um brainstorm desnecessário.

• Crie elementos interativos que mudem automaticamente entre variantes, como botões que alternam do estado hover para pressionado.
• Defina interações padrão a nível de componente e elimine a adivinhação ao construir protótipos.
• Reduza a quantidade de quadros e conexões necessárias para o protótipo de campos de entrada, como um conjunto de caixas de seleção ou interruptores.

Antes de interações de variantes

No exemplo abaixo, adicionamos todas as possíveis conexões para criar um protótipo de um quadro com cinco caixas de seleção. Sem componentes interativos, precisaríamos duplicar o mesmo quadro 32 vezes e criar 160 conexões entre eles para fazer um protótipo de todas as combinações possíveis.

Com interações de variantes

Com componentes interativos, só precisamos adicionar uma instância da caixa de seleção ao nosso design e suas interações de variantes estão prontas para usar. Quando visualizamos o protótipo, o Figma muda automaticamente entre as variantes marcadas e desmarcadas.

Criar componentes interativos

Você só pode criar componentes interativos usando variantes do mesmo conjunto de componentes. Se você não tiver um conjunto de componentes para trabalhar, precisará criar um primeiro. Saiba como criar variantes →

Criar interações de variante

Componentes interativos introduzem uma nova ação de protótipo: Mudar para.

1. Navegue até a aba Protótipo na barra lateral direita.
2. Clique no na caixa de delimitação do quadro e arraste-o para a variante de destino. Você também pode clicar no na seção de interação do painel de protótipo, configurar a ação para Mudar para e selecionar a variante de destino usando o menu suspenso.
3. Uma vez que a conexão foi feita, use o painel de Interação para ajustar o gatilho e a ação.

Você também pode usar a ação Mudar para em uma instância aninhada para alterar a variante do componente pai. No exemplo abaixo, uma variante de um conjunto de componentes está aninhada dentro de outro conjunto de componentes Expansível. Uma interação de Alterar para é colocada na instância aninhada para mudar o componente pai de sua variante Recolhida para sua variante Expandida.

Use componentes interativos

Adicione instâncias de componentes interativos aos seus designs como qualquer outro componente. A única diferença é que as instâncias já têm interações aplicadas para prototipagem.

Para usar componentes interativos:

1. Adicionar uma instância de um componente interativo a um quadro no seu design.
2. Quando estiver pronto para prototipar seu design, acesse a aba Protótipo na barra lateral direita.
3. Construa seu protótipo.
4. Visualizar designs e interações no modo de apresentação.

Adicionar mais interações

Quando você está construindo um protótipo com componentes interativos, pode adicionar interações regulares além das interações de variantes.

No exemplo abaixo, adicionamos uma interação com um gatilho hover (passar o mouse) sobre a interação da variante, que é acionada por um clique.

A ordem das interações dependerá se os gatilhos que você usa são os mesmos que os das interações de variantes. Saiba mais sobre gatilhos de protótipo →

Mesmos gatilhos

Quando ambas as interações usam o mesmo gatilho, o Figma usará a interação do protótipo e ignorará a interação da variante.

Por exemplo:

1. Um interruptor tem uma interação de variante de Ao clicar → Mudar para entre as variantes Ligado e Desligado em seu conjunto de componentes.
2. Você adiciona uma interação Ao clicar → Navegar para do interruptor para outro quadro.

O Figma navegará para o próximo quadro quando o usuário clicar no interruptor.

Gatilhos diferentes

Quando você adiciona uma interação com um gatilho diferente, o Figma executará tanto a interação quanto as interações de variante.

Por exemplo:

1. Um botão possui uma interação variante Ao passa o mouse → Mudar para entre as variantes padrão e hover.
2. Você adiciona uma interação Ao clicar → Navegar para ao construir seu protótipo.

O Figma Muda para a variante hover ao passar o mouse , depois Navega para o próximo quadro Ao clicar.

Visualizar interações

Ao usar componentes interativos, você verá seções separadas para Interações e Interações de variantes na aba Protótipo da barra lateral direita.

• Use a seção Interações para criar interações de protótipos e animações
• Use a seção Interações de variante para visualizar os detalhes da interação de uma variante

Editar interações de variantes

Você pode substituir uma interação de variante para uma instância em seu protótipo. Se você quiser editar uma interação de variante para o componente principal, precisará fazê-lo a partir do arquivo fonte.

Para acessar um conjunto de componentes a partir de uma instância e editar:

1. No modo Design, selecione a instância.
2. No topo da barra lateral direita, clique em .
3. Selecione Acessar componente principal.
4. Navegue até a aba Protótipo na barra lateral direita.
5. Faça suas edições nas interações da variante.

Gerenciamento de estado entre quadros

Seus protótipos provavelmente envolvem interações em vários quadros. Por padrão, o Figma utiliza controles de gerenciamento de estado para determinar como os componentes interativos funcionam em quadros.

• Memorização de estado: O Figma memoriza a última variante configurada do 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.

• Compartilhamento de estado: O Figma compartilha estados entre componentes interativos correspondentes. Os estados são apenas compartilhados após o componente ter sido inicialmente interagido.

  Por exemplo, você pode ter um componente interativo para uma caixa de seleção, com uma instância do componente em cada um dos dois quadros. Se você definir o componente interativo para a variante marcada no primeiro quadro e depois navegar para o segundo quadro, o componente correspondente no segundo quadro também será configurado para a variante marcada.

Se você não quiser manter os estados entre quadros, desmarque Redefinir estado do componente no painel Detalhes da interação da interação de protótipo.

Saiba mais sobre gerenciamento de estados de protótipos →

Usar com variáveis

Aplique variáveis a componentes interativos para expandir ainda mais seu poder.

Quando você clica em um componente interativo com uma variável aplicada:

• A variante é atualizada
• A variável é atualizada, o que, por sua vez, atualiza quaisquer outros elementos vinculados a essa mesma variável

Saiba mais sobre usar variáveis com componentes interativos →

Componentes interativos com fontes personalizadas

Ao usar fontes personalizadas para texto em componentes interativos, tenha em mente que os visualizadores de protótipos podem não ter essas fontes personalizadas instaladas em seus dispositivos. Nesses casos, o Figma usa informações em cache sobre variantes de componentes interativos para exibir fontes personalizadas corretamente ao apresentar um protótipo, mas pode substituir uma fonte por Inter quando não conseguimos preservar alterações de texto e alterar configurações de fonte para uma interação.

Por exemplo, digamos que uma pessoa visualizando seu protótipo não tenha a fonte personalizada usada instalada no dispositivo dela. Se uma instância de um componente interativo tiver substituições de texto:

• O Figma pode substituir a fonte personalizada por Inter se a mudança nas variantes incluir a alteração de uma configuração de fonte, como peso ou sublinhado.
• O Figma exibirá a fonte correta se a alteração na variante não estiver relacionada a uma configuração de fonte, como a cor de plano de fundo de um botão.

Recomendamos usar Google Fonts para protótipos que estão sendo compartilhados com visualizadores que podem não ter acesso a fontes personalizadas em seus designs. Se sua equipe estiver nos planos Organização ou Enterprise, você pode garantir que os visualizadores de protótipos tenham acesso a fontes personalizadas fazendo o upload delas como fontes compartilhadas.