Antes de você começar
Quem pode usar este recurso
Disponível em qualquer plano
Qualquer pessoa com acesso de editor pode criar e editar redes vetoriais
Redes vetoriais são camadas de forma compostas consistindo de caminhos vetoriais. Esses caminhos indicam ao Figma como renderizar essa forma na tela de trabalho, incluindo onde aplicar as propriedades de traço e preenchimento da camada.
Muitas ferramentas vetoriais permitem apenas desenhar caminhos vetoriais em uma única direção, frequentemente terminando no ponto de partida original. As redes vetoriais são únicas porque não necessitam de uma direção específica. Elas podem ter múltiplos caminhos que se ramificam em várias direções sem a necessidade de criar e combinar caminhos separados.
Use redes vetoriais para criar suas próprias formas exclusivas, ícones detalhados e até ilustrações intrincadas. A ferramenta Caneta permite que você crie com precisão suas próprias redes vetoriais a partir o zero. Ou você pode usar o modo de edição vetorial para modificar qualquer camada vetorial, incluindo formas básicas e caminhos vetoriais desenhados com as ferramentasPincel ou Lápis, para criar uma rede vetorial. Saiba mais sobre o modo de edição vetorial.
Nota: este vídeo utiliza a interface antiga do Figma. Para exemplos da nova interface, veja o conteúdo dentro deste artigo.
Criar redes vetoriais usando a ferramenta Caneta
A ferramenta Caneta permite criar redes vetoriais com grande previsão, posicionando pontos exatamente onde você deseja na tela de trabalho.
Para usar a ferramenta Caneta:
- Selecione a ferramenta Caneta na barra de ferramentas ou pressione P.
- Posicione a ferramenta Caneta no ponto onde você deseja que a rede vetorial comece e clique para adicionar o primeiro ponto.
- Continue reposicionando a ferramenta Caneta e clicando para adicionar pontos e caminhos adicionais. Para adicionar curvas ao caminho, clique e arraste o cursor para definir o comprimento e a inclinação da curva. Você também pode usar a ferramenta Dobrar para criar caminhos curvas com alças de bézier.
- Conclua o caminho seguindo um destes procedimentos:
- Para fechar o caminho, posicione a ferramenta Caneta sobre outro ponto na rede vetorial. Um pequeno círculo aparece ao lado do cursor, indicando que o caminho será fechado naquele ponto. Clique para fechar o caminho.
- Para manter o caminho aberto, pressione Escapar para desmarcar a rede vetorial.
Depois de criada, você pode usar o modo de edição vetorial para continuar refinando e modificando a rede vetorial. Saiba mais sobre o modo de edição vetorial.
Adicionar tampas a pontos de extremidade
Você pode adicionar estilo ao ponto de extremidade de qualquer caminho aberto. O Figma exibe a propriedade das tampas de forma diferente, dependendo do tipo de caminho vetorial que você selecionou.
Caminhos vetoriais com dois pontos de extremidade
O Figma exibirá as propriedades das tampas na barra lateral direita se um caminho vetorial com apenas dois pontos de extremidade for selecionado. Você pode configurar cada tampa de extremidade de forma independente uma da outra.
Caminhos vetoriais com mais de dois pontos de extremidade
O Figma exibirá as propriedades das tampas no menu avançado de traço se um caminho vetorial com mais de dois pontos de extremidade for selecionado.
Você não pode editor as tampas de extremidade de forma independente quando todo o caminho vetorial está selecionado. Para editar as tampas de extremidade de forma independente, selecione um único ponto vetorial enquanto estiver no modo de edição vetorial e ajuste o tipo de tampa.
Existem seis tipos diferentes de estilos de tampas que você pode escolher:
- Nenhum: não adiciona nenhuma tampa à extremidade do caminho. As extremidades do caminho são quadradas, sem adicionar comprimento ao caminho.
- Seta de linha: adiciona duas linhas de 45 graus a cada lado do(s) ponto(s) de extremidade. Utiliza a mesma espessura do traço que o próprio caminho. Você não pode alterar o comprimento das linhas da cabeça da seta.
- Seta triangular: adicione uma ponta de seta triangular a ambos os pontos de extremidade. Você precisará entrar no modo de edição vetorial para aplicar uma seta a apenas uma extremidade do caminho.
- Triângulo invertido: uma versão invertida ou espelhada da seta triangular, com a ponta da seta voltada para dentro, em direção ao caminho.
- Seta circular: uma tampa de círculo sólida.
- Seta de losango: uma tampa de losango sólida.
- Redondo (padrão): adiciona uma ponta com metade da espessura do traço, além de arredondar o ponto de extremidade do caminho para 50% da largura.
- Quadrado: adiciona uma tampa com metade da espessura do traço, enquanto deixa quadrado o ponto de extremidade do caminho.