Cómo crear un botón en Figma

Los botones de diseño en Figma se pueden crear de diferentes maneras utilizando propiedades de componente y diseño automático en la plataforma. Como tal, los botones se pueden personalizar mediante etiquetas, tamaños e íconos. Si no estás seguro de cómo crear botones en Figma, has venido al lugar correcto.

Este artículo explicará cómo crear botones y cómo aprovechar Figma al máximo.

Creando un botón

Los botones son elementos comunes que se utilizan al diseñar una interfaz de usuario funcional. Puedes crear un botón en un diseño de Figma. Si eres nuevo en Figma, primero debes comprender los conceptos básicos.

Aquí hay una guía paso a paso para crear botones:

1. Crea un nuevo diseño de Figma.
   
2. Agregue un marco presionando la tecla F en su teclado, luego seleccione “escritorio” o “teléfono”.
   
3. Agregue un rectángulo con dimensiones de 50 px de alto y 200 px de ancho usando la tecla R del teclado.
   
4. Agregue texto presionando “T” en su teclado. Centre su texto para que esté en el medio de su cuadro de texto horizontal y verticalmente.
   
5. Coloque este cuadro de texto en el medio de su rectángulo.
   
6. Agrupe los componentes como desee.

Puede agregar colores creando algunos usando el selector de color, o puede acceder a colores hexadecimales desde Internet.

Contraste

El color del texto dentro del botón depende de si contrasta mejor con un fondo blanco o negro. Puede utilizar ambas opciones para ver cuál funciona mejor. Si no le gusta alguna de las opciones, puede ajustar el estilo y el color del botón.

Crear botones básicos

Hay tres botones básicos que se pueden crear en Figma.

Botón principal

Los botones principales son de colores sólidos con texto en blanco o negro. Este botón atrae a los usuarios mientras usan una aplicación. Así es como puedes crear uno:

1. Elige un color para tu botón.
2. Elija el rectángulo y luego aplique el color seleccionado.
   
3. Colorea el texto en blanco o negro, dependiendo del mejor contraste.
   

Botón secundario

Suele ser un botón blanco pero delineado con el color que elijas. El texto del botón también puede tener el mismo color. Este es el segundo botón más importante que puedes crear. También debería atraer la atención del usuario.

