Antes de empezar

Quién puede utilizar esta función

Disponible en cualquier plan 

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

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

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

Figma tiene dos características para crear esquinas redondeadas:

• Radio de las esquinas: Redondea la esquina donde dos líneas se encuentran. Usa esta función para crear formas con esquinas redondeadas.
• Suavizado de las esquinas: Ajusta una esquina redondeada para crear una curva continua. Usa esta función para crear "círculos cuadrados".

Puedes aplicar el radio y el suavizado de esquinas a lo siguiente:

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

Ajusta el radio de las esquinas para una forma completa

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

Pestaña Diseño

1. Selecciona la capa.
2. Introduce un valor de píxel en el campo Radio de las esquinas de la barra lateral derecha o pasa el cursor sobre el ícono 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 las esquinas para rectángulos, estrellas y polígonos en el lienzo. 

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

Ajusta el radio de una esquina individual

De forma predeterminada, Figma aplica el radio de las esquinas a todas las formas. Hay algunas maneras de ajustar el radio de las esquinas para las esquinas individuales. 

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

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

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

1.  

Lienzo (solo rectángulos)

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

1. Selecciona la forma que deseas actualizar.
2. Mantén presionada la tecla modificadora para ajustar una sola esquina.
   • Mac: ⌥ Option
   • Windows: Alt
3. Pasa 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 objeto en la barra de herramientas o presiona Entrar o Retorno para ingresar en el modo de edición de vectores.
3. Selecciona el punto individual en el lienzo.
4. Ajusta el radio de la esquina usando el campo en la barra lateral derecha.
5. Introduce un valor de pixel en el campo Radio de la esquina o pasa el cursor sobre el ícono , luego arrastra hacia la izquierda para reducir y hacia la derecha para aumentar.

Suavizado de las esquinas para círculos cuadrados

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

Nos referimos a las formas que emplean este efecto particular de círculo cuadrado. Una forma que es una combinación un cuadrado con un círculo. Todavía vemos círculos cuadrados en los diseños posteriores de Apple, incluido el OS14.

Hay un poco de matemática detrás de un círculo cuadrado. Obtén más información sobre la búsqueda de círculos cuadrados por un ingeniero de Figma.

Ajusta el suavizado de las esquinas

Puedes aplicar el suavizado de las esquinas a cualquier forma a la que se pueda aplicar el radio de las esquinas. A diferencia del radio de las esquinas, solo puedes aplicar el suavizado de las esquinas a toda la forma.

1. Selecciona la capa en el lienzo o en el panel de capas.
2. Abre el panel de diseño en la barra lateral derecha.
3. Haz clic en el ícono 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.