Antes de você começar
Quem pode usar este recurso
Disponível nos planos Organização e Enterprise.
Usuários com acessos Full, Dev ou View podem acessar a visualização Ready for Dev.
Usuários com licenças Full ou Dev podem alterar os status.
Usuários que possuem licença completa ou de desenvolvedor podem acessar a visualização em foco.
Ao utilizar a visualização Ready for Dev no Dev Mode para explorar seções, quadros e componentes que estejam Ready for Dev, frequentemente você precisará inspecionar designs específicos mais de perto. Para obter detalhes para designs que estejam Ready for Dev, 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 Ready for Dev.
- A capacidade de marcar um trabalho como concluído para um design específico.
Para acessar o modo Foco:
- Abra um arquivo do Figma Design.
- Clique em Ready for Dev na barra lateral esquerda. A visualização Ready for Dev será aberta, exibindo uma lista de todos os designs marcados com o status de desenvolvimento.
- Clique no design que deseja focar.
Como alternativa:
- Abra um arquivo do Figma Design.
- Na tela, para o design que você gostaria de focar, clique no status de desenvolvimento e selecione Mostrar na visualização em foco.
- 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 Ready for Dev, no canto superior esquerdo da visualização em foco, clique em Ready for Dev.
Para ver o design no contexto da tela de trabalho, no canto superior direito do modo Foco, clique em e selecione Mostrar na página.
Para retornar à área da interface do Figma que você estava usando antes de entrar no modo Foco, no canto superior direito do modo Foco, clique em . Caso tenha entrado no modo Foco pela tela de trabalho, você retornará à posição em que estava na tela de trabalho. Caso tenha entrado usando a visualização Ready for Dev ou usando um link, você voltará à visualização Ready for Dev.
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 um quadro 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 Ready for Dev para iterações posteriores.