Ajusta el radio y el suavizado de esquinas
Este artículo está disponible tanto para la UI anterior de Figma como para la nueva. Utiliza el conmutador de la parte inferior izquierda de la página para seleccionar tu UI actual. Conoce UI3: el rediseño de Figma →
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".
Nota: Es posible que las esquinas redondeadas no estén disponibles para los rectángulos que crees con la herramienta de pluma o rectángulos que edites en el modo de edición vectorial.
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
Nota: No es posible aplicar el radio de las esquinas a líneas, flechas, redes vectoriales con un solo trazo u operaciones booleanas que solo contienen elipses.
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.
Consejo: Los ajustes de Desplazamiento pequeño y Desplazamiento grande también se aplican a la radio de las esquinas. Emplea las teclas ← y → para usar el desplazamiento pequeño. Mantén pulsado Shift para usar el deslazamiento grande con las teclas de flecha.
Pestaña Diseño
- Selecciona la capa.
- 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.
- Selecciona la forma que deseas actualizar.
- Pasa el cursor sobre la esquina que deseas ajustar hasta que aparezca el controlador de radio.
- 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.
Advertencia: No es posible ajustar el radio de una esquina individual en una instancia. Ten esto en cuenta a la hora de establecer el radio de las esquinas de los componentes.
Ajuste de esquinas independientes (solo rectángulos y marcos)
- Selecciona el rectángulo o marco que deseas actualizar.
- En la barra lateral derecha, haz clic en Esquinas independientes.
- 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.
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.
- Selecciona la forma que deseas actualizar.
- Mantén presionada la tecla modificadora para ajustar una sola esquina.
- Mac: ⌥ Option
- Windows: Alt
- Pasa 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 Return para ingresar en el modo de edición vectorial.
- Selecciona el punto individual en el lienzo.
- Ajusta el radio de la esquina usando el campo en la barra lateral derecha.
- Introduce un valor de pixel en el campo Radio de la esquina o pasa el cursor sobre el ícono , luego haz clic y 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.
- Selecciona la capa que deseas actualizar.
- Abre el panel de diseño en la barra lateral derecha.
- Haz clic en el ícono 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 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".
Nota: Es posible que las esquinas redondeadas no estén disponibles para los rectángulos que crees con la herramienta de pluma o rectángulos que edites en el modo de edición vectorial.
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
Nota: No es posible aplicar el radio de las esquinas a líneas, flechas, redes vectoriales con un solo trazo u operaciones booleanas que solo contienen elipses.
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.
Consejo: Los ajustes de Desplazamiento pequeño y Desplazamiento grande también se aplican a la radio de las esquinas. Emplea las teclas ← y → para usar el desplazamiento pequeño. Mantén pulsado Shift para usar el deslazamiento grande con las teclas de flecha.
Pestaña Diseño
- Selecciona la capa.
- 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.
- Selecciona la forma que deseas actualizar.
- Pasa el cursor sobre la esquina que deseas ajustar hasta que aparezca el controlador de radio.
- 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.
Advertencia: No es posible ajustar el radio de una esquina individual en una instancia. Ten esto en cuenta a la hora de establecer el radio de las esquinas de los componentes.
Ajuste de esquinas independientes (solo marcos y rectángulos)
La configuración Esquinas independientes está disponible para rectángulos y marcos.
- Selecciona el rectángulo o marco que deseas actualizar.
- En la barra lateral derecha, haz clic en Esquinas independientes.
- 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.
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.
- Selecciona la forma que deseas actualizar.
- Mantén presionada la tecla modificadora para ajustar una sola esquina.
- Mac: ⌥ Option
- Windows: Alt
- Pasa 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 objeto en la barra de herramientas o presiona Entrar o Retorno para ingresar en el modo de edición de vectores.
- Selecciona el punto individual en el lienzo.
- Ajusta el radio de la esquina usando el campo en la barra lateral derecha.
- 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.
- Selecciona la capa en el lienzo o en el panel de capas.
- Abre el panel de diseño en la barra lateral derecha.
- Haz clic en el ícono 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.