- Produto: Figma Design
- Tópicos: Formas, cor, grupos, organização de camadas, quadros
- Duração: 20 minutos
Neste projeto, vamos ilustrar uma poção mágica no Figma Design. Criar ilustrações é uma maneira divertida de se familiarizar com o editor e as ferramentas do Figma. Não se preocupe se você é novo na ilustração; vamos percorrer o uso de formas básicas, grupos, cores e quadros. Também aprenderemos como a organização de camadas pode impactar seus designs.
Se você seguir o passo a passo, sua ilustração final será semelhante à seguinte:
Vamos criar nossa poção mágica fazendo o seguinte:
- Crie a garrafa
- Encha a garrafa com a poção mágica
- Coloque uma rolha no topo
- Adicione alguns detalhes finais
- (Opcional) Estruture seu design no quadro e exporte-o
Crie a garrafa
Vamos criar a garrafa usando a ferramenta Elipse, a ferramenta Retângulo e um grupo.
Adicione as formas
As ferramentas de forma estão localizadas na barra de ferramentas. Clique na seta para mostrar as outras opções de formas.
Vamos adicionar uma elipse e dois retângulos à tela de trabalho:
- Para adicionar uma elipse: Selecione a ferramenta elipse ou pressione [O] e clique na tela de trabalho
- Para adicionar um retângulo: Selecione a ferramenta Retângulo ou pressione [R] e clique na tela de trabalho
Dica: Você também pode adicionar formas clicando na tela de trabalho e arrastando o cursor. Você verá as dimensões da forma abaixo da borda inferior enquanto redimensiona a forma. Mantenha a tecla Shift pressionada ao arrastar a forma para criar quadrados e círculos perfeitos.
Redimensione as formas
Agora que temos nossos blocos de construção, é hora do redimensionamento. Você pode redimensionar objetos selecionando um nome de usuário e arrastando o cursor ou digitando as dimensões desejadas nos campos Largura e Altura no painel de Design.
Use qualquer um dos métodos para redimensionar as formas para as seguintes dimensões:
- Elipse: 200 L x 200 A
- Retângulo 1: 100 L x 100 A
- Retângulo 2: 120 L x 40 A
No retângulo de 120 x 40, também precisamos arredondar os cantos para que a borda da nossa garrafa não pareça tão afiada. Selecione o retângulo e insira “10” no campo Raio do canto na aba Design.
Alinhe as formas
Agora que temos nossas formas, devemos alinhá-las para que se pareçam mais com uma garrafa. Clique e arraste uma forma para movê-la pela tela de trabalho. À medida que você mover os objetos, você notará guias vermelhas aparecerem. Elas ajudam você a alinhar o objeto a outros objetos na tela de trabalho.
Dica: Depois de posicionar suas formas, selecione todas elas e use a configuração Alinhar centros horizontais na aba Exibição para garantir que tudo esteja bem centralizado.
Alinhe as formas para que pareçam semelhantes ao seguinte:
Agrupe as formas
Nossa garrafa está ficando ótima. Vamos organizar as coisas antes de continuar. Se você olhar para o painel de Camadas na barra lateral esquerda, verá que cada forma está em sua própria camada.
Podemos simplificar as coisas agrupando essas camadas. Grupos permitem combinar camadas para que possam ser tratadas como um único objeto.
Para agrupar várias camadas, selecione-as e use o atalho:
- macOS: Command + G
- Windows: Control + G
Você notará que o painel de camadas na barra lateral esquerda agora exibe apenas uma camada chamada “Grupo 1”. Nomear camadas é outra ótima maneira de se manter organizado no Figma. Clique duas vezes na camada e renomeie-a como “Garrafa”.
Dê um toque colorido
Vamos dar um pouco de cor à nossa garrafa. Selecione a garrafa e clique na configuração Preenchimento na barra lateral direita para abrir o seletor de cores. Para este tutorial, vamos usar o código de cor #DEDCF9. Você pode inserir o código no campo Preenchimento ou usar o seletor de cor para escolher uma cor diferente.
Depois de alterar a cor de preenchimento, é hora de bloquear essa camada. Travar camadas ajuda a impedir que os objetos sejam movidos ou modificados incorretamente. Para bloquear esta camada, selecione a forma da garrafa e clique no ícone de Travar na barra lateral esquerda. Para desbloquear uma camada, clique no ícone de Desbloquear.
Terminamos o design da nossa garrafa. Agora é hora de preenchê-la com a poção mágica.
Verifique: Seu arquivo se parece com o seguinte?
Crie a poção mágica
Adicione uma elipse
Use a ferramenta elipse para adicionar uma elipse na tela de trabalho e redimensione-a para 175 x 175.
Em dúvida? Lembre-se de como adicionamos e redimensionamos formas quando criamos a garrafa.
Arraste a elipse para cima da forma da garrafa e use as guias vermelhas para ajudá-lo a alinhá-la. Mude a cor de preenchimento da elipse como você mudou a cor da garrafa na seção anterior. Para este projeto, vamos usar o código de cor #E99BF4. Você pode inserir este código no campo Preenchimento ou usar o seletor de cor para escolher uma cor diferente.
Modificar a elipse
Vamos usar a configuração Editar objeto para fazer parecer que nossa poção está se agitando na garrafa.
Selecione a elipse e clique em Editar objeto na barra de ferramentas para entrar no modo de edição vetorial. O modo de edição de vetor permite manipular os pontos individuais de um objeto sem alterar a forma inteira.
Enquanto estiver no modo de edição vetorial, clique no ponto superior da elipse e arraste-o para baixo e para o lado. Se você ficar preso, assista ao seguinte GIF:
Quando estiver satisfeito com a aparência da sua poção, clique em Concluído na barra de ferramentas para sair do modo de edição. Em seguida, vamos adicionar algumas bolhas.
Adicione bolhas usando a ferramenta elipse
A ferramenta Elipse está sendo bastante utilizada neste projeto. Vamos usá-la para adicionar algumas bolhas à nossa garrafa de poção.
Arraste a ferramenta Elipse para criar várias bolhas pequenas. Elas não precisam ter o mesmo tamanho, mas certifique-se de que sejam pequenas o suficiente para caber dentro da garrafa. Usamos uma mistura de elipses de 6 x 6 e 12 x 12. Antes de continuar, certifique-se de mudar o preenchimento das suas elipses para algo um pouco mais colorido. Utilizamos o código de cor #985DF6.
Uma vez que você tenha colocado as bolhas na sua garrafa, arraste o cursor sobre todas as elipses de bolhas e a maior elipse de poção e agrupe-as usando o atalho:
- macOS: Command + G
- Windows: Control + G
Você notará que todas as camadas de elipse na barra lateral esquerda estão condensadas em uma camada chamada "Grupo 2". Renomeie a camada para "Poção" e clique em para travá-la.
Verifique: Seu arquivo se parece com o seguinte?
Crie a rolha
Vamos criar uma rolha usando a ferramenta Retângulo.
Adicione um retângulo à tela de trabalho e redimensione para 75 x 75. Use a configuração Raio do canto na aba Design para arredondar os cantos do retângulo para 25.
Altere o preenchimento do retângulo para #CE856C e renomeie a camada para “Rolha”. Arraste-o até a borda da garrafa.
Organize suas camadas
Não queremos que a rolha fique no topo da garrafa, então precisaremos reordenar as camadas na barra lateral esquerda. A ordem das camadas determina como os objetos são exibidos na tela de trabalho.
Vamos mover a camada “Rolha” sob a camada “Garrafa” para que apenas a parte superior da rolha fique visível. Isso ajudará a parecer que está dentro da garrafa. Selecione a camada “Rolha” e arraste-a para baixo da camada “Garrafa”. Assim que você mover a camada, clique no para bloqueá-la.
Adicione linhas de brilho
Nossa poção está quase pronta. Só precisamos adicionar algumas linhas de brilho para ajudar a destacá-la.
Adicione dois retângulos à tela de trabalho e redimensione um para 20 x 10 e o outro para 40 x 10. Use a configuração Raio do canto na aba Design para arredondar os cantos de ambos os retângulos para 20.
Mude o preenchimento de ambos os retângulos para #F2F2FF. Mova-os para a borda da garrafa. Selecione ambos os retângulos e agrupe-os usando o atalho:
- macOS: Command + G
- Windows: Control + G
Renomeie a camada para “Reflexo” e bloqueie-a.
Verifique: Seu arquivo se parece com o seguinte?
(Opcional) Adicione sua ilustração a um quadro e exporte-a
Se você preferir exportar sua ilustração do Figma, você pode adicionar suas camadas a um quadro. Os quadros são um dos principais blocos de construção do Figma. Assim como os grupos, você pode usar quadros para organizar todos os seus elementos de design em um único lugar.
Você pode adicionar um novo quadro usando a ferramenta Quadro na barra de ferramentas e arrastar conteúdo para dentro dela ou selecionar diretamente e converter objetos existentes em um quadro. Vamos com a segunda opção.
Desbloqueie suas camadas e arraste o cursor sobre sua ilustração para selecionar todas elas. Depois que tudo estiver selecionado, clique com o botão direito e selecione Selecionar quadro. Suas quatro camadas individuais estão aninhadas sob uma camada chamada "Quadro 1". Se você clicar na seta ao lado do nome, verá que as camadas nomeadas ainda existem e ainda podem ser selecionadas e editadas individualmente. Renomeie a nova camada para "Poção Mágica".
Se quiser exportar sua ilustração, selecione a camada “Poção Mágica” e use as configurações de Exportar na barra lateral direita para exportar seu design.
E depois?
Parabéns! Com apenas algumas formas básicas, você ilustrou uma poção mágica no Figma. Se você está procurando outro desafio, tente recriar a ilustração do urso abaixo. Foi criado usando exatamente as mesmas ferramentas que aprendemos neste projeto. Se você criar algo de que se orgulha, compartilhe na Comunidade do Figma.
Mal podemos esperar para ver o que você vai projetar a seguir!