Fazendo um Mockup com o Figma
“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.