Efecto hover en figma

El efecto hover en un botón es fácil de hacer en figma, hoy te enseño como hacerlo de forma rápida.

➨ Paso 1: Vas crear dos botones y le darás el diseño de tu preferencia, yo los diseñe como se ve en captura.

➨ Paso 2: Selecciona tu botón y da clic en prototype en la parte superior derecha como se en la captura.

Posteriormente en tu botón se activara un más como se ve a continuación en la captura.

Ahora vas a seleccionar tu segundo botón como se en la captura.

➨ Paso 3: Bien, ahora vas a realizar la siguiente configuración para que sea hover.

➨ Paso 5: Muy bien, ahora ejecútalo, debió quedarte de la siguiente manera, como se muestra.

Espero te haya servido de ayuda.

Comentarios

Entradas populares de este blog

Cómo cambiar al navegador BRAVE a español u otro idioma.

C uando se descarga el navegador bravo por default esta en ingles pero si tu lo quieres cambiar a español, sigue estos simples pasos. ➤ Paso 1: Abre el navegador y en la parte inferior derecha clic en configuración (settings). ➤ Paso 2: Selecciona languages. ➤ Selecciona la flecha que se muestra en la captura anterior y se despliega lo siguiente: ➤ Paso 3: Selecciona Add languages. Busca el idioma español o cualquier otro idioma que quieras añadir. Además puedes añadir tantos como quieras. A continuación se muestra como se ve al seleccionar el idioma de español: Ahora para que el primer idioma sea español selecciona como se muestra a continuación y da clic en Move up para mover arriba o Move down abajo con las opciones que están a la derecha de cada idioma y que se ve seleccionado en la siguiente captura: ¡ Listo ahora el idioma de nuestro navegador estará en español ! Además podrás seleccionar la opción de “...

Cómo hace un slider con FIGMA

A continuación te explico paso a paso como lograr un slider con figma , rápido y sencillos. ➤ Paso 1: Selecciona el frame de tu preferencia, en mi caso seleccioné Desktop 1440 x 1024. ➤ Paso 2: Agrega todo el contenido que quieras que se visualice en tu slider, en mi caso agregue lo siguiente como se muestra en la siguiente captura . ➤ Paso 3: Como se muestra en la captura vas a seleccionar Rectangle . En tu frame en la parte inferior vas agregar tres rectangle con las siguentes medidas w(ancho): 90 y h(altura):6 como se muestra en la captura. El primer rectangle (rectangulo) debe tener las siguientes características. Los siguientes dos rectangles (rectangulos) deben tener las siguientes características. ➤ Paso 4: Ahora vas a duplicar el primer frame como se muestra e la captura. Ahora procederemos a cambiar la información y la imagen como se muestra en la captura. Muy bien, el siguiente paso es camb...

Comandos básicos de Git

Cambiar tu nombre de usuario: git config --global user.name "user name" Cambiar correo electronico: git config --global user.email "correo" Para saber en qué estado están los archivos antes de hacer git add o git commit git status Los c ambios que quieres incluir en el próximo commit git add archivo (agrega un archivo en específico) git add . (agrega todos los cambios) Hacer el commit git commit -m "Mensaje del commit" Ejemplo : git commit -m "[ADD] modulo" git commit -m "[FIX] modulo" git commit -m "[UPDATE] modulo" Subir tus cambios (commits) git push origin nombre_rama Actualizar una rama git pull origin nombre_rama Cambiar de rama git checkout nombre_rama Crear rama y cambiarte git branch -b nombre_rama Regresar al commit anterior sin perder los cambios git reset HEAD~1 Quitar un archivo en especifico que no quieras subir a un commit git restore --staged archivo Cambiar el mensaje de un commit git commit --amend -m ...

2BsTeam

Buscar este blog