O Dev Mode permite que os desenvolvedores vejam quando uma estrutura ou componente foi editado pela última vez e comparem as alterações feitas em diferentes pontos do histórico de versões. Como o handoff entre o design e o desenvolvimento pode ser iterativo, a possibilidade de comparar as alterações e o histórico de versões traz clareza ao processo. Com a comparação de alterações, você pode sempre acompanhar as atualizações mais recentes e manter o código de produção preciso.

Compare alterações

Se uma estrutura ou componente tiver sido atualizado desde a última vez em que foi visualizado, você poderá comparar o histórico de versões. Você também pode comparar componentes separados ou instâncias com substituições de design com o componente base. 

1. Selecione uma estrutura ou um componente de nível superior.

   Dica: mantenha pressionado Shift e clique para selecionar dois componentes na tela e comparar um com o outro.

2. Na aba de inspeção da barra lateral direita, clique em Compare changes.

• A

  Histórico de versões

  Visualize uma linha do tempo do histórico do arquivo, incluindo versões salvas e salvas automaticamente. Clique em uma versão anterior para comparar com a versão atual. O histórico de versões só é mostrado ao comparar uma estrutura de nível superior ao longo do tempo.

• B

  Visualizar camadas editadas

  Em Camadas, você pode visualizar como as camadas individuais de um ativo foram alteradas ao longo do tempo. As alterações de camada são rotuladas da seguinte forma:

  • Editada: a camada foi editada entre a versão atual e a selecionada
  • Adicionada: a camada foi adicionada entre a versão atual e a selecionada
  • Excluída: a camada foi excluída entre a versão atual e a selecionada

  Clicar em uma camada na lista aumenta o zoom da camada selecionada na visualização lado a lado ou de sobreposição.

• C

  Lado a lado

  Uma visualização lado a lado da versão selecionada e da versão atual de um recurso. Ajuste as configurações de zoom do modal usando os botões de aumentar e diminuir o zoom à direita.

• D

  Sobreposição

  Uma visualização de sobreposição da versão atual do frame sobre a versão selecionada é útil para destacar as edições menores. Use o controle deslizante à direita para ajustar a transparência da estrutura atual ou clique em para alternar sua visibilidade. Ajuste as configurações de zoom do modal usando os botões de aumentar e diminuir o zoom à direita.

• E

  Comparar código

  Ao selecionar uma camada editada, você pode visualizar o código atualizado entre a versão anterior e a versão atual. Isso é útil para garantir que sua base de código esteja alinhada com os designs mais recentes.

  Use o menu suspenso para selecionar seu idioma preferido para o painel de códigos e clique em para selecionar sua unidade preferida.

  Saiba mais sobre como usar trechos de códigos no Dev Mode →

• F

  Comparar propriedades

  Quando você seleciona uma camada editada, as propriedades atualizadas são exibidas, juntamente com os valores atribuídos da versão anterior e da versão atual.

Comparar alterações na visualização focada

Quando estiver focado em um design no Dev Mode, você poderá aproveitar o histórico de versões na visualização focada para comparar as alterações. Quando você compara as alterações, a interface é a mesma detalhada em Compare changes.

Para comparar alterações enquanto estiver na visualização focada:

1. Abra um arquivo de design do Figma.
2. No canvas, para o design em que você deseja focar, clique no indicador de status de desenvolvimento e selecione Show in focus view.
   Enquanto nada estiver selecionado, a visualização focada exibirá o histórico de versões no lado direito da visualização.
3. Para a versão que você deseja comparar com a mais recente, clique em ... e selecione Compare to latest version.
   
4. Outra opção é clicar em Copy link para obter um link para a visualização focada que você pode compartilhar com outras pessoas.

Saiba mais sobre a visualização focada →