- 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 en función de la longitud de su etiqueta. Los botones son elementos comunes que se utilizan en el diseño de la interfaz de usuario y este proyecto te ofrecerá experiencia práctica con la herramienta Texto y el diseño automático.
Para crear nuestro botón, haremos lo siguiente:
- Añade una capa de texto
- Convertir la capa de texto en un marco de diseño automático
- Dar estilo al botón
- Convertir el botón en un componente
Si sigues paso a paso, el botón final tendrá un aspecto similar al siguiente:
Añade una capa de texto
Empezaremos añadiendo una capa de texto.
- Habilita la herramienta Texto haciendo clic en la herramienta Texto en la barra de herramientas o usando 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 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é nombrar capas?
Nombrar capas en Figma Design es una práctica opcional, pero beneficiosa. Asignar nombres a las capas te ayuda a organizar tus diseños, encontrar y modificar las capas con mayor rapidez y a garantizar que tus colaboradores puedan encontrar lo que necesitan al ver tu archivo.
Cuando añades una capa de texto, el nombre de la capa coincide automáticamente con el que has escrito en el lienzo hasta que le cambies el nombre. Para otros tipos de objetos, los nombres predeterminados son menos descriptivos. Por ejemplo, cada marco que añadas a un archivo de diseño se llamará «Marco 1», «Marco 2», y así sucesivamente. Plantéate la posibilidad de dar a estas capas nombres descriptivos para mejorar el flujo de trabajo y la organización de los archivos.
Para cambiar el nombre de una capa, haz doble clic en la capa en la barra lateral izquierda y escribe un nuevo nombre.
Ya que estamos aquí, aumentemos el tamaño de la fuente en 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 Mantendremos la fuente predeterminada Inter, pero no dudes en elegir otro estilo de fuente si lo deseas.
¿Cómo elegir un tamaño de fuente?
Al diseñar experiencias digitales, es útil establecer una base para tu sistema de escritura.
Puedes hacerlo creando una jerarquía tipográfica que determine la escala de tus fuentes, de menor a mayor. Empieza por decidir el tamaño de la fuente del cuerpo del texto, ya que es lo que utilizarás con más frecuencia en tus diseños. Es una buena práctica configurar el cuerpo del texto entre 16 px y 18 px, dependiendo de la fuente que elijas.
A menudo se recomienda el tamaño 16px por su facilidad para crear escalas tipográficas consistentes. El número 16 se puede dividir fácilmente en secciones para crear espacios armoniosos, márgenes, tamaños de encabezados, etc.
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 coche, es posible que tuvieras que aumentar la escala de la fuente para ajustarla a botones con superficies más grandes en las que hacer clic.
Además, no todas las fuentes se escalan visualmente al mismo tamaño. Si los usuarios tienen dificultades para leer el cuerpo del texto, plantéate aumentar el tamaño del cuerpo del texto o cambiar la fuente a otro estilo.
Convertir la capa de texto en un marco de diseño automático
Nuestro botón todavía no tiene un aspecto muy glamuroso, pero estamos a punto de darle un toque más atractivo usando el diseño automático.
Puedes aplicar el diseño automático a un marco existente o utilizarlo 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 Diseño automático de la barra lateral derecha, asegúrate de que los ajustes de Redimensionamiento horizontal y vertical estén configurados como Ajustar. Haz doble clic en el nuevo marco en la barra lateral izquierda y cámbiale el nombre a Botón.
¿Por qué utilizar el diseño automático?
El diseño automático es una de las funciones más potentes de Figma Design. Puedes usar el diseño automático para crear diseños adaptables con un gran aspecto en diferentes tipos de dispositivos y que se adapten a cambios como el tamaño del contenido. Los marcos de diseño automático tienen propiedades de cambio de tamaño, que indican al marco cómo debe comportarse cuando las capas que contiene cambian de tamaño y se redistribuyen.
Hay dos propiedades de cambio de tamaño que puedes elegir para un marco de diseño automático:
- Anchura fija o Altura fija: el marco no cambiará de tamaño, incluso si sus capas anidadas se redimensionan y reajustan
- Ajustar al contenido: el marco cambiará de tamaño para adaptarse a sus capas anidadas
Como estamos usando la propiedad de redimensionamiento de ajustar al contenido, nuestro botón cambiará de tamaño según la longitud de la etiqueta. Pruébalo tú mismo haciendo doble clic en el texto y escribiendo Registrarse o Continuar.
Dar estilo al botón
Añade un poco de color
- Selecciona la capa Botón y haz clic en el signo más en la sección Relleno de la barra lateral derecha para añadir un color de relleno.
- Utiliza el selector de color para cambiar el color. Estamos utilizando el código de color
#33B249. - Selecciona la capa de etiqueta anidada dentro de la capa de 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 a 6.
¿Por qué redondear las esquinas de los botones?
Las esquinas redondeadas pueden parecer poca cosa, pero pueden tener un gran impacto en el aspecto de tus diseños finales. Las esquinas redondeadas suavizan la estética de su diseño, haciéndolo parecer más amigable 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 tu botón si su diseño coincide con otras interfaces que utilizan.
Fijar el espaciado
Por último, vamos a arreglar el espaciado del marco. Cuando convertimos la capa de texto en un marco de diseño automático, añadió automáticamente un espaciado entre el límite del marco y el texto del interior. En este momento, el espaciado es igual por todos los lados. Queremos que el relleno superior e inferior sea menor que el relleno izquierdo y derecho.
- Selecciona la capa Botón.
- Sitúa el cursor sobre el marco seleccionado. Las asas que aparecen permiten cambiar el espaciado. Puedes hacer clic en el asa y arrastrarla para modificar el espaciado, o hacer clic una vez en el asa y escribir un número en el cuadro que aparece.
- Utiliza cualquiera de los métodos para actualizar el relleno a lo siguiente:
- Espaciado superior e inferior:
8 - Espaciado izquierdo y derecho:
16
- Espaciado superior e inferior:
Consejo: puedes cambiar el espaciado superior e inferior o el espaciado izquierdo y derecho al mismo tiempo mediante los siguientes atajos:
- Mantén pulsado ⌥ Option (macOS) o Alt (Windows) y, a continuación, haz clic en el área de espaciado para introducir el valor de espaciado de los lados opuestos
- Mantén pulsado ⌥ Option (macOS) o Alt (Windows) y, a continuación, haz clic en el área de espaciado para introducir el valor de espaciado de los lados opuestos
Convertir el botón en un componente
¡Nuestro diseño de botón está completo! Antes de terminar nuestro proyecto, convirtámoslo en un componente para que podamos reutilizarlo en futuros diseños.
- Selecciona la capa Botón.
- Haz clic en Crear componente en la barra lateral derecha.
Ahora puedes añadir 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. Más información sobre el uso de componentes →
¿Y ahora qué?
¡Felicidades! Has diseñado un botón adaptativo en Figma Design utilizando la disposición automática. ¿Buscas tu próximo reto? Consulta nuestro proyecto Diseña un botón interactivo para adquirir más experiencia práctica.