fbpx

Como ilustrar no Figma do zero? Tutorial completo para iniciantes

Conteúdo

Oiii! Esse post é exclusivo para iniciantes no design e ilustração, mas que querem dar o passo mais importante: começar.

Então espero ajudar você nessa jornada, que se eu puder dar um spoiler, VOCÊ VAI AMAR! Então vamos lá.

O que é Figma

O Figma é um software de design (que tem a opção gratuita) que vem se destacando muito no mercado. Inicialmente ele foi idealizado para design de sistemas, então as pessoas faziam protótipos de aplicativos e sites.

Mas por ser gratuito, e ter ferramentas super versáteis para design, como a de vetorização (que é a que usamos para ilustrar) o Figma entrou na lista dos queridinhos. Além de ser SUPER fácil de usar. Claro que no inicio é tudo novo, mas depois que você pega o jeito você vê quantas coisas incríveis é possível fazer lá.

Eu mesma uso ele para TUDO! Fazer ilustração, arte para caneca, identidade visual, protótipo de site, post do instagram, outdoor, capa de rede social, contrato, apresentação… Nossa, muita coisa.

Caso você precise, tem um post ensinando a usar o Figma em português (parcialmente, mas já ajuda muito).

Entrar no Figma

A primeira coisa que você precisa fazer é entrar no Figma. E você pode ou baixar o Figma para o seu pc e usar ou acessar pelo navegador que da no mesmo.

Se você ainda não tem uma conta é super simples de fazer é só clicar em “Get started for free” .inclusive da para entrar com a sua conta do Gmail. Ai você responde algumas perguntas como “com o que você trabalha”.

Criar arquivo de graça no Figma

Caso você crie a conta agora, provavelmente você já vai cair em um arquivo novo. Mas caso você seja direcionado para a pagina inicial do Figma, você vai criar um arquivo Design file em Drafts (pois assim, você pode criar inumeros arquivos de graça dentro do Figma).

Ferramentas básicas do Figma

Essas são as ferramentas básicas do Figma para criar designs, e para ilustrar nós vamos usar a “Pen”.

Colocar imagem de base para ilustrar

Vamos usar uma imagem de base que queremos ilustrar, para isso vamos na opção de forma e selecionamos o “place image/video” ou simplesmente arrastamos dos nossos arquivos para o arquivo do Figma, tipo um Drag and Drop mesmo.

Ferramenta para ilustrar no Figma

Como falei, escolhemos a ferramenta Pen, ou usamos o atalho apertando P no teclado. E vamos contornar o rosto. Você faz vários cliques (não precisa arrastar nem nada). É clicar, mover o mouse (sem clicar) para o outro canto e clicar de novo.

O ideal é fazer cliques próximos, para que fique mais parecido com o formato da foto.

É importante lembrar que o formato tem que estar fechado, então o último clique deve se conectar ao primeiro clique. Caso fique “aberto” não irá preencher com cor.

Ao fazer isso PARABÉNS! VOCÊ CRIOU UM VETOR NO FIGMA. E esse é o início de uma ilustração linda, já que a ilustração é um conjunto de vários vetores.

Arredondar as bordas do vetor

Se você der muuito zoom vai reparar que os cantos dos pontos ficaram retos. Então para deixar os cantos arredondados vamos selecionar todos os pontos – você percebe que esta selecionado pois ele fica azul – e aplicar 300 (ou um valor alto) naquele campo de borda do vetor.

Por padrão o Figma aplica apenas a borda (stroke) nos vetores, então você vai precisar clicar no “-” para remover a borda e no “+” em Fill para preencher.

Preencher o vetor

Por padrão também, o preenchimento vem nesse tom de cinza. Então o legal é você selecionar o conta gotas e pegar uma cor do tom que você quer da foto.

Alterar a cor do vetor

As vezes a parte que a gente pegou com o conta gotas não fica como queremos, então podemos arrastar o cursos de cor para uma que fique mais parecida. E se você quiser esconder o vetor para ver a foto no fundo, você pode clicar no olho que fica ao lado da cor.

Repete, repete e repete até ficar pronto

E ao repetir isso várias vezes, você cria uma ilustração linda!

Ilustração em caderno

E essa ilustração pode ser usada em vários lugares, aqui tem o exemplo de um mockup de caderno com a ilustração.

Tutorial de ilustração

Se quiser aprender mais sobre ilustração, tem vários vídeos no meu canal do Youtube: https://www.youtube.com/madebybia

Lembra de se inscrever para não perder nada!