Ir al contenido principal

Horizontal Scrolling

 A continuacion te explico como lograr un scrolling horizontal en figma.

Para este ejemplo yo voy a replicar el diseño de instagram.

imagen blog

Paso 1: Vas a crear los siguintes componentes, en mi caso cree dos, como se ve a continuacion: 

imagen blog
Paso 2: Duplica tus componetes y colocalos en donde tu gustes, en micaso lo coloque de esta manera, como se ve en la captura.
imagen blog
Paso 3: Muy bien, ahora el siguiente paso es agrupar los componentes duplicados como se ve a continuacion los vas a selecionar

imagen blog

Ahora clic derecho y nos va a desplegar lo siguiente, y vamos a selecionar group selection:

imagen blog

Paso 4: Muy bien, ahora el siguiente es seleccionar el segundo componente como se ve a continuación y copiar y pegar 4 veces.

imagen blog

Te va a quedar de la siguiente forma:

imagen blog

Ahora solo hay que cambiar las fotos por una diferentes y los nombres como se muestra en la captura.

imagen blog

Paso 5: Vas a seleccionar todos los componente como se ve en la captura.

imagen blog

Clic derecho y selecciona frame selection.

imagen blog

Paso 6: Ahoramos hacer la parte de Horizontal Scrolling, muy bien, seleciona Prototype, como se ve en la captura.

imagen blog

Ahora en Overflow behavior vas a selecionar Horizontal scrolling, como se ve en la captura.

imagen blog

Finalmente vas a colocar de esta forma el rectangulo azul del frame para que no sobresalga y listo ya quedo el Horizontal Scrolling.

imagen blog


Listo, debió de quedarte así:


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