Fazendo um Mockup com o Figma
![Figma: the collaborative interface design tool.](https://images.ctfassets.net/1khq4uysbvty/QsIb6oxyNLMrTAkoSAkGX/954d40fe02bb1331778f83273dbcf828/Figma_Homepage_OG.png?w=1200&q=80)
“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:
![](https://dicas.link/wp-content/uploads/2020/12/image-23-1024x540.png)
Clicando no botão “New File”, situado no meio da tela, você deve ir para a seguinte tela:
![](https://dicas.link/wp-content/uploads/2020/12/image-24-1024x507.png)
É 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:
![](https://dicas.link/wp-content/uploads/2020/12/image-26.png)
Clicando na opção acima se pode adicionar uma tela que se usará de base:
![](https://dicas.link/wp-content/uploads/2020/12/image-27.png)
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:
![](https://dicas.link/wp-content/uploads/2020/12/image-28-1024x511.png)
Uma tela assim deve aparecer e você poderá trabalhar com ela.
![](https://dicas.link/wp-content/uploads/2020/12/image-29.png)
Ao se clicar duas vezes sobre o nome da página pode-se mudar o nome dela.
Crie outra página repetindo o processo:
![](https://dicas.link/wp-content/uploads/2020/12/image-30-1024x510.png)
Você pode adicionar um botão simples, criando uma forma geométrica com a seguinte opção:
![](https://dicas.link/wp-content/uploads/2020/12/image-31.png)
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.
![](https://dicas.link/wp-content/uploads/2020/12/image-32-1024x508.png)
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!
![](https://dicas.link/wp-content/uploads/2020/12/image-33.png)
![](https://dicas.link/wp-content/uploads/2020/12/image-34.png)
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)
![](https://dicas.link/wp-content/uploads/2020/12/image-35.png)
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:
![](https://dicas.link/wp-content/uploads/2020/12/image-36.png)
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:
![](https://dicas.link/wp-content/uploads/2020/12/image-37.png)
Pronto, agora nós podemos simular:
![](https://dicas.link/wp-content/uploads/2020/12/image-38.png)
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:
![](https://dicas.link/wp-content/uploads/2020/12/image-39-1024x510.png)
Perceba que ao clicar no retângulo vermelho ele te levará para a tela com o retângulo verde e vice-versa:
![](https://dicas.link/wp-content/uploads/2020/12/image-40.png)
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.