Cómo crear un botón en Figma

Por Lee Stanton Lee Stanton Autor Lee Stanton es un escritor versátil que se concentra en el panorama del software y abarca aplicaciones móviles y de escritorio, así como tecnologías en línea. Leer más• Editado por Evan GowerEvan Gower Editor Con más de una década de experiencia en publicaciones digitales. Evan lidera nuestro equipo con buen ojo para las tendencias tecnológicas emergentes. Leer más17 de agosto de 2023

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.

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:

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

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.

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

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:

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.

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.

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.

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.

En este paso, se utiliza la herramienta de texto.

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

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.

Puedes comenzar agregando color.

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:

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.

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:

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”.

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.

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

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

Comentario *

Nombre *

Correo electrónico *

Sitio web

Guarde mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que comente.

Descargo de responsabilidad: algunas páginas de este sitio pueden incluir un enlace de afiliado. Esto no afecta nuestra editorial de ninguna manera.

Lee Stanton22 de agosto de 2023

Lee Stanton21 de agosto de 2023

Lee Stanton18 de agosto de 2023

Lee Stanton 1 de abril de 2023

Steve Larner7 de marzo de 2023

Lee Stanton23 de agosto de 2022

Lee Stanton16 de agosto de 2022

Cassandra McBride3 de diciembre de 2022

Lee StantonFebrero 20, 2023

Cassandra McBride27 de julio de 2022

Lee Stanton 1 de abril de 2023

© Caja 20 LLC 2023

Contáctenos | Política de privacidad | Términos de servicio | Reservados todos los derechos