Vídeo tutorial: proteger designs estáticos do Figma com senha

Este vídeo mostra como adicionar proteção por senha aos seus designs do Figma com o plugin Crypto.

O recurso “Static Frames” do Crypto funciona assim: o plugin Crypto para Figma faz upload de imagens dos frames pai de nível superior da página atual do Figma e gera uma URL segura e uma senha que você pode compartilhar. Quem recebe pode ver seus designs no app web do Crypto, sem precisar de uma conta do Figma.

Para começar a usar este recurso, selecione Figma Designs (Static Frames) na barra de ferramentas do plugin Crypto.

Selecionar e desmarcar os frames para upload

Para começar, selecione Figma Designs (Static Frames) na barra de ferramentas do plugin Crypto.

Agora você pode selecionar os frames da página atual do Figma que quer usar como os designs compartilhados no seu link protegido por senha.

O Crypto carrega todos os “frames pai” da página atual do Figma no plugin, em uma lista de frames na qual você escolhe os designs que quer compartilhar. Clique na caixa de seleção ou na miniatura de qualquer frame para selecioná-lo (clique de novo para desmarcá-lo).

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

Destacar frames pai do Figma para selecioná-los

Para facilitar a seleção dos frames pai do Figma que você quer comparar, clique em um ou mais frames na página do Figma ou destaque-os: eles serão filtrados automaticamente na lista de frames disponíveis do plugin Crypto.

Atualizar os frames pai do Figma

Se o plugin Crypto já estiver aberto e você precisar adicionar ou remover frames pai na página atual do Figma, faça as alterações necessárias e clique no botão de ícone Refresh frames, ao lado da contagem de frames na barra de ferramentas do plugin Crypto.

Usar a ordenação rápida para ordenar os frames

Há várias formas de definir a ordem dos frames dos seus designs enviados:

Ordenar os frames pela ordem das camadas do Figma

A opção Sort frames by Layer Order ↓ (ou ↑ para a ordem inversa) ordena os frames automaticamente para seguir a ordem das suas camadas no Figma.

Ordenar os frames visualmente por colunas

As opções Sort frames Left to Right e Sort frames Right to Left ordenam os frames automaticamente para seguir a posição visual deles, por colunas, no seu design do Figma.

Ordenar os frames visualmente por linhas

As opções Sort frames Top to Bottom e Sort frames Bottom to Top ordenam os frames automaticamente para seguir a posição visual deles, por linhas, no seu design do Figma.

A ordenação visual tolera pequenas diferenças de alinhamento e usa a posição absoluta de cada frame no canvas, inclusive de frames aninhados em Sections diferentes do Figma.

Ordenar os frames pelo nome da camada no Figma

A opção Sort by Figma Layer Name ↓ (ou ↑ para a ordem inversa) ordena os frames automaticamente em ordem natural, de acordo com os nomes das camadas no Figma. Assim, um nome como Frame 2 aparece antes de Frame 10.

Ordenar os frames manualmente arrastando e soltando

Você pode ordenar os frames manualmente arrastando e soltando: clique e segure o mouse no ícone de arrastar, no fim de qualquer linha de frame, arraste para cima ou para baixo para mudar a posição dele entre os frames enviados e solte para confirmar a ordem. Essa ordem personalizada fica salva caso você alterne entre as opções de ordenação, e você pode recuperá-la clicando na opção Sort frames by Custom Order na caixa de seleção de ordenação.

Fazer upload dos seus designs

Quando estiver satisfeito com a seleção e a ordem dos frames, clique no botão Share Design URL na barra de ferramentas do plugin Crypto. Isso abre a janela de compartilhamento, onde você pode clicar no botão Securely Upload Designs para começar o upload das imagens.

Ao concluir o upload, você verá uma mensagem de confirmação com a sua URL segura e uma senha gerada.

Duplicar um arquivo do Figma também copia a URL e a senha dele. Para gerar dados diferentes para a cópia, digite o código Konami (Up, Up, Down, Down, Left, Right, Left, Right, B, A) com o plugin aberto. O Crypto cria uma nova URL e uma nova senha sem excluir a URL anterior.

Abrir a URL gerada

Depois que o upload terminar, você pode copiar a URL segura e a senha para ver no navegador, pelo app web do Crypto, os frames do Figma que você selecionou.

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 Design URL na barra de ferramentas do plugin Crypto e selecione uma versão enviada anteriormente na caixa de seleção Select Previous Version. A URL e a senha aparecem na seção Secure URL Details, de onde você pode copiá-las.

