Fazendo um Mockup com o Figma

“Onde times desenham juntos”
“Figma ajuda times a criar, testar e entregar designs melhores do começo ao fim”

O Figma é uma ferramenta muito útil onde se pode criar Mockups personalizados nos menores detalhes, desde o tamanho da tela até o forma to e cor de botões e muito mais.

O Figma tem muitas funcionalidades bastante específicas, mas eu vou percorrer as mais básicas e que vão te dar uma ideia de como o Figma pode ser usado.

Primeiramente, para se usar o Figma clique aqui para ir para o site e crie uma conta gratuitamente. Depois, você chegará em uma tela parecida com essa:

Clicando no botão “New File”, situado no meio da tela, você deve ir para a seguinte tela:

É nessa tela que se trabalhará para fazer o Mockup. Para isso, você pode escolher primeiramente uma página em branco para começar a partir de um modelo:

Clicando na opção acima se pode adicionar uma tela que se usará de base:

No lado direito da tela poderá ser escolhido qual tipo de tela será usado de padrão, você pode escolher qualquer um, eu escolherei “Android” para dar exemplo:

Uma tela assim deve aparecer e você poderá trabalhar com ela.

Ao se clicar duas vezes sobre o nome da página pode-se mudar o nome dela.

Crie outra página repetindo o processo:

Você pode adicionar um botão simples, criando uma forma geométrica com a seguinte opção:

Crie um retângulo em cada tela, você pode editar o tamanho e cor dele clicando nele depois e editando os números no lado direito da tela.

Por fim, vamos testar a opção de simular a funcionalidade de um botão.

Mude a cor dos retângulos para facilitar o entendimento e vamos transformar isso em um protótipo!

Na aba “Prototype” você muda a forma como você interage com as telas. Nessa aba você pode fazer links entre elementos de uma tela (os retângulos, no nosso caso) e outras telas (simulando que os retângulos te levam de uma tela para a outra como um botão)

Passe o mouse sobre um dos retângulos e um “+” deve aparecer como na imagem acima. Clique e arraste esse “+” até a outra tela para criar essa imagem:

Isso significa que ao clicar no retângulo vermelho, agora ele te levará para a segunda tela (quando nós estivermos simulando). agora faça a mesma coisa com o outro retângulo:

Pronto, agora nós podemos simular:

No canto superior direito você encontrará os elementos da imagem acima. Clique no botão “Present” e ele abrirá uma nova guia parecida com essa:

Perceba que ao clicar no retângulo vermelho ele te levará para a tela com o retângulo verde e vice-versa:

Isso significa que todos os processos foram feitos corretamente e o protótipo está feito.

Se você quiser utilizar assets já criados, você pode facilmente pesquisar na internet e adicionar assets novos com os links que são disponibilizados por outras pessoas.

This website uses cookies.