Saltar para o conteúdo
Guia6 min de leitura

Demonstração de Portefólio Figma Make

Coloque a compilação em funcionamento no portefólio, não uma captura de ecrã dela.

Mostre uma compilação Figma Make em funcionamento num portefólio em vez de uma captura de ecrã estática, e prove que o fluxo funciona antes de perguntarem.

Ver como funcionaOs primeiros 60 segundos de vídeo são gratuitos, com marca de água. Verifique o seu correio eletrónico para o descarregar.

Uma entrada de portefólio construída em torno de uma captura de ecrã está a pedir a um revisor que confie que tudo abaixo da dobra também funciona. Uma captura de ecrã prova a disposição. Não prova que um botão faz alguma coisa, que um formulário valida, ou que a interação de que um gestor de contratação realmente se importa se comporta da forma que a imagem estática sugere. A distância entre "parece acabado" e "funciona" é exatamente o que um vídeo fecha, e é a maior diferença entre uma entrada de portefólio que recebe um segundo olhar e uma que é ignorada. Um revisor a percorrer uma pilha de candidaturas raramente tem tempo para abrir todos os projetos ligados, por isso as entradas que sobrevivem a essa primeira passagem são as que respondem à pergunta sobre se funciona sem exigir um clique.

Uma compilação Figma Make é bem adequada para isto porque o resultado é um protótipo funcional numa hiperligação de pré-visualização partilhável, não um ficheiro de design que precisa do próprio Figma aberto para se inspecionar. Essa hiperligação é normalmente acessível sem início de sessão, uma vez que a maioria dos projetos Figma Make são protótipos e não software com um sistema de contas completo por trás, o que significa que o fluxo mostrado no vídeo é o mesmo fluxo que um revisor poderia abrir e experimentar por si próprio logo a seguir a assistir.

O que deve provar uma demonstração de portefólio?

Uma demonstração de portefólio deve provar a única interação que exigiu mais julgamento para acertar. Raramente é o ecrã de início de sessão ou a barra de navegação. É normalmente uma peça específica de lógica: um formulário que reage de forma inteligente a uma entrada, uma disposição que se reorganiza de uma forma que exigiu iteração real, ou um fluxo que resolve um problema de interface genuinamente incómodo. Nomeie esse momento antes de gravar seja o que for, da mesma forma que nomearia o ponto mais forte num estudo de caso escrito.

Um vídeo de galeria de lançamento tem de conquistar a atenção de um estranho nos primeiros dois segundos. Um espectador de portefólio já escolheu olhar mais de perto, normalmente porque um currículo ou uma hiperligação o trouxe até ali, por isso o vídeo pode permitir-se um arco ligeiramente mais longo: um início que apresenta o problema, um meio que mostra a interação, e um fim que mostra o estado resolvido.

Momento do portefólioO que deve provarO que deixar de fora
PreparaçãoO problema que a interação resolveUm tour de páginas não relacionadas
InteraçãoA lógica ou escolha de disposição específicaTodos os caminhos alternativos pelo mesmo ecrã
ResoluçãoO estado que mostra que a interação funcionouUma narração pesada em discurso de venda

Como preparar a compilação para a gravação?

Abra a hiperligação de pré-visualização como um revisor faria, sem preparação prévia, sem presunções sobre o estado em que deveria estar. Verifique se há algo que pareça inacabado: texto de marcador de posição sobrado de um rascunho anterior, uma lista vazia sem nada dentro, ou um componente que ainda mostra valores predefinidos em vez do conteúdo que pretendia demonstrar. Um revisor a avaliar uma entrada de portefólio já está à procura de razões para passar à seguinte, e um detalhe obviamente inacabado dá-lhe essa razão de graça.

  • Abra a hiperligação de pré-visualização sem preparação prévia e confirme que nada parece um estado de rascunho anterior.
  • Preencha qualquer lista, formulário ou tabela com conteúdo que pareça intencional, não vazio.
  • Teste a interação específica do início ao fim antes de escrever a indicação para a renderização.
  • Remova qualquer coisa que se pareça com dados de uma pessoa real, mesmo texto de marcador de posição demasiado específico.

Preencha dados que apoiem a interação sem fingir ser informação de um utilizador real. Um calendário sem eventos ou um painel sem números não dá nada a um revisor para reagir, enquanto dados que são obviamente um substituto ainda permitem que a interação seja lida com clareza.

Organizar o processo por ordem ajuda a manter o vídeo delimitado corretamente desde o início:

  1. Nomeie a interação mais forte da compilação antes de gravar seja o que for.
  2. Prepare a hiperligação de pré-visualização para que abra sem preparação prévia e sem qualquer estado inacabado visível.
  3. Escreva a indicação a nomear o estado inicial, a interação e o resultado, e depois reveja a renderização antes de a publicar.

