"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.