Cómo crear un botón en Figma

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

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

Crear un botón

Los botones son elementos comunes que se utilizan al diseñar una interfaz de usuario funcional. Puede 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 una altura de 50 px y una anchura de 200 px 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. Agrupa los componentes como quieras que sean.

Puede agregar colores creando algunos usando el selector de color, o puede acceder a los 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 usar ambas opciones para ver cuál funciona mejor. Si no le gusta ninguna de las opciones, puede ajustar el estilo y el color del botón.

Creación de botones básicos

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

Botón principal

Los botones primarios son 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, luego aplique el color seleccionado.

   

3. Coloree 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 puede crear. También debe dibujar los ojos del usuario.

1. Cambia el color de tu rectángulo a blanco (#FFFFFF).

   

2. En el rectángulo, agregue un trazo. Puedes elegir el color que prefieras aquí.

   

3. Cambie el color de su 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 sin formato y pueden estar subrayados en algunos casos.

1. Haz tu rectángulo blanco sin trazo.

   

2. Cambie el color del texto a lo que prefiera.

   

Puede crear un botón terciario que parezca 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 con 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 simple de lograr. Para crear un botón, debe crear su capa de texto, convertir su capa de texto en un marco de diseño automático y diseñar su botón.

Crear 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 en el 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 puede jugar con el tamaño de fuente aumentándolo o reduciéndolo.

1. Seleccione su capa de texto.

   

2. Navegue a la barra lateral derecha y cambie el tamaño de fuente en la sección «Texto». También puede cambiar la fuente o atenerse a la opción predeterminada.

   

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

En este punto, el botón debe ajustarse aún más para que se vea glamoroso. Con el diseño automático, puedes animar un poco más las cosas. El diseño automático es una característica poderosa en Figma y se puede aplicar para diseños receptivos. 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 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 un 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 ajustar aún más.
• Observa que el marco se encoge y crece con los cambios de texto. Con elementos tan dinámicos, ahorras el tiempo necesario para diseñar el contenido visto en varios dispositivos o traducido a otros idiomas.

Aplicar estilo al botón

Puede 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. Una vez que el texto de la carta 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 sea más pequeño 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 accesos directos a continuación:

• Mantenga presionada <⌥ Opción> o <Alt>, luego haga clic en el área de relleno para ingresar el valor de relleno para los lados opuestos
• Mantenga presionada <⌥ Opción> o <Alt> mientras arrastra los controles para cambiar el relleno para los lados opuestos

En este punto, el botón se ve bien, pero aún puede 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 puede 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 utilizado por compañías 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.

Aquí 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» en la ventana de detalles de la interacción.

   

4. Seleccione la opción «Abrir enlace».

   

5. Agregue el enlace de la página donde el botón se dirigirá 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 su botón, cambia a un icono similar a una mano. Esto indica que ahora se puede hacer clic en el botón.

Nota: Al crear el botón de Figma en el que se puede hacer clic, siempre use «Al hacer clic», no «Al arrastrar». «Al hacer clic» permite agregar un enlace en el que se puede hacer clic al botón posible. No se puede hacer clic en los botones «Al arrastrar».

Diseñe mejor con los botones de 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 al máximo Figma y agregar componentes de valor dentro de la biblioteca de Figma.

¿Has intentado crear botones en Figma? Si es así, ¿cómo fue tu experiencia? Háganos saber en la sección de comentarios.