Antes de você começar

Quem pode usar este recurso

Disponível em qualquer plano 

Qualquer pessoa com acesso de editor a um arquivo pode ajustar o raio dos cantos e a suavização

No design da interface, vemos cantos arredondados em telas, ícones, botões e cartões. É mais fácil para os olhos acompanhar círculos e curvas, enquanto ângulos acentuados interrompem nossa linha de visão.

O Figma representa o raio do canto em pixels (independente da densidade). É possível ajustar o raio do canto para uma forma inteira ou para cada ponto em um objeto vetorial.

O Figma tem dois recursos para criar cantos arredondados:

• Raio do canto: arredonda o canto onde duas linhas se encontram. Use esse recurso para criar formas com cantos arredondados.
• Suavização de cantos: ajusta um canto arredondado para criar uma curva contínua. Use essa configuração para criar quadrados com cantos arredondados.

Você pode aplicar o raio do canto e a suavização em:

• Estruturas
• Retângulos, polígonos e estrelas
• Redes de vetores que são formas fechadas
• Operações booleanas que contêm retângulos

Ajustar o raio do canto para uma forma inteira

Existem algumas maneiras de ajustar o raio do canto de um objeto ou forma vetorial.

Aba Design

1. Selecione a camada.
2. Digite um valor de pixel no campo Raio do canto na barra lateral direita ou passe o cursor sobre o ícone e, em seguida, clique e arraste para a esquerda para reduzir ou para a direita para aumentar.

Tela

Você também pode ajustar o raio do canto de retângulos, estrelas e polígonos no canvas. 

1. Selecione a forma que gostaria de atualizar.
2. Passe o mouse sobre o canto que gostaria de ajustar até que a alça do raio apareça.
3. Arraste para ajustar o raio.

Ajustar o raio de um canto individual

Por padrão, o Figma aplica o raio do canto à forma toda. Existem várias maneiras de ajustar o raio de cada canto. 

Configuração de cantos independentes (somente estruturas e retângulos)

A configuração de cantos independentes está disponível para retângulos e estruturas. 

1. Selecione o retângulo ou quadro que gostaria atualizar.
2. Clique em Cantos independentes na barra lateral direita.
3. No painel detalhes do raio do canto, é possível:
   • Inserir um valor de pixel para cada canto
   • Clicar em Aplicar variável em qualquer um dos quatro campos de raio de canto para aplicar uma variável numérica
   • Usar o controle deslizante para ajustar a suavização dos cantos

1.  

Canvas (somente retângulos)

Você também pode ajustar o raio de um canto individual no canvas. Isso só se aplica a retângulos.

1. Selecione a forma que gostaria de atualizar.
2. Mantenha pressionada a tecla modificadora para ajustar um canto.
   • Mac: ⌥ Option
   • Windows: Alt
3. Passe o mouse sobre o canto que gostaria de ajustar até que a alça do raio apareça.
4. Arraste para ajustar o raio.

Modo de edição vetorial (somente formas e redes vetoriais fechadas)

1. Selecione a forma que gostaria de atualizar.
2. Clique em Editar objeto na barra de ferramentas ou pressione Enter ou Return para entrar no modo de edição vetorial.
3. Selecione o ponto individual no canvas.
4. Ajuste o raio do canto usando o campo na barra lateral direita.
5. Digite um valor de pixel no campo Raio do canto ou passe o cursor sobre o ícone e, em seguida, arraste para a esquerda para reduzir e para a direita para aumentar.

Suavização de cantos para quadrados arredondados

Os designers notaram uma diferença nos cantos arredondados dos ícones de aplicativos do iOS7. Essa suavização de cantos criou uma curva contínua sem emendas que os cantos arredondados comuns não conseguiam.

Nós nos referimos a formas que usam esse efeito específico como quadrados com cantos arredondados. É uma forma que combina um quadrado e um círculo. Os quadrados com cantos arredondados continuam presentes nos designs mais recentes da Apple, inclusive no OS14.

Para criar quadrados com cantos arredondados, é preciso um pouco de matemática. Saiba mais sobre a busca de quadrados com cantos arredondados por um dos engenheiros do Figma.

Ajustar suavização de canto

É possível aplicar a suavização de cantos a qualquer forma à qual seja possível aplicar o raio do canto. Ao contrário do raio do canto, só é possível aplicar a suavização de cantos a uma forma inteira.

1. Selecione a camada no canvas ou no painel de camadas.
2. Abra o painel Design na barra lateral direita.
3. Clique no ícone Cantos independentes para abrir o painel Raio do canto.
4. Use o controle deslizante para ajustar a suavização de cantos ou clique em iOS para definir a suavização de cantos como 60%, o padrão do iOS.