Ajustar el radio y el suavizado de esquinas
Este artículo es aplicable tanto a la anterior IU de Figma como a la nueva. Utiliza el botón en la parte izquierda de la página para seleccionar tu IU actual. Conoce UI3: el rediseño de Figma →
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».
Nota: es posible que las esquinas redondeadas no estén disponibles para los rectángulos que crees con la herramienta bolígrafo o para los rectángulos que edites en el modo de edición vectorial.
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
Nota: no es posible aplicar radio de esquina a líneas, flechas, redes vectoriales con un solo trazo u operaciones booleanas que solo contienen elipses.
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.
Consejo: los ajustes de Pequeño desplazamiento y Gran desplazamiento también se aplican al radio de la esquina. Usa las teclas ← y → para utilizar un pequeño desplazamiento. Mantén pulsada Mayús para utilizar la configuración de gran desplazamiento con las teclas de flecha.
Pestaña de diseño
- Selecciona la capa.
- 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.
- Selecciona la forma que deseas actualizar.
- Coloca el cursor sobre la esquina que deseas ajustar hasta que aparezca el controlador de radio.
- 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.
Precaución: no es posible ajustar el radio de una esquina individual en una instancia. Esto es algo en lo que hay que pensar al establecer el radio de las esquinas de los componentes.
Configuración independiente de esquinas (solo para rectángulos y marcos)
- Selecciona el rectángulo o marco que deseas actualizar.
- Haz clic en Esquinas independientes en la barra lateral derecha.
- 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
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.
- Selecciona la forma que deseas actualizar.
- Mantén pulsada la tecla modificadora para ajustar una sola esquina.
- Mac: ⌥ Option
- Windows: Alt
- Coloca el cursor sobre la esquina que deseas ajustar hasta que aparezca el controlador de radio.
- Arrastra para ajustar el radio.
Modo de edición vectorial (solo formas)
- Selecciona la forma que deseas actualizar.
- Haz doble clic en la forma o pulsa Enter o Retorno para entrar en el modo de edición vectorial.
- Selecciona el punto individual en el lienzo.
- Ajusta el radio de la esquina utilizando el campo en la barra lateral derecha.
- 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, haz clic y 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.
- Selecciona la capa que deseas actualizar.
- Abre el panel Diseño de la barra lateral derecha.
- Haz clic en el icono Esquinas independientes para abrir el panel Radio de esquina.
- 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.
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».
Nota: es posible que las esquinas redondeadas no estén disponibles para los rectángulos que crees con la herramienta bolígrafo o para los rectángulos que edites en el modo de edición vectorial.
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
Nota: no es posible aplicar radio de esquina a líneas, flechas, redes vectoriales con un solo trazo u operaciones booleanas que solo contienen elipses.
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.
Consejo: los ajustes de Pequeño desplazamiento y Gran desplazamiento también se aplican al radio de la esquina. Usa las teclas ← y → para utilizar un pequeño desplazamiento. Mantén pulsada Mayús para utilizar la configuración de gran desplazamiento con las teclas de flecha.
Pestaña de diseño
- Selecciona la capa.
- 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.
- Selecciona la forma que deseas actualizar.
- Coloca el cursor sobre la esquina que deseas ajustar hasta que aparezca el controlador de radio.
- 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.
Precaución: no es posible ajustar el radio de una esquina individual en una instancia. Esto es algo en lo que hay que pensar al establecer el radio de las esquinas de los componentes.
Ajuste de esquinas independientes (solo marcos y rectángulos)
La configuración de esquinas independientes está disponible para rectángulos y marcos.
- Selecciona el rectángulo o marco que deseas actualizar.
- Haz clic en Esquinas independientes en la barra lateral derecha.
- 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
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.
- Selecciona la forma que deseas actualizar.
- Mantén pulsada la tecla modificadora para ajustar una sola esquina.
- Mac: ⌥ Option
- Windows: Alt
- Coloca el cursor sobre la esquina que deseas ajustar hasta que aparezca el controlador de radio.
- Arrastra para ajustar el radio.
Modo de edición vectorial (solo formas y redes vectoriales cerradas)
- Selecciona la forma que deseas actualizar.
- 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.
- Selecciona el punto individual en el lienzo.
- Ajusta el radio de la esquina utilizando el campo en la barra lateral derecha.
- 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.
- Selecciona la capa en el lienzo o en el panel Capas.
- Abre el panel Diseño de la barra lateral derecha.
- Haz clic en el icono Esquinas independientes para abrir el panel Radio de esquina.
- 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.