1. Cambia el color de tu rectángulo a blanco (#FFFFFF).
   
2. En el rectángulo, agrega un trazo. Puedes elegir el color que prefieras aquí.
   
3. Cambie el color del texto para que tenga el mismo color que el texto.
   

Botón terciario

Los botones terciarios no son tan importantes como los dos primeros. Pueden funcionar como botones de enlace, cancelación de suscripción o retroceso. Suelen estar en texto plano y en algunos casos pueden estar subrayados.

1. Haz que tu rectángulo sea blanco sin trazo.
   
2. Cambia el color del texto al que prefieras.
   

Puede crear un botón terciario que se parezca a un botón primario o secundario. También puede cambiar el ancho del trazo para obtener una mejor visibilidad.

Crear un botón usando texto, diseño automático y color

Con las herramientas de la plataforma, puede obtener experiencia práctica utilizando el diseño automático y la herramienta de texto. Con una guía paso a paso, crear un botón debería ser relativamente sencillo de lograr. Para crear un botón, necesita crear su capa de texto, convertir su capa de texto en un marco de diseño automático y darle estilo a su botón.

Creando una capa de texto

En este paso, se utiliza la herramienta de texto.

1. Tocando la herramienta de texto en la barra de herramientas o presionando la letra “T”.
   
2. Cuando la herramienta Texto esté activa, toque su lienzo e ingrese la palabra “Botón”. Tenga en cuenta que el nombre de la capa de texto coincidirá con lo que se escriba en el lienzo a menos que se cambie manualmente dentro del panel de capas.
   
3. Si es necesario cambiar el nombre de la capa, haga doble clic en la barra lateral izquierda y luego escriba el nuevo nombre que ha elegido.
   

Ahora también puedes jugar con el tamaño de fuente aumentándolo o disminuyéndolo.

1. Seleccione su capa de texto.
   
2. Navegue hasta la barra lateral derecha y cambie el tamaño de fuente en la sección “Texto”. También puede cambiar la fuente o seguir con la opción predeterminada.
   

Convierta su capa de texto en marcos de diseño automático

En este punto, es necesario modificar aún más el botón para que parezca glamoroso. Con el diseño automático, puedes darle vida un poco más a las cosas. El diseño automático es una característica poderosa de Figma y se puede aplicar para diseños responsivos. Estos diseños se adaptan automáticamente a cambios como el tamaño del contenido, la ubicación de los objetos y el tipo de dispositivo.

El diseño automático se puede aplicar para convertir capas en marcos o en marcos existentes. Para aplicar el diseño a un marco existente, seleccione su capa de texto, luego presione el atajo “Shift” “A”. Una vez que se haya aplicado el diseño, notará algunos cambios.

• La capa de texto estará dentro de un marco. El diseño automático solo se aplica a componentes y marcos, por lo que Figma coloca la capa de texto dentro del nuevo marco automáticamente. El marco no tiene color de relleno. Esto se aplica en el paso de estilo del botón.
• Al seleccionar su marco, la configuración de diseño automático se muestra en la barra lateral derecha. Los diseños automáticos se pueden modificar aún más.
• Observa que el marco se reduce y crece con los cambios de texto. Con elementos tan dinámicos, se ahorra el tiempo necesario para diseñar el contenido que se visualiza en varios dispositivos o se traduce a otros idiomas.

Aplicar estilo al botón

Puedes comenzar agregando color.

1. Elija una capa de marco, luego elija “Configuración de relleno” en la barra lateral derecha. Esto llena el color
   automáticamente. El selector de color cambia el color.
   
2. Seleccione la capa de texto y ajuste el relleno a #FFFFFF.
   
3. Elija el marco nuevamente, luego use la configuración de la barra lateral derecha para ajustar el radio de la esquina.
   

Lo siguiente es arreglar el acolchado del marco. Después de que el texto de la letra se convierte en un diseño de marco automático, se agrega automáticamente un relleno entre el texto y el límite del marco. El relleno en este punto parece igual en todos los lados. Puede cambiar el relleno inferior y superior para que sean más pequeños que el relleno derecho e izquierdo.

Puede actualizar el relleno como desee. El relleno izquierdo y derecho o el relleno superior e inferior se pueden cambiar al mismo tiempo con los atajos siguientes:

• Mantenga presionada la tecla o y luego haga clic en el área de relleno para ingresar el valor de relleno para los lados opuestos.
• Mantenga presionada la tecla o mientras arrastra los controles para cambiar el relleno de los lados opuestos.

En este punto, el botón se ve bien, pero aún puedes actualizar la etiqueta. Debe hacer doble clic en el texto para permitir la edición. Escriba las palabras “Registrarse”. El botón cambia de tamaño a medida que escribe. Así es como se diseña un botón usando la herramienta de texto y diseño automático. Ahora puedes probar algo nuevo, como convertir el botón en un componente o agregar una variante.

Hacer un botón en el que se puede hacer clic

Figma es utilizada por empresas como Uber, Facebook, Google y Netflix. La función de botón en el que se puede hacer clic facilita a los diseñadores de dichas empresas la creación de botones interactivos y en los que se puede hacer clic. Los botones facilitan mucho la navegación en este tipo de plataformas.

A continuación se explica cómo desarrollar dichos botones en Figma:

1. Elija la opción “Prototipo” en el menú (derecha).
   
2. Haga clic en el icono “Más” (+) que se encuentra debajo de la pestaña Prototipo. Esto le permite agregar una interacción.
   
3. Elija “Al hacer clic” dentro de la ventana de detalles de la interacción.
   
4. Selecciona la opción “Abrir enlace”.
   
5. Agregue el enlace de la página donde se dirigirá el botón una vez que se haga clic.
   
6. Toque el ícono “X” para salir de la ventana de detalles de la interacción.
   
7. Navegue hasta el botón de opción “Reproducir” en la esquina superior derecha.
   
8. Toque el botón “Reproducir” para obtener una vista previa del diseño.
   

Si pasa el cursor sobre el botón, cambia a un icono con forma de mano. Esto indica que ahora se puede hacer clic en el botón.

Nota: Al crear el botón Figma en el que se puede hacer clic, utilice siempre “Al hacer clic”, no “Al arrastrar”. “Al hacer clic” permite agregar un enlace al botón en el que se puede hacer clic. No se puede hacer clic en los botones “Al arrastrar”.

Diseñe mejor con los botones Figma

Los botones de Figma tienen variables como tema, estado, relleno interno, largo, ancho y alto de la tabla. Al aprender a crear botones en la plataforma, puede aprovechar Figma al máximo y agregar valor utilizando componentes dentro de la biblioteca de Figma.