Vídeo tutorial: proteger incorporações de protótipos do Figma com senha

Este vídeo mostra como adicionar proteção por senha às incorporações dos seus protótipos do Figma com o plugin Crypto.

O recurso “Live Embed” do Crypto funciona assim: ele coloca a incorporação pública do seu protótipo do Figma atrás de uma URL segura e de uma senha que você pode compartilhar. Quem recebe pode ver seus designs no app web do Crypto, sem precisar de uma conta do Figma.

A URL subjacente do Figma continua pública. Por causa da forma como os links de compartilhamento funcionam no Figma, o Crypto só consegue envolver a incorporação de uma URL pública do Figma em uma URL protegida por senha. Isso significa que qualquer pessoa com a URL subjacente do Figma ainda consegue vê-la. Se precisar revogar o acesso, exclua a URL protegida por senha no plugin Crypto e/ou mude as permissões do arquivo do Figma para only people invited to this file.

Mudar para o modo de protótipo

Para começar a usar este recurso, selecione Figma Prototype (Live Embed) na barra de ferramentas do plugin Crypto.

É preciso ter frames do Figma de nível superior. Para fazer upload de um protótipo do Figma, a página do Figma precisa ter pelo menos um “frame pai”, ou seja, um frame localizado diretamente abaixo da página.

Copiar a URL do Figma que você vai usar

Definir as opções do protótipo

Ao criar links protegidos por senha para seus protótipos do Figma, você pode escolher algumas opções de configuração:

Opções de escala

Este menu suspenso permite escolher como o protótipo é dimensionado no navegador, com as seguintes opções:

• 100%: exibir em tamanho real
• Fit: reduzir para caber
• Fill: reduzir ou ampliar para preencher
• Reduzir para caber na largura (padrão)

Hotspots

Ative a opção Hotspots para que o protótipo revele as áreas clicáveis (hotspots) dos seus designs quando o usuário clicar pela tela. Com essa opção desativada, nenhuma dica de área clicável é exibida.

Barra lateral

Ative a opção Sidebar para que o painel de navegação lateral do seu protótipo do Figma apareça no navegador. Com essa opção desativada, o painel não é exibido para o usuário.

Criar a URL do protótipo protegida por senha

A URL subjacente do Figma continua pública. Por causa da forma como os links de compartilhamento funcionam no Figma, o Crypto só consegue envolver a incorporação de uma URL pública do Figma em uma URL protegida por senha. Isso significa que qualquer pessoa com a URL subjacente do Figma ainda consegue vê-la. Se precisar revogar o acesso, exclua a URL protegida por senha no plugin Crypto e/ou mude as permissões do arquivo do Figma para only people invited to this file.

Para criar o link do protótipo protegido por senha, clique em Share Prototype URL e depois no botão Create Prototype URL.

Depois que o upload terminar, você pode copiar a URL segura e a senha para ver a incorporação do seu protótipo do Figma no navegador, pelo app web do Crypto.

Cada upload pertence à página do Figma em que foi iniciado. Ao trocar de página, o plugin carrega as configurações e o histórico de versões daquela página; volte à página original para encontrar um upload concluído nela. Espere um upload ou uma atualização de configurações em andamento terminar antes de iniciar outro na mesma página.

Você pode acessar a URL e a senha no plugin depois. Se precisar copiar a URL e a senha de novo mais tarde, clique no botão Share Prototype URL na barra de ferramentas do plugin Crypto. A URL e a senha do protótipo aparecem na seção Secure URL Details, de onde você pode copiá-las.

A URL subjacente do Figma continua pública. Por causa da forma como os links de compartilhamento funcionam no Figma, o Crypto só consegue envolver a incorporação de uma URL pública do Figma em uma URL protegida por senha. Isso significa que qualquer pessoa com a URL subjacente do Figma ainda consegue vê-la. Se precisar revogar o acesso, exclua a URL protegida por senha no plugin Crypto e/ou mude as permissões do arquivo do Figma para only people invited to this file.

Atualizar as configurações da URL do protótipo

Às vezes você vai querer atualizar a URL do protótipo do Crypto que já criou e enviou para alguém. Para isso, clique no botão Share Prototype URL na barra de ferramentas do plugin Crypto, altere a URL do arquivo do Figma ou as opções do protótipo conforme necessário e clique no botão Update Existing Prototype URL.

Alterar a senha da URL do Crypto

Por padrão, o plugin Crypto gera uma senha aleatória segura para você. Se quiser usar uma senha personalizada, ative a opção Change Password na seção Set Password for Crypto URLs on this page do painel de configurações de upload, digite a nova senha no campo (são necessários no mínimo 6 caracteres) e clique no botão Set New Password. Isso atualiza a senha da URL do Crypto desta página do Figma.

Designs estáticos e URLs de protótipo compartilham a mesma senha em cada página do Figma. Se você fizer upload de designs estáticos e de um protótipo na mesma página do Figma, lembre-se de que cada página do Figma tem uma única senha para as duas URLs. Alterar a senha de uma também altera a da outra.

Atualizar a senha bloqueia o acesso de quem tinha a senha anterior. Depois da atualização, quem tinha a senha anterior não consegue mais ver sua URL. Se essas pessoas ainda precisarem de acesso, compartilhe a nova senha com elas.

Excluir a URL do protótipo

Se precisar revogar o acesso, exclua a URL protegida por senha no plugin Crypto e/ou mude as permissões do arquivo do Figma para only people invited to this file.

Ver protótipos do Figma

Entrar e interagir com o protótipo do Figma protegido por senha

Depois de abrir no navegador a URL gerada pelo plugin Crypto para Figma, cole a senha gerada pelo plugin. Em seguida, clique no botão Login para se autenticar e ver os designs enviados.

Como o app web do Crypto incorpora a incorporação nativa do protótipo do Figma, a interação com o protótipo funciona exatamente como quando você o vê no Figma. Para saber mais, consulte o artigo oficial da ajuda do Figma Preview designs and prototypes in Presentation View.

Usar os atalhos de teclado do protótipo do Figma

Como o app web do Crypto incorpora a incorporação nativa do protótipo do Figma, os atalhos do protótipo são exatamente os mesmos de quando você vê o protótipo no Figma. Para ver esses atalhos de teclado no app web do Crypto, passe o mouse sobre o ícone Keyboard na barra de ferramentas.

Atalhos de teclado disponíveis ao ver o protótipo

• Alterar o tamanho da visualização (Z)
• Ativar ou desativar a tela cheia (F)
• Reiniciar o protótipo (R)
• Tela anterior (←)
• Próxima tela (→)
• Avançar o protótipo (Enter)

Mostrar ou ocultar os ícones da barra de ferramentas

Se não quiser ver a barra de ícones do app web do Crypto enquanto olha seu protótipo, clique no botão de ícone Visibility na barra de ferramentas do app web do Crypto. Esse botão mostra ou oculta os ícones. Para mostrar a barra de ferramentas de novo, passe o mouse sobre o botão de ícone Visibility para revelá-lo e clique nele outra vez.

Volte o foco para a incorporação do Figma. Depois de mostrar ou ocultar os ícones ou de usar outro controle da barra de ferramentas do Crypto, clique de novo no protótipo do Figma antes de usar os atalhos de teclado dele.