Fazer upload de uma nova versão da URL

Depois do primeiro upload dos seus designs, você pode continuar fazendo upload de novas URLs, que criam versões dos seus designs. Isso é útil para acompanhar as diferentes etapas de um design ou para criar URLs diferentes que mostram conjuntos de frames diferentes.

Para criar uma nova versão da URL no plugin Crypto, clique no botão Share Design URL na barra de ferramentas do plugin Crypto e depois no botão Upload New Version URL.

Ao concluir o upload, você verá uma mensagem de confirmação com a nova versão da URL segura e a senha.

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 Design URL na barra de ferramentas do plugin Crypto e selecione uma versão enviada anteriormente na caixa de seleção Select Previous Version. A URL e a senha aparecem na seção Secure URL Details, de onde você pode copiá-las.

Atualizar uma versão da URL do Crypto enviada anteriormente

Às vezes você vai querer atualizar uma versão anterior da URL do Crypto que já enviou para alguém. Para atualizar qualquer URL enviada anteriormente no plugin Crypto, clique no botão Share Design URL na barra de ferramentas do plugin Crypto, selecione uma versão enviada anteriormente na caixa de seleção Select Previous Version e clique no botão Update Version xxxxxxxx URL.

Isso substitui os designs dessa URL enviada anteriormente pelos novos frames que você selecionou no plugin Crypto. A URL e a senha não mudam, então quem já tinha esses dados continua podendo usá-los.

Ao concluir o upload, você verá uma mensagem de confirmação com a nova versão da URL segura e a senha.

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 Design URL na barra de ferramentas do plugin Crypto e selecione uma versão enviada anteriormente na caixa de seleção Select Previous Version. A URL e a senha aparecem na seção Secure URL Details, de onde você pode copiá-las.

Atualizar uma URL substitui os designs enviados anteriormente. Clicar no botão Update Version xxxxxxxx URL substitui todos os designs enviados na versão selecionada. Quem tiver a URL e a senha anteriores verá os designs atualizados ao acessar de novo a URL que recebeu.

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 uma versão da URL do Crypto

Você pode excluir qualquer versão das URLs seguras geradas no plugin Crypto: clique no botão Share Design URL na barra de ferramentas do plugin Crypto, selecione uma versão enviada anteriormente na caixa de seleção Select Previous Version e ative a opção I would like to delete the xxxxxxxx version URL. Com essa opção ativada, você pode clicar no botão Delete Version xxxxxxxx URL.

Você verá uma mensagem de confirmação informando que a versão selecionada foi excluída.

Não é possível desfazer a exclusão de uma versão da URL Clicar no botão Delete Version xxxxxxxx URL exclui todos os designs enviados na versão selecionada. Quem tiver essa URL não conseguirá mais ver esses designs. Mas você sempre pode fazer upload de uma nova versão e compartilhar a nova URL com essas pessoas depois de excluir a URL que elas receberam.

Ver designs estáticos do Figma

Entrar para ver os designs

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.

Navegar pelos frames do design

Para navegar entre os frames no app web do Crypto, clique nos botões de seta, clique, segure e arraste os frames para a esquerda ou para a direita, ou pressione as teclas de seta para a esquerda ou seta para a direita do teclado. A tecla espaço também avança para o próximo frame.

Pular entre os frames do design

Se precisar ir direto para um frame específico dos designs enviados, use a barra de navegação na parte inferior da página do app web do Crypto. Passe o mouse sobre a barra de navegação para ver as miniaturas de cada frame e clique em qualquer miniatura para ir imediatamente para esse frame.

Alternar entre as versões enviadas do design

Se você fez upload de várias versões dos seus designs com o plugin Crypto para Figma, pode alternar entre elas instantaneamente no app web do Crypto clicando no título com a caixa de seleção, no canto superior esquerdo da página. Ao selecionar outra versão, os designs dessa versão são carregados. O rótulo abaixo do seletor também mostra quando cada versão foi atualizada pela última vez.

Ativar o modo escuro

Se seus designs ficam melhores em um fundo escuro, ative o modo escuro clicando no ícone de sol ou de lua na barra de ferramentas do app web do Crypto. O ícone alterna entre o modo escuro e o modo padrão (mais claro).

Mostrar ou ocultar os elementos ao redor

Se não quiser ver o título, os ícones de seta, a barra de navegação ou a barra de ícones enquanto olha seus designs, clique no botão de ícone de visibilidade na barra de ferramentas do app web do Crypto. Esse botão mostra ou oculta tudo, exceto os próprios designs.