Antes de você começar

Quem pode usar este recurso

Disponível em todos os planos

Qualquer pessoa com acesso de editor pode atualizar as propriedades de traços.

Traços são uma coleção de propriedades que você pode aplicar a camadas em arquivos de design. Você pode considerar os traços como a representação visual de um caminho vetorial. Use as propriedades de traços para:

• Adicionar contornos em torno de formas, redes vetoriais ou operações booleanas
• Criar linhas e setas
• Adicionar bordas a imagens
• Adicionar traços a lados individuais de camadas retangulares, como retângulos, quadros e componentes

Você pode controlar a aparência de um traço com propriedades de cor, espessura, distribuição, lado e pontos de extremidade.

Propriedades de traços

Visualize e ajuste as propriedades de traços na seção Traço da barra lateral direita.

Tintas

Tinta é a principal propriedade que você utilizará para definir o traço. Você pode aplicar mais de uma (cor de) tinta a um traço. Isso inclui tintas gradientes e de imagem. As tintas devem ter as mesmas propriedades de espessura, posição e estilo.

1. Use o seletor de cores para escolher um tipo, valor e opacidade de tinta.
2. Clique em para adicionar outra tinta à seleção atual.
3. Selecione ou para alternar a visibilidade de cada tinta.
4. Selecione para abrir o seletor de estilos. A partir daí, você pode aplicar um estilo de cor ou criar um novo a partir da seleção atual.
5. Selecione para remover o traço da camada selecionada.

Alinhamento

O Figma permite que você defina onde aplicar o traço no caminho da camada. Escolha entre Interno, Externo ou Central. A opção padrão para a maioria das camadas de forma é Interno, exceto para as linhas, que são definidas no centro.

O formato SVG é compatível apenas com traço central. Isso é algo a considerar se você planeja exportar a camada como um SVG.

Ao exportar uma camada com traço interno ou externo para SVG, o Figma irá "simplificar" o traço. Isso faz com que um traço interno ou externo se assemelhe a um traço central. Isso não afetará a aparência do objeto exportado, mas terá impacto na complexidade do código SVG.

Saiba mais sobre simplificar o traço →

Peso

Use o campo para selecionar a espessura do traço, em pixels. Insira um valor ou foque no campo e role pelos valores usando o mouse ou o trackpad.

Traços individuais

Por padrão, o Figma aplica as propriedades de traços a todos os lados de uma camada. Se sua camada for um retângulo, quadro ou componente/instância, você também terá uma propriedade Traço por lado.

Use a propriedade Traço por lado para escolher em qual(is) lado(s) aplicar o traço.

• Tudo (padrão)
• Superior
• Inferior
• Esquerda
• Direita
• Personalizado: para escolher em quais lados aplicar o traço. Personalizado também permite que você defina uma espessura de traço diferente para cada lado.

Traços personalizados por lado

Ao selecionar Personalizado, você verá quatro campos individuais na seção Traço. Use os campos para ajustar a espessura de cada lado de forma independente. Para remover um traço de um lado, defina a espessura como 0.

Você pode utilizar traços individuais para criar elementos e padrões comuns de design:

• Aplique um único traço na parte superior ou inferior de uma linha em uma tabela.
• Mostrar uma linha horizontal abaixo de um cabeçalho de seção ou divisor.
• Aplicar uma borda a apenas três lados de um elemento
• Adicionar um bloco de cor ao lado esquerdo de um cartão ou elemento de tarefa

Pontos de extremidade

Adicione estilo aos pontos de extremidade de quaisquer caminhos abertos. A propriedade dos pontos de extremidade será exibida em dois locais diferentes, dependendo do caminho vetorial que você selecionou.

Apenas dois pontos de extremidade

Se a camada for um caminho vetorial aberto, você pode definir os pontos de extremidade no início e no fim do caminho vetorial na seção Traço principal. Por exemplo: formas de linha e seta.

Use os dois campos para definir o estilo da tampa ou ponta ↓ para os pontos de extremidade inicial (esquerda) e final (direita).

Mais de dois pontos de extremidade

Se você tiver um caminho ou forma vetorial fechado (ou um caminho aberto com mais de dois pontos de extremidade), você encontrará as configurações de pontos de extremidade no menu avançado de traço.

