Ir al contenido principal

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.

imagen del blog

Paso 1: Selecciona el frame de tu preferencia, en mi caso seleccioné Desktop 1440 x 1024.imagen del blog

 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.

imagen del blog

 Paso 3: Como se muestra en la captura vas a seleccionar Rectangle.
  
imagen del blog

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. 

imagen del blog

El primer rectangle (rectangulo) debe tener las siguientes características. 

imagen del blog

Los siguientes dos rectangles (rectangulos) deben tener las siguientes características. 

imagen del blog

 Paso 4: Ahora vas a duplicar el primer frame como se muestra e la captura.

imagen del blog

Ahora procederemos a cambiar la información y la imagen como se muestra en la captura.

imagen del blog

Muy bien, el siguiente paso es cambiar el rectangles 1(rectangulo1) y rectangle 2 (rectangulo 2) como se ve en la captura.

imagen del blog

 Paso 5: Ahora repite los paso 4 y tendrás lo siguiente.

imagen del blog

 Paso 6: Muy bien, ahora le daremos la funcionalidad. Selecciona el primer frame(slider) como se muestra en la captura.

imagen del blog


Ahora selecciona la bolita que tiene un mas y se accionara.

imagen del blog

Como se muestra en la captura selecciona tu frame2 como en la captura.

imagen del blog

Bien, ahora se mostrara lo siguiente y lo configuramos con la siguientes características como en a captura. Repetimos este paso hasta llegar al frame3.

imagen del blog


Para el slider4 al 1, la configuramos como se muestra en la captura.

imagen del blog


 Paso 7: Para visualizar nuestro slider, clic en reproducir que esta de color azul, como se muestra e la captura.

imagen del blog

Debió quedarte de la siguiente manera: Figma 2BsTeam

Espero que 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 “...

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