Aprenda a criar protótipos de interfaces no Figma, utilizando máscaras e elementos visuais para reforçar a identidade do projeto.

Criando o Espaço para o Vídeo

Para criar o espaço destinado ao vídeo na interface, o primeiro passo é inserir um retângulo e redimensioná-lo para as proporções padrão de um vídeo digital, 1280 x 720 pixels. Com o retângulo nas medidas certas, uma imagem é inserida para simular o vídeo. A imagem pode ser obtida em bancos de imagens gratuitos, como o Unsplash, ou ser uma imagem já salva no computador. Para aplicar a imagem somente dentro dos limites do retângulo, de forma recortada, são utilizadas máscaras.

  • Inserir um retângulo e redimensioná-lo para as proporções padrão de um vídeo digital, 1280 x 720 pixels
  • Inserir uma imagem para simular o vídeo, obtendo-a em bancos de imagens gratuitos ou utilizando uma imagem já salva no computador
  • Utilizar máscaras para aplicar a imagem somente dentro dos limites do retângulo, de forma recortada

Entendendo Máscaras

Uma máscara serve para recortar uma imagem ou forma com base em outra imagem ou forma que está logo atrás. É como se a forma de trás funcionasse como uma ‘tesoura’, cortando.

  • Utilização de máscaras para recortar uma imagem ou forma com base em outra imagem ou forma
  • Forma de trás funciona como uma ‘tesoura’, cortando a imagem ou forma

Aplicando máscaras no Figma

No Figma, para aplicar uma máscara, basta selecionar a imagem e a forma que será usada para recortar e clicar em ‘Usar como Máscara’ no menu superior. A forma de trás agora define os limites visíveis da imagem, podendo ser redimensionada e movida enquanto continua sendo cortada pela forma de trás. Além de retângulos, todas as outras formas geométricas do Figma podem ser usadas como máscaras, como círculos, triângulos, polígonos e etc.

  • Seleção da imagem e forma para recorte
  • Aplicação da máscara no Figma
  • Redimensionamento e movimentação da imagem mascarada
  • Utilização de diversas formas geométricas como máscaras

Simulando um Botão Play

Para indicar se tratar de um vídeo, é comum a adição de um botão ‘play’ sobre a imagem que o representa. Isso pode ser feito facilmente com algumas formas geométricas básicas, como um triângulo equilátero branco, rotacionado para apontar para a direita, representando a seta, e um círculo maior em volta do triângulo, com apenas a linha tracejada, para destacar a área de clique. Centralize os dois elementos e ajuste o tamanho e cores até ficar satisfatório, lembrando-se dos espaçamentos e do alinhamento entre os componentes.

  • Adição de botão ‘play’ em imagens de vídeos
  • Utilização de formas geométricas para simular o botão ‘play’
  • Centralização e ajuste de tamanho e cores
  • Atenção aos espaçamentos e alinhamento dos elementos

Adicionando Título e Texto de Apoio

Com a área do vídeo definida, chegou a hora de adicionar os textos de apoio. Reutilize o título já definido no wireframe, aplicando as formatações de fonte desejadas, como cor, tamanho, negrito, entre outras. Salve essas configurações como um novo Estilo de Texto no Figma para padronizar os títulos, facilitando alterações futuras. O texto secundário ou de apoio pode ser copiado do wireframe ou inserido a partir de um rascunho, utilizando caixas de textos e aplicando o estilo de fonte apropriado. Lembre-se de ajustar o tamanho da

  • Adição de título e texto de apoio em vídeos
  • Reutilização de estilos de fonte no Figma
  • Padronização de títulos para facilitar alterações futuras
  • Inserção e formatação do texto secundário ou de apoio

Alinhamento e Espaçamento

Ao criar um layout para a interface, é essencial garantir o alinhamento e espaçamento adequados entre os elementos. Isso contribui para a organização visual e a usabilidade da interface.

  • Utilize grades e linhas guias para garantir o alinhamento preciso dos elementos na interface
  • Defina espaçamentos coerentes entre os textos e em relação aos demais elementos, proporcionando uma experiência visual agradável
  • Mantenha o texto alinhado à esquerda e posicione-o de forma harmoniosa ao lado de outros elementos, como vídeos ou imagens

Elementos Visuais de Identidade

A adição de elementos gráficos, como formas e linhas, pode reforçar a identidade visual da interface, desde que estejam em conformidade com a paleta de cores do projeto e posicionados de forma equilibrada.

  • Utilize elementos gráficos alinhados com a identidade visual do projeto, como retângulos e círculos com apenas a linha de contorno
  • Posicione os elementos de forma harmoniosa e equilibrada, mesmo que ultrapassem os limites do layout, garantindo uma identidade visual única e marcante

Evolução do Protótipo

A evolução do protótipo da interface no Figma envolve a adição de novos elementos, o uso de funcionalidades importantes como máscaras e a criação de contraste, ritmo e harmonia através do design.

  • Utilize as funcionalidades importantes do Figma, como máscaras, para evoluir o protótipo da interface
  • Alinhe e dimensione os componentes de forma coerente, criando contraste, ritmo e harmonia através do design

Consistência e Usabilidade

Manter uma interface limpa, clara e agradável requer atenção aos detalhes, planejamento, pesquisa e consistência para criar produtos digitais centrados no usuário.

  • Mantenha a consistência visual e a usabilidade da interface, atentando-se aos detalhes durante o processo de design
  • Utilize planejamento e pesquisa para criar produtos digitais centrados no usuário, garantindo uma experiência agradável e eficiente

Conclusão

Ao aplicar as técnicas de máscaras e elementos visuais, é possível evoluir o design de interfaces de forma coerente e agradável, criando produtos digitais centrados no usuário.