Se você tiver toda a camada selecionada, poderá usar a propriedade Pontos de extremidade para definir o mesmo estilo de ponta ou tampa para todos os pontos de extremidade.

Para editá-los de forma independente, você precisa selecionar cada ponto de extremidade no modo de edição vetorial:

1. Com a camada selecionada, pressione Enter/Return para abrir o modo de edição vetorial →
2. Selecione um único ponto de extremidade. Você pode identificar o ponto de extremidade selecionado pelo círculo azul com um traço branco.
3. Selecione na seção Traço da barra lateral direita para abrir o menu avançado de traço.
4. Atualize a propriedade Ponto de extremidade.
5. O menu Avançado de traço permanecerá aberto, permitindo que você selecione outro ponto final na tela de trabalho e atualize o ponto final novamente.

Pontos de extremidade das tampas e pontas

Escolha entre uma seleção de tampas ou pontas para adicionar a seus pontos de extremidade:

• Nenhuma: nenhuma tampa ou ponta é adicionada à extremidade do caminho. As extremidades são quadradas, sem adicionar comprimento ao caminho.
• Redondo (padrão): adiciona uma tampa 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 torna quadrado o ponto de extremidade do caminho.
• Seta de linha: duas linhas de 45 graus para cada lado do(s) ponto(s) de extremidade. A seta de linha utiliza a mesmo 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: cabeça de seta triangular em 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: versão invertida ou espelhada da seta triangular, com a seta apontando para dentro, em direção ao caminho.
• Seta de losango: adiciona uma ponta sólida em forma de losango ao ponto de extremidade.

Tipos de traços

Você pode usar as configurações avançadas de traço para personalizar ainda mais a aparência de um traço. Para acessar essas configurações, navegue até a seção Traço na barra lateral direita e selecione Configurações avançadas de traço.

Traço básico

Você pode usar as configurações básicas de traço para criar um traço tracejado ou pontilhado. 

Tracejado

Criar uma linha tracejada uniforme.

1. No painel Traço, selecione para abrir o menu avançado de traço.
2. Selecione o estilo de traço Tracejado.
3. Insira o comprimento desejado para o Traço pontilhado, em pixels.
4. Insira o comprimento do Espaçamento entre traços pontilhados, em pixels.
5. Escolha o tipo de tampa para o traço pontilhado:
   • Nenhum
   • Redondo
   • Quadrado

Pontilhado

Criar uma linha pontilhada.

1. No painel Traço, use o menu suspenso para alterar a posição do traço para Centro.
2. Selecione para abrir o menu avançado de traço.
3. Selecione o estilo de traço Tracejado.
4. Insira um comprimento de tTaço pontilhado de 1 pixel.
5. Na configuração Estilo do traço, selecione Redondo.
6. Ajuste o Espaçamento entre os traços pontilhados caber.

Personalizado

Crie uma linha tracejada ou pontilhada com um padrão personalizado.

1. No painel Traço, selecione para abrir o menu avançado de traço.
2. Defina a configuração Estilo do traço para a opção Personalizado.
3. Use a seguinte sintaxe na configuração Traços pontilhados para definir o padrão de traço pontilhado traço pontilhado, espaçamento, traço pontilhado, espaçamento...
4. Selecione o Estilo do traço que você deseja utilizar.

Traço de pincel

Os traços de pincel conferem à sua seleção uma aparência orgânica e pintada à mão. Use a guia Pincel nas Configurações avançadas de traço para navegar pelos estilos de pincel disponíveis, incluindo os pincéis personalizados que você criou. Passe o cursor sobre um estilo para pré-visualizar como ele aparecerá em sua seleção. Depois de aplicar um traço de pincel, você pode usar a configuração Direção para determinar em que direção o traço fluirá.

Traço dinâmico

Os traços dinâmicos dão ao traço de sua seleção uma aparência irregular desenhada à mão. Você pode usar as configurações de Traço dinâmico para definir a aparência do traço:

• Frequência: determina o número de irregularidades no traço
• Movimento: determina o tamanho das irregularidades
• Suavizar: determina o quanto as irregularidades são recortadas

Junção e ângulo de mitra

Defina como as linhas se conectam dentro de um caminho ou rede vetorial. Ajuste as junções em todo o caminho ou entre no modo de edição vetorial para selecionar um único ponto de ancoragem no caminho. Escolha entre:

