Paso 1:Preparación
- Abra Figma y cree un nuevo proyecto o abra un proyecto existente.
- Seleccione el marco o contenedor donde desea crear el recurso desplazable.
Paso 2:Establecer el marco desplazable
- Haga clic en la herramienta "Marco" en la barra de herramientas izquierda. Parece un cuadrado con cuatro flechas apuntando hacia afuera.
- Dibuja el marco donde quieres que aparezca el contenido en desplazamiento. Asegúrese de que tenga suficiente altura para acomodar el contenido desplazable.
Paso 3:agregar contenido desplazable
- Dentro del marco, agrega los elementos u objetos que quieras que sean desplazables. Esto puede incluir texto, imágenes, formas o cualquier otro elemento de diseño.
- Coloca los elementos uno debajo del otro para crear el efecto de desplazamiento.
Paso 4:habilitar el desplazamiento
- Seleccione el marco que contiene el contenido desplazable.
- En el panel del lado derecho, en "Propiedades", haga clic en la sección "Restricciones".
- En "Diseño vertical", cambie la opción "Desbordamiento" a "Desplazable" o "Desbordamiento Y".
- Esto permite desplazarse dentro del marco.
Paso 5:Ajustar el desbordamiento
- Dependiendo de la cantidad de contenido que tengas, es posible que tengas que ajustar la configuración de desbordamiento. En la opción "Desbordamiento", puede elegir "Desbordar", que muestra todo el contenido y agrega barras de desplazamiento según sea necesario, o "Recortar contenido", que corta cualquier contenido que no quepa dentro del marco.
Paso 6:comprobar y probar
- Cambie el tamaño del marco o la ventana del navegador para simular diferentes tamaños de pantalla y asegúrese de que el desplazamiento funcione según lo previsto.
- Ajuste la ubicación y el tamaño de los elementos para asegurarse de que encajen bien y no obstruyan las barras de desplazamiento u otros componentes interactivos.
Paso 7:Vista previa y prototipo
- Utilice el modo "Presente" (atajo:"P") o conecte su diseño a un prototipo para probar la funcionalidad de desplazamiento. Esto le permite ver cómo funcionará el desplazamiento en un entorno más realista.
Paso 8:guardar y compartir
- Una vez que esté satisfecho con el recurso desplazable, guarde su archivo Figma.
- También puedes compartir el diseño con otras personas, exportarlo para un mayor desarrollo o utilizarlo como parte de un sistema de diseño más grande.
Recuerde, Figma permite el diseño y la creación de prototipos responsivos, por lo que puede ajustar el diseño y el comportamiento de su activo desplazable para adaptarse a diferentes tamaños e interacciones de dispositivos.