Quão específica deve ser a indicação?

Escreva a indicação da mesma forma que descreveria a peça a um revisor de design numa entrevista. Nomeie o estado inicial, a interação e o resultado. "A partir do formulário vazio, introduza um valor que ative a mensagem de validação, e depois mostre o estado corrigido" é suficientemente concreto para que a renderização do GogoScreen tenha um alvo claro, e suficientemente delimitado para que um revisor do vídeo concluído consiga verificar a renderização em relação à indicação.

O GogoScreen devolve um MP4 narrado e editado, construído a partir dessa indicação e do URL, com aproximações no clique que importa, suavização do cursor, cortes de tempos mortos e legendas fixas. Nada disso substitui a escolha da interação certa. Uma gravação bem editada de um ecrã genérico continua a ser uma entrada de portefólio genérica, e revisores que veem muitas destas num dia notam depressa a diferença entre uma afirmação específica e uma geral.

O que rodeia o vídeo no portefólio?

Junte o vídeo a uma breve nota escrita a nomear o problema, a decisão, e por que razão essa decisão foi a certa. O vídeo mostra o resultado. O texto explica o raciocínio, que é muitas vezes aquilo que um gestor de contratação ou um cliente está realmente a avaliar. Mantenha os dois separados em vez de sobrepor narração de processo à interação em funcionamento, uma vez que um revisor a tentar ver a interface a funcionar e a ler uma explicação ao mesmo tempo tende a absorver nenhuma das duas bem.

Reveja a renderização concluída em relação à forma como a interação realmente se comporta antes de a publicar em qualquer lugar. Aproximadamente uma em cada cinco renderizações precisa de uma nova tentativa ou falha completamente, e o tempo só é usado quando uma renderização é bem-sucedida, por isso incorpore uma breve passagem de revisão no processo em vez de publicar o primeiro ficheiro que chega. Essa passagem de revisão é também o ponto em que uma desconformidade entre a indicação e a interface tende a surgir, por isso vale a pena assistir ao excerto inteiro uma vez antes de decidir que está pronto para ir ao ar.

Onde se encaixa isto com guias adjacentes?

Para um revisor que precisa de aprovar antes de a compilação ser lançada, em vez de a julgar como peça de portefólio, a apresentação guiada de revisão de aplicação Figma Make cobre esse público separado e o problema de entrega que vem antes de uma entrada de portefólio sequer valer a pena fazer. Para um tratamento semelhante noutro criador, compare um vídeo de demonstração Bubble, um vídeo de página de destino Bubble, um vídeo de lançamento Bubble para o Product Hunt, e partilhar um projeto Bubble com um cliente, uma vez que as aplicações Bubble mais frequentemente ficam atrás de um início de sessão real por predefinição.

Para provar um resultado de interação específico em vez de um fluxo geral, o guia de vídeo de demonstração de resultado de teste do agente de IA e o guia de vídeo de demonstração de QA do agente de IA cobrem formatos de prova adjacentes. Um vídeo de demonstração de produto incorporado é útil assim que a entrada de portefólio precisar de ficar dentro de uma página em vez de ligar para fora, um vídeo de demonstração de aplicação Lovable cobre a tarefa equivalente para esse criador, e uma apresentação guiada de produto para SaaS mais ampla é o formato certo assim que a entrada precisar de cobrir mais do que uma interação. Para uma comparação de ferramentas de gravação para este tipo de trabalho, leia GogoScreen versus Clueso. Comece pela página inicial do GogoScreen, verifique os preços, explore a biblioteca de guias completa, ou veja o resto das comparações.

Esclarecimentos

Antes de começar

Por que motivo uma captura de ecrã não é suficiente para uma entrada de portefólio?

Uma captura de ecrã só prova que a interface pode ser organizada corretamente num momento congelado. Não consegue mostrar se a interação realmente funciona, que é normalmente exatamente aquilo que um revisor está a tentar avaliar.

O vídeo de portefólio deve mostrar o processo Figma Make ou a aplicação concluída?

Mostre a aplicação concluída a fazer o trabalho para que foi construída. O processo pertence a um texto de estudo de caso junto ao vídeo, não dentro do mesmo excerto, uma vez que misturar os dois dilui ambos.

Preciso de dados reais na demonstração para a tornar convincente?

Precisa de dados plausíveis, não de dados reais. Conteúdo de marcador de posição que pareça intencional é suficiente para mostrar a interação a funcionar, e usar material real de clientes não é apropriado para uma entrada de portefólio pública.

Cole um URL, descreva um fluxo e obtenha um vídeo de demonstração da sua aplicação web.

Os primeiros 60 segundos de vídeo são gratuitos, com marca de água. Verifique o seu correio eletrónico para descarregar o vídeo.