• Mitra: crie uma ponta afiada, como uma seta, onde os dois caminhos se encontram.
• Bisel: corte a ponta afiada para criar uma edge plana.
• Arredondado: arredonde o ponto onde dois caminhos se encontram para suavizar a junção.

Use a configuração Ângulo de mitra para controlar o ângulo em que duas linhas unidas são chanfradas. Por exemplo: para uma mitra de 90°, qualquer ângulo ≤ 90° será chanfrado; qualquer ângulo > 90° criará uma ponta afiada.

Visão geral das propriedades de traço compatíveis

Algumas propriedades são compatíveis apenas com tipos específicos de camadas. Utilize a tabela abaixo para verificar se uma propriedade específica é compatível com o tipo de camada com o qual você está trabalhando.

Tipo de camada	Tintas	Alinhamento	Peso	Traço por lado	Estilo de cor	Extremidade	Junte-se
Retângulo	✓	✓	✓	✓	✓	✕	✓
Linhas	✓	✕	✓	✕	✓	✓	✕
Setas	✓	✕	✓	✕	✓	✓	✓
Elipse	✓	✓	✓	✕	✓	✕	Se alterado com a ferramenta Arco
Polígono	✓	✓	✓	✕	✓	✕	✓
Estrela	✓	✓	✓	✕	✓	✕	✓
Booleanos	✓	✓	✓	✕	✓	✕	✓
Redes vetoriais	✓	✓	✓	✕	✓	Abrir somente caminhos	✓
Texto	✓	✓	✓	✕	✓	✕	✓
Quadros (incluindo componentes)	✓	✓	✓	✓	✓	✕	✓

Visualize e copie as propriedades do traço com acesso somente de visualização a um arquivo

Se você tiver permissão de visualizador para um arquivo, as propriedades do traço aparecerão na barra lateral direita como Bordas. Você pode escolher representar as propriedades como CSS ou valores de cores, como Hex, RGB, HSL ou HSB. Depois de escolher como representar as propriedades, passe o mouse sobre a seção Bordas e clique em Copiar.

Estilos e traços

Você só pode criar e aplicar estilos de cor a traços. Não há como salvar outras propriedades de um traço, como espessura e posição, como um estilo.

Quando você aplica um estilo de cor a um traço, ainda pode ajustar as outras propriedades. Isso inclui a espessura e a distribuição, bem como quaisquer propriedades avançadas do traço, como tampas, junções e traços pontilhados.

Aplicar estilos de cor a traços

1. Selecione a camada que gostaria de atualizar.

2. Na seção Traço do painel direito, clique no ícone de estilo .

3. Use o seletor de estilos para escolher o estilo de cor relevante.

4. Ajuste qualquer uma das outras propriedades do traço, conforme desejar.

Escalar e redimensionar traços

Os traços reagem de maneira diferente dependendo de como você os redimensiona.

• Redimensione o objeto se quiser manter a espessura do traço enquanto ajusta as dimensões do objeto. Passe o mouse sobre a caixa de delimitação do traço até que o cursor apareça; em seguida, arraste para redimensionar.
• Use a ferramenta Escala para escalar as propriedades do traço juntamente com as dimensões do objeto. Saiba como usar a ferramenta Escala →

Converter traços em objetos vetoriais

Contornar traço permite transformar traços em objetos vetoriais. Isso converterá cada caminho no objeto em uma única forma editável.

Isso permitirá que você:

• Remover ou estender meios-traços pontilhados
• Crie formas personalizadas e as edite no modo de edição vetorial
• Combine múltiplos caminhos em um único objeto
• Escale objetos vetoriais uniformemente

Contornar traçado

1. Clique com o botão direito do mouse na camada e selecione Contornar traço ou use o atalho do teclado:
   
   • Mac: ⌘ Command ⌥ Option O
   • Windows: Control Alt O
2. O Figma converterá o caminho em um objeto vetorial e aplicará qualquer pintura que você tinha como traço como preenchimento.
3. Você pode ver como esse objeto vetorial aparece no modo de edição vetorial. Pressione Enter/Return ou clique em Editar objeto na barra de ferramentas para editar o objeto vetorial.