Como usar o Figma: Tutorial Compêleto para Designers
Descubra Como Usar o Figma com Facilidade e Eficiência!
Introdução:
Figma é uma ferramenta de design colaborativo com navegação avançada e acesso em tempo real ao trabalho dos colegas, seja através da Web ou de sua própria interface gráfica. A ferramenta permite o design rápido e iterativo e foi criada pensando em colaboração e comunicação como principais valores. Este tutorial explica passo a passo como utilizar essa incrível ferramenta para otimizar seus projetos.
Criando sua conta e organizando o ambiente
Para começar, visite o site [Figma](https://www.figma.com/) e crie uma conta clicando em "Get Started - It's Free". Depois de criado, você pode acessar um espaço chamado "Design System" que é utilizado para armazenamento de cores, fontes, componentes etc. Dito isso, clique no ícone de aba em cima direita, e clique em "New File". Aqui, você vai colocar um nome no seu arquivo e clicar em "Create", você já estará dentro do seu projeto!
Utilizando a Interface Gráfica
Como Figma é um ambiente de trabalho colaborativo, existem várias coisas que se destacam no layout do programa. A barra lateral direita possui os principais painéis que te ajudarão em seu design e organização. Esses painéis são: File/Organize; Layers/Organize (camadas); Design/Inspector (inspetor), Assets e Projects(Projetos). Na barra de cima há também o botão "Plugins" que é uma série de plugins que aumentam a sua produtividade!
Adicionando elementos básicos
Primeiramente, vá na aba da direita chamada LAYERS/ORGANIZE, clique em + e selecione o primeiro ícone da esquerda, é o Canvas. Não se preocupe se está pequeno, ele aumentará ao lado do seu mouse enquanto arrasta o elemento pelo painel. Agora basta colocar a mão sobre o Canvas para aparecer os pontos de amarragem e apertando clicar onde desejar.
Depois que fizer o primeiro clique, arraste para formar um retângulo, solte para que a estrutura apareça no Canvas, agora se quiser criar elementos filhos basta colocar o cursor na direita do objeto e apertar enter.
Usando a ferramenta texto
No canto superior esquerdo encontramos um ícone que é responsável pelos tipagens, basta clicar sobre ele para selecionar a fonte mais adequada ou customizada conforme o que você desejar. Aproveite para verificar a cor da caixa de texto no painel de direita chamado DESIGN/INSPECTOR, e também tamanho e outras propriedades do objeto em questão.
Aqui estão as etapas de criação de uma interface
1 - Primeiro clique com o mouse para selecionar a aba LAYERS/ORGANIZE;
2 - No Painel superior esquerdo clica na ferramenta "Canvas", que é um retângulo preto;
3 - Aprecia para colocar o ponteiro da mão sobre ele e depois arrasta pelo canvas até formar um retângulo maior e esse já será seu primeiro elemento, em seguida clique em uma das duas linhas de frente (Superior ou inferior) que viram laranja;
4 - Agora você já pode começar a criar seus outros componentes usando a mesma técnica, selecionando um elemento filho ou pai e assim por diante. Você vai ver o resultado pronto com todos os itens clicando no botão "Auto Layout";
5 - Você pode adicionar cor de fundo a cada um dos elementos usando o DESIGN/INSPECTOR, agora vamos lá para adicionar texto.
Adicionando e personalizando Textos
No painel lateral direito é possível editar textos criados. Caso queira adicionar um novo texto, selecione o botão na parte inferior da lista de itens ou seja TEXT DOWN, depois crie a estrutura do elemento e clique em ele para alterar os parâmetros desejados como fonte, tamanho e cor.
Por fim salve o seu arquivo clicando em "File/Save".
Finalmente
Esperamos ter iluminado esses primeiros passos da ferramenta para você, o Figma tem muito mais recursos e funcionalidades a serem apresentados e nós vamos explorá-los em outros tutorials!
Enjoy!
Aprenda a dominar o Figma, uma ferramenta de design de interface extremamente popular, e comece a criar projetos atraentes e funcionais. Não perca tempo e descubra como usar o Figma com facilidade e eficiência!
Referências: Figma, tutorial Figma, como usar Figma, design de interface, ferramenta de design,
Figma
Figma é uma ferramenta de design colaborativo usada para criar interfaces, protótipos e sistemas de design em tempo real, permitindo que equipes trabalhem juntas diretamente no navegador.