Tabs con borde inferior con radio en Figma

Aunque Figma en muchas cosas está por delante de Sketch trabajando el día a día con él me estoy dando cuenta que le quedan por pulir algunas cosas. En Sketch crear un Tab, ponerle una linea debajo con un radio y que crezca con el texto del tab es muy fácil desde que metieron el Autolayout.

En Figma tenemos el Autolayout pero no es igual al de Sketch. Tiene cosas mejoras y cosas peores. En principio me gustaba más el de Figma ya que me recuerda más al cuando cuando lo escribes en código.

El problema

Básicamente el problema que tenemos es que si queremos que la linea crezca en función del texto solo nos queda ponerle al Autolayout formado por una capa de texto solamente un background y un Shadow.

Solo que de esta forma no conseguiremos que ese Shadow tenga los bordes redondeados para nuestros Tabs. En caso de quererlo sin border radius listo, fácil y sencillo.

La solución parcheada

Aunque soluciona el problema de los border redondeados que crecen según la capa de texto en Figma es un parche. Demasiado rebuscado y apaños para llegar a la solución. Pero como por ahora es la única opción la comparto con vosotros.

Aquí podéis comprobar que funciona. Además podemos ir complicándolo más con iconos, más autolayouts etc.

Como con ese Iframe solo se puede curiosear por encima dejo un enlace de descarga para que además de poder seguir los pasos podáis editar y destrozar la prueba 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>