Visualização em foco do Dev Mode

Ao utilizar a visualização Pronto para desenvolvimento no Dev Mode para explorar seções, estruturas e componentes que estejam prontos para desenvolvimento, frequentemente você precisará inspecionar designs específicos mais de perto. Para obter detalhes para designs que estejam prontos para desenvolvimento, use a visualização em foco do Dev Mode. Com a visualização em foco, você terá:

• Todas as mesmas ferramentas que normalmente você tem disponível na sua barra de ferramentas do Dev Mode.
• As mesmas abas Inspecionar e Plugins que você tem acesso na experiência total do Dev Mode.
• Um histórico de versão com descrições específicas do design que você está visualizando, que pode ser usado para comparar diferentes versões e ver as alterações ao longo do tempo.
• Uma maneira fácil de expandir e explorar as camadas de um determinado design que esteja pronto para desenvolvimento.
• A capacidade de marcar um trabalho como concluído para um design específico.

Para acessar a visualização em foco:

1. Abra um arquivo de design do Figma.

2. Clique em Pronto para desenvolvimento na barra lateral esquerda.

   A visualização Pronto para desenvolvimento será aberta, exibindo uma lista de todos os designs marcados com o status de desenvolvimento.

3. Clique no design que deseja focar.

Como alternativa:

1. Abra um arquivo de design do Figma.

2. Na tela, para o design que você gostaria de focar, clique no status de desenvolvimento e selecione Mostrar na visualização em foco.

   

3. Outra opção é clicar em Copiar link para visualização em foco para obter um link para o design em foco para que consiga compartilhar com outras pessoas.

A visualização em foco é aberta, exibindo o seguinte:

• O design que você gostaria de inspecionar aparece no centro da visualização em foco. Você pode usar suas ferramentas de Dev Mode para realizar ações como medir, anotar e comentar no design.
• As abas Inspecionar e Plugins, onde você pode realizar ações como gerar código, visualizar as propriedades do design, exportar ou fazer download de vários arquivos e executar plugins para Dev Mode.
• O botão Marcar como concluído, que você usa para confirmar que o trabalho de desenvolvimento do design foi finalizado.

Navegar

Na visualização em foco, o Figma fornece algumas maneiras de navegar por outras áreas do Dev Mode.

Para ir para a visualização Pronto para desenvolvimento, no canto superior esquerdo da visualização em foco, clique em Pronto para desenvolvimento.

Para ver o design no contexto da tela, no canto superior direito da visualização em foco, clique em e selecione Mostrar na página.

Para retornar à área da interface do Figma que você estava usando antes de entrar na visualização em foco, no canto superior direito da visualização em foco, clique em . Caso tenha entrado na visualização em foco pela tela, você retornará à posição que estava na tela. Caso tenha entrado usando a visualização Pronto para desenvolvimento ou usando um link, você voltará à visualização Pronto para desenvolvimento.

Explorar camadas

A visualização em foco oferece uma maneira fácil de explorar as camadas individuais de um determinado design. O painel de camadas da visualização em foco aparece quando você seleciona uma ou mais partes do design.

Painéis Inspecionar e Plugins

Os painéis Inspecionar e Plugins são iguais à sua experiência normal no Dev Mode, simplesmente limitados em escopo ao design que você está visualizando. Para aprender como usar os painéis, consulte o Guia para Dev Mode →

Histórico de versões

Similar ao histórico de versões disponível para arquivos, a visualização em foco inclui o histórico de versões com anotações que rastreia iterações de trabalhos no design.

Normalmente, o histórico de versões por todo o arquivo mostra cada versão de um arquivo, mas costuma existir muitas atividades e seu foco é sobretudo com o que foi alterado em uma estrutura ou seção em específico que esteja analisando e implementando. O histórico de versões na visualização em foco mostra versões e trabalhos da mesma forma que no histórico por todo o arquivo, mas é restringido apenas a versões que afetam o design específico que você abriu na visualização em foco.

Como os designers e desenvolvedores iteram em um design, eles atualizam o status e adicionam notas para descrever as alterações. Cada vez que o status é atualizado, uma entrada no histórico de versões é adicionada. Você também pode comparar diferentes versões para identificar as alterações entre cada iteração.

Você pode inspecionar versões mais antigas, copiar um link para uma versão em particular ou compará-la à última versão atualmente no seu arquivo. Saiba mais sobre comparação no Dev Mode →

Marcar como concluído

Para mostrar que o trabalho de desenvolvimento para um design foi feito, use o botão Marcar como concluído na parte superior da visualização em foco.

Quando um design é marcado como concluído, uma nova entrada é adicionada ao histórico de versões e o design permanece disponível na visualização Pronto para desenvolvimento para iterações posteriores.