Si has diseñado durante suficiente tiempo, sabes cómo las decisiones pequeñas acaban conformando todo el producto. El tipo de detalles que nadie menciona, pero que todos sienten. Hoy Framer ha implementado soporte nativo para el uso de los squircles, y sinceramente, ya era hora. Apple ha estado utilizando esta forma por todas partes durante más de una década, construyendo silenciosamente todo un lenguaje visual alrededor de ella.

No es solo una esquina bonita. Afecta cómo se lee una interfaz, cómo fluye y cómo se siente su acabado. Y ahora que Framer lo soporta de forma nativa, esta forma ha pasado oficialmente de ser una geometría de nicho a un estándar moderno de UI.

Entonces, ¿qué es exactamente un squircle?

Un squircle es una superelipse. No es un círculo. No es un rectángulo con esquinas redondeadas. Es algo intermedio. La curva se mantiene suave alrededor de todo, pero conserva un poco más de “peso” en las esquinas. Si intentaras dibujarlo a mano, probablemente es lo que dibujarías instintivamente.

Se siente más suave que un radio típico y menos mecánico que un círculo perfecto. Ese equilibrio es la razón por la que funciona tan bien. Se ve intencional sin llamar la atención sobre sí mismo.

Apple lo descubrió hace años

Apple nunca hizo un gran anuncio como “Estamos cambiando a superelipses para todo”. Simplemente lo hicieron.

• Los iconos de iOS, desde iOS 7, siguen una cuadrícula de squircle

• La huella del Apple Park es una gigantesca superelipse

• El hardware del Apple Watch refleja la misma curva

• Incluso los botones del sistema y las tarjetas utilizan la misma lógica

• 
  

Por esto el ecosistema de Apple se ve consistente incluso cuando los estilos cambian. La curva actúa como el aglutinante. Hardware y software comparten una “gravedad visual” común.

Mientras tanto, el resto de nosotros estábamos usando border-radius: 8px como si resolviera todo.

Framer finalmente lo ha hecho bien

Con la actualización de hoy, Framer te permite incluir squircles en tus componentes sin trucos, máscaras SVG, o marcos extraños. Es limpio, nativo y funciona dentro del editor visual.

Para cualquiera que haya pasado demasiado tiempo peleando con la consistencia de formas en los sistemas de diseño, esto es un soplo de aire fresco. Un recurso menos que mantener. Un momento menos de “por qué esta esquina se siente mal”.

Y, sinceramente, esta actualización dice algo sobre hacia dónde se dirige la UI. Cuando una herramienta común adopta una forma como esta, significa que los usuarios ya esperan que las interfaces se sientan un poco más orgánicas.

Consulta la actualización de hoy: https://www.framer.com/updates/december-update-2025

Pero no necesitas Framer para usar squircles

Si estás desarrollando para la web, has podido hacerlo durante años. Simplemente no está disponible en un menú desplegable.

Aquí está la versión simple usando clip-path con una ruta que generas:

.squircle {
width: 200px;
height: 200px;
background: #000;
clip-path: path("M0.5,0 ..."); /* paste your superellipse path here */
}

.squircle {
width: 200px;
height: 200px;
background: #000;
clip-path: path("M0.5,0 ..."); /* paste your superellipse path here */
}

.squircle {
width: 200px;
height: 200px;
background: #000;
clip-path: path("M0.5,0 ..."); /* paste your superellipse path here */
}

.squircle {
width: 200px;
height: 200px;
background: #000;
clip-path: path("M0.5,0 ..."); /* paste your superellipse path here */
}

Hay muchos generadores de superelipses por ahí. Introduces tu radio, copias la ruta y estás listo.

Si quieres algo menos preciso pero rápido, puedes hacer trampas un poco:

.squircle-lite {
  border-radius: 30% / 40%;
}

.squircle-lite {
  border-radius: 30% / 40%;
}

.squircle-lite {
  border-radius: 30% / 40%;
}

.squircle-lite {
  border-radius: 30% / 40%;
}

No es perfecto, pero cuando solo necesitas la vibra, funciona sorprendentemente bien.

Por qué esta forma importa más de lo que piensas

Las esquinas influencian cómo las personas procesan densidad, jerarquía y comodidad.

• Las esquinas duras se sienten estrictas. Afiladas. Funcionales.

• Los círculos perfectos se sienten juguetones, a veces demasiado juguetones.

• Los squircles se sitúan en el punto justo. Suaves, pero aún estructurados.

Reducen el “mordisco” visual de los elementos de la UI sin convertir todo en un juguete. En los tableros de control, ayudan a que el diseño respire. En productos de marca, añaden una firma sutil. En dispositivos móviles, se adaptan a la ergonomía física a la que ya estamos acostumbrados.

Son cambios pequeños, pero se suman rápidamente.

¿Deberías comenzar a usar squircles en todas partes?

Probablemente no. Como cualquier elección de estilo, funciona mejor cuando tiene un propósito.

Pruébalos en:

• Botones que necesitan un punto de entrada más suave

• Tarjetas con mucho espacio en blanco

• Avatares o miniaturas

• Componentes clave en tu sistema de diseño

Evítalos para:

• Modales grandes

• Tablas densas

• Cualquier cosa que requiera estructura estricta

Úsalos intencionalmente. No porque estén de moda, sino porque la pantalla lo necesita.

Si quieres probarlo hoy

• En Framer, solo elige la nueva forma.

• En CSS, usa clip-path o radios basados en porcentajes.

• En Figma, los plugins pueden generarte verdaderas superelipses.

Comienza pequeño. Reemplaza una tarjeta o un botón. Verás la diferencia. Estos microajustes son los que separan una página que “funciona” de una página que se siente diseñada.