- Producto: Figma Design
- Temas: texto, disposición automática, color
- Duración: 10 minutos
En este proyecto, vamos a diseñar un botón simple que cambia de tamaño automáticamente según la longitud de su etiqueta. Los botones son elementos comunes utilizados en el diseño de la UI y este proyecto te brindará experiencia práctica utilizando la herramienta Texto y la disposición automática.
Para crear nuestro botón, haremos lo siguiente:
- Agregar una capa de texto
- Convertir la capa de texto en un marco con disposición automática
- Darle estilo al botón
- Convertir el botón en un componente
Si sigues el procedimiento paso a paso, el botón final tendrá un aspecto similar al siguiente:
Agregar una capa de texto
Comenzaremos agregando una capa de texto.
- Activa la herramienta Texto haciendo clic en ella en la barra de herramientas o mediante el atajo de teclado T.
- Haz clic en el lienzo y escribe
Botónpara crear la capa de texto.
En la barra lateral izquierda, notarás que el panel de capas en la barra lateral izquierda tiene una nueva capa de texto llamada “Botón”. Haz doble clic en la capa y cámbiale el nombre a Etiqueta.
¿Por qué debería elegir un nombre para las capas?
Asignarles nombres a las capas de Figma Design es opcional, pero beneficioso. Te ayuda a organizar tus diseños, encontrar y modificar capas más rápido y garantizar que tus colaboradores puedan encontrar lo que necesitan al ver tu archivo.
Cuando agregas una capa de texto, el nombre de la capa coincide automáticamente con lo que has escrito en el lienzo hasta que le cambias el nombre. Para otros tipos de objetos, los nombres predeterminados son menos descriptivos. Por ejemplo, cada marco que agregues a un archivo de diseño se llamará “Marco 1”, “Marco 2” y así sucesivamente. Considera darles a estas capas nombres descriptivos para mejorar tu flujo de trabajo y la organización de archivos.
Para cambiar el nombre de una capa, haz doble clic en la capa en la barra lateral izquierda y escribe un nuevo nombre.
Mientras estamos aquí, aumentemos el tamaño de fuente de nuestra capa de texto. Con la capa de texto seleccionada, usa la configuración en la sección Texto de la barra lateral derecha para cambiar el tamaño de fuente a 16. Nos quedaremos con la fuente predeterminada Inter, pero no dudes de elegir otro estilo de fuente si quieres hacerlo.
¿Cómo elegir un tamaño de fuente?
Al diseñar experiencias digitales, resulta útil establecer una base para el sistema de tipos.
Puedes hacerlo creando una jerarquía tipográfica que determine la escala de tus fuentes, de menor a mayor. Comienza por decidir el tamaño de fuente del cuerpo del texto, ya que es lo que usarás con mayor frecuencia en tus diseños. Se recomienda configurar el cuerpo del texto entre 16 px y 18 px, dependiendo de la fuente que elijas.
A menudo se recomienda el tamaño 16 px por su facilidad para crear escalas tipográficas consistentes. El número 16 se puede dividir fácilmente en secciones para crear armoniosos espacios, márgenes, tamaños de encabezados, entre otros.
Recuerda que es importante tener en cuenta el contexto del diseño general a la hora de establecer la jerarquía. Por ejemplo, si estuvieras diseñando botones para la pantalla táctil de un automóvil, es posible que debas aumentar el tamaño de la fuente para que los botones tengan superficies más grandes y fáciles de tocar.
Además, no todas las fuentes escalan visualmente al mismo tamaño. Si a los usuarios les resulta difícil leer el cuerpo de texto, considera aumentar el tamaño del cuerpo de texto o cambiar el estilo de fuente.
Convertir la capa de texto en un marco con disposición automática
Nuestro botón aún no se ve muy glamoroso, pero estamos a punto de darle un toque de estilo con la disposición automática.
Puedes aplicar la disposición automática a un marco existente o emplearla para convertir una capa en un marco. Usaremos la segunda opción. Selecciona la capa Etiqueta y usa el atajo Shift A.
En la sección Disposición automática de la barra lateral derecha, revisa que las configuraciones Cambio de tamaño horizontal y Cambio de tamaño vertical estén configuradas en Adaptar. Haz doble clic en el nuevo marco en la barra lateral izquierda y cámbiele el nombre a Botón.
¿Por qué emplear la disposición automática?
La disposición automática es una de las funciones más poderosas de Figma Design. Puedes usar la disposición automática para crear diseños reactivos que se vean geniales en diferentes tipos de dispositivos y que se adapten a cambios como el tamaño del contenido. Los marcos con disposición automática tienen propiedades de cambio de tamaño, lo que indica al marco cómo comportarse cuando las capas dentro de él se redimensionan y reajustan.
Hay dos propiedades de cambio de tamaño que puedes elegir para un marco con disposición automática:
- Ancho fijo o Alto fijo: El marco no cambiará de tamaño, incluso si sus capas anidadas se redimensionan y reajustan.
- Ajustar al contenido: El marco se redimensionará para adaptarse a sus capas anidadas.
Como estamos utilizando la propiedad de cambio de tamaño Ajustar al contenido, nuestro botón cambiará de tamaño según la longitud de la etiqueta. Prueba por ti mismo al hacer doble clic en el texto y escribir Regístrate o Continuar.
Darle estilo al botón
Agregar un poco de color
- Selecciona la capa Botón y haz clic en el signo más de la sección Relleno en la barra lateral derecha para agregar un color de relleno.
- Usa el selector de color para cambiar el color. Estamos empleando el código de color
#33B249. - Selecciona la capa Etiqueta anidada en la capa del marco y ajusta el relleno a
#FFFFFF.
Redondear las esquinas
- Selecciona la capa Botón.
- En la barra lateral derecha, configura el Radio de esquina en 6.
¿Por qué redondear las esquinas de los botones?
Redondear las esquinas puede parecer algo pequeño, pero puede tener un gran impacto en la apariencia de tus diseños finales. Suaviza la estética de tu diseño, lo que lo hace parecer más agradable y accesible que los objetos con bordes afilados.
Más allá de la estética, es común que los elementos interactivos en las interfaces digitales modernas tengan esquinas redondeadas. Esto significa que es más probable que los usuarios entiendan que pueden hacer clic en el botón si su diseño coincide con otras interfaces que emplean.
Arreglar el margen interior
Finalmente, vamos a ajustar el margen interior del marco. Cuando convertimos la capa de texto en un marco de diseño automático, se agrega automáticamente un margen interior entre el borde del marco y el texto interior. En este momento, el margen interior es igual en todos los lados. Queremos que el margen interior superior e inferior sea menor que el margen interior izquierdo y derecho.
- Selecciona la capa Botón.
- Pasa el cursor sobre el marco seleccionado. Los controles que aparecen te permiten cambiar el margen interior. Puedes hacer clic y arrastrarlos para modificar el margen interior o hacer clic una vez en estos y escribir un número en el cuadro que aparece.
- Usa cualquiera de los métodos para actualizar el margen interior a lo siguiente:
- Margen interior superior e inferior:
8 - Margen interior izquierdo y derecho:
16
- Margen interior superior e inferior:
Sugerencia: Puedes cambiar el margen interior superior e inferior o el margen interior izquierdo y derecho al mismo tiempo con los siguientes atajos:
- Mantén presionado ⌥ Option (macOS) o Alt (Windows) y, luego, haz clic en el área del margen interior para ingresar el valor del margen interior de los lados opuestos.
- Mantén presionado ⌥ Option (macOS) o Alt (Windows) mientras arrastras los controladores para cambiar el margen interior de los lados opuestos.
Convertir el botón en un componente
¡Nuestro diseño del botón está listo! Antes de terminar nuestro proyecto, convirtámoslo en un componente para que podamos reutilizarlo en otros diseños.
- Selecciona la capa Botón.
- Haz clic en Crear componente en la barra lateral derecha.
Ahora puedes agregar instancias de tu botón desde la pestaña Recursos en la barra lateral izquierda para que nunca más tengas que diseñar un botón desde cero. Obtén más información sobre el uso de componentes →
¿Y ahora qué?
¡Felicitaciones! Diseñaste un botón adaptable en Figma Design utilizando la disposición automática. ¿Buscas tu próximo desafío? Consulta nuestro proyecto Diseña un botón interactivo para adquirir más experiencia práctica.