En Figma podemos crear botones que tengan un ajuste automático del texto, así podremos mantener la proporción y medidas establecidas en el padding, lo que se traducirá a un diseño mas ordenado y estandarizado de nuestra interfaz.
A continuación les comparto los pasos, pero si desean ver este tutorial en video, pueden ingresar a este enlace: https://youtu.be/bpcOTsykThM
Paso 01: Ir al menú superior y seleccionar la herramienta texto.
Paso 02: Hacer click en cualquier parte del area de trabajo para colocar un texto y escribir el texto deseado para el botón.
Paso 03: Con el texto seleccionado, ir al menú > Object > Add Auto Layout (Shift +A). COn esto se creará un Frame que contendrá el texto.
Paso 04: En el panel de propiedades (lado derecho) buscar el panel FILL (relleno) y hacer un click en el signo "+" para añadir un color de relleno al Frame que acabamos de crear.
Paso 05: Seleccionar el color deseado para el fondo del boton.
Paso 06: Hacer un click sobre el texto y ahora ir al area de Fill y cambiar a un color que contraste con el color de fondo seleccionado.
Paso 7: Hacer click nuevamente en el Frame (fondo del botón) para seleccionarlo y ahora ir al area de propiedades y en Auto Layout es posible cambiar el Padding Horizontal y Vertical. Para que el botón quede como las imágenes de ejemplo podremos utilizar un Padding Horizontal de 20 y un Padding Vertical de 10.
Si el diseño de nuestros botones en cuadrado, entonces ya tenemos listo el botón. Si por le contrario, el botón debe tener esquinas redondeadas podemos añadir otro paso adicional.
Paso 08: Seleccionar el Frame (fondo del botón), y en las propiedades ir a Frame. Al final de ese panel tendremos el Corner Radius o Radio de Esquinas, si cambiamos el numero de 0 a 10, entonces ahora tendremos esquinas redondeadas para nuestro botón.
Para ver este proceso en video y tener mas detalles del paso a paso, el video-tutorial está disponible desde este enlace: https://youtu.be/bpcOTsykThM
Publicar un comentario