Antes de empezar

Quién puede utilizar esta función

Disponible para cualquier plan 

Cualquiera con acceso puede editar a un archivo puede ajustar el radio y suavizado de esquinas

En el diseño de la interfaz, vemos esquinas redondeadas en pantallas, iconos, botones y tarjetas. Es más fácil para los ojos seguir círculos y curvas, mientras que los bordes afilados interrumpen nuestra línea de visión.

Figma representa el radio de la esquina en píxeles (independientes de la densidad). Puedes ajustar el radio de la esquina para una forma completa o para cada punto de un objeto vectorial.

Figma tiene dos características para crear esquinas redondeadas:

• Radio de esquina: redondea la esquina donde se unen dos líneas. Úsala para crear formas con esquinas redondeadas.
• Suavizado de esquinas: Ajusta una esquina redondeada para crear una curva continua. Utiliza esta configuración para crear «círculos cuadrados».

Puedes aplicar el radio y el suavizado de las esquinas a:

• Marcos
• Rectángulos, polígonos y estrellas
• Redes vectoriales que son formas cerradas
• Operaciones booleanas que contienen rectángulos

Ajusta el radio de la esquina para toda la forma

Hay algunas formas de ajustar el radio de esquina de un objeto o forma vectorial.

Pestaña de diseño

1. Selecciona la capa.
2. Introduce un valor de píxel en el campo Radio de esquina de la barra lateral derecha o pasa el cursor por encima del icono y, a continuación, haz clic y arrastra hacia la izquierda para reducir o hacia la derecha para aumentar.

Lienzo

También puedes ajustar el radio de esquina para rectángulos, estrellas y polígonos en el lienzo. 

1. Selecciona la forma que deseas actualizar.
2. Coloca el cursor sobre la esquina que deseas ajustar hasta que aparezca el controlador de radio.
3. Arrastra para ajustar el radio.

Ajustar el radio de una esquina individual

De forma predeterminada, Figma aplica el radio de la esquina a toda la forma. Hay algunas formas de ajustar el radio de esquina para esquinas individuales. 

Ajuste de esquinas independientes (solo marcos y rectángulos)

La configuración de esquinas independientes está disponible para rectángulos y marcos. 

1. Selecciona el rectángulo o marco que deseas actualizar.
2. Haz clic en Esquinas independientes en la barra lateral derecha.
3. En el panel Detalles del radio de esquina , puedes:
   • Introducir un valor de píxel para cada esquina
   • Hacer clic en Aplicar variable en cualquiera de los cuatro campos de radio de esquina para aplicar una variable numérica
   • Utilizar el control deslizante para ajustar el suavizado de esquinas

1.  

Lienzo (solo rectángulos)

También puedes ajustar el radio de la esquina para una esquina individual en el lienzo. Esto solo se aplica a los rectángulos.

1. Selecciona la forma que deseas actualizar.
2. Mantén pulsada la tecla modificadora para ajustar una sola esquina.
   • Mac: ⌥ Option
   • Windows: Alt
3. Coloca el cursor sobre la esquina que deseas ajustar hasta que aparezca el controlador de radio.
4. Arrastra para ajustar el radio.

Modo de edición vectorial (solo formas y redes vectoriales cerradas)

1. Selecciona la forma que deseas actualizar.
2. Haz clic en Editar el objeto en la barra de herramientas o pulsa Enter o Retorno para entrar en el modo de edición de vectores.
3. Selecciona el punto individual en el lienzo.
4. Ajusta el radio de la esquina utilizando el campo en la barra lateral derecha.
5. Introduce un valor en píxeles en el campo Radio de la esquina o sitúa el cursor sobre el icono y, a continuación, arrastra hacia la izquierda para reducir y hacia la derecha para aumentar.

Suavizado de esquinas para círculos cuadrados

Los diseñadores notaron una diferencia en las esquinas redondeadas de los iconos de las aplicaciones de iOS7. Este suavizado de esquinas creó una curva continua sin uniones que las esquinas redondeadas regulares no podían crear.

Nos referimos a las formas que utilizan este efecto particular de círculo cuadrado. Una forma que se encuentra a medio camino entre un cuadrado y un círculo. Todavía podemos ver círculos cuadrados en los últimos diseños de Apple, incluido el OS14.

Hay conceptos matemáticos detrás de un círculo cuadrado. Más información sobre la búsqueda de círculos cuadrados por parte de un ingeniero de Figma.

Ajustar el suavizado de esquinas

Puedes aplicar el suavizado de esquinas a cualquier forma a la que puedas aplicar el radio de esquina. A diferencia del radio de esquina, solo puede aplicar el suavizado de esquinas a toda la forma.

1. Selecciona la capa en el lienzo o en el panel Capas.
2. Abre el panel Diseño de la barra lateral derecha.
3. Haz clic en el icono Esquinas independientes para abrir el panel Radio de esquina.
4. Usa el control deslizante para ajustar el suavizado de las esquinas o haz clic en iOS para establecer el suavizado de las esquinas al 60 %, el valor predeterminado para iOS.