Prototipo de comportamiento de desplazamiento y desbordamiento
Este artículo está disponible tanto para la UI anterior de Figma como para la nueva. Utiliza el conmutador de la parte inferior izquierda de la página para seleccionar tu UI actual. Conoce UI3: el rediseño de Figma →
Antes de empezar
Quién puede utilizar esta función
Disponible en cualquier plan
Cualquiera con acceso de puede editar a un archivo puede crear y editar prototipos.
Establece cómo funciona el desplazamiento en tus prototipos para replicar las interacciones del usuario, como estas:
- Desplazarse hacia arriba y hacia abajo en una página larga de contenido
- Desplazarse hacia la izquierda y hacia la derecha para ver diferentes elementos en un control deslizante.
- Desplazarse hacia arriba y hacia abajo en cualquier dirección, como en un mapa interactivo.
- Fijar objetos, como barras de navegación y menús, en una posición de la página mientras te desplazas.
- Crear "objetos adhesivos" que permanezcan en su lugar en la parte superior del marco una vez que te desplaces por ellos.
Para usar el desplazamiento en tus prototipos de Figma, debes:
- Prepara los marcos para el desplazamiento: Asegúrate de que el contenido se extiende más allá de los límites de las dimensiones del marco.
- Aplicar desbordamiento de desplazamiento al marco: define si tu marco tendrá desplazamiento vertical, horizontal, ambos o ninguno.
- Aplicar la posición de desplazamiento a los objetos dentro del marco: define cómo se comportan los objetos en tu marco cuando te desplazas por ellos. Pueden desplazarse con el marco principal, permanecer en una posición fija o pegarse a la parte superior de su marco principal.
Una vez configurado el desplazamiento, también puedes considerar la posibilidad de conservar o restablecer la posición de desplazamiento al navegar entre varios marcos.
Preparar marcos para desplazarse
Para agregar comportamiento de desplazamiento a un marco, el marco debe tener contenido que se extienda más allá de los límites del marco.
Piénsalo como cualquier sitio web: cuando navegas en tu teléfono, solo puedes ver el contenido que se ajusta a las dimensiones de tu pantalla. No obstante, hay contenido “oculto” que existe más allá de lo que ves en tu pantalla que solo puedes ver con el desplazamiento.
Amplía el contenido más allá de las dimensiones del marco
Para cambiar el tamaño de un marco:
- Selecciona el marco que deseas actualizar.
- Abre el panel de diseño en la barra lateral derecha.
- Pasa el cursor sobre el borde del marco hasta que aparezca el cursor.
- Arrastra el cuadro delimitador para cambiar el tamaño del marco.
- Mac: ⌘ Command
- Windows: Ctrl
Para cerciorarte de que cada objeto sigue estando dentro del marco seleccionado, revisa la sección Capas del panel de navegación izquierdo. Los objetos secundarios se anidan debajo de su marco principal.
Clip content
Puedes ocultar cualquier contenido que se extienda más allá de los límites de un marco con Recortar contenido.
- Selecciona el marco que deseas actualizar.
- Abre la pestaña Diseño en el panel de propiedades de la derecha.
- En la sección Layout (Disposición), marca la casilla que está junto a Clip content (Recortar contenido).
Aplicar desbordamiento de desplazamiento a los marcos
El desbordamiento de desplazamiento define cómo los usuarios pueden interactuar con el contenido que se extiende más allá de las dimensiones de un marco.
Solo se puede aplicar el comportamiento de desbordamiento a los marcos. Esto se aplica a los marcos que están directamente en el lienzo (marcos de nivel superior), así como a los marcos anidados dentro de otros marcos o capas.
Para aplicar desbordamiento de desplazamiento a un marco:
- Selecciona un marco.
- Abre la pestaña Prototype (Prototipo) en el panel de propiedades de la derecha.
- En la sección Comportamiento de desplazamiento, selecciona el menú desplegable Desbordamiento. Elige entre estas opciones:
- Sin desplazamiento
- Horizontal
- Vertical
- Ambas direcciones
Nota: Si recibes un mensaje de error marcado con un signo de exclamación ("Para que el desplazamiento funcione en este marco, el contenido debe ser más grande que el marco"), esto significa que aún debes preparar el marco para el desplazamiento extendiendo el contenido del marco más allá de las dimensiones del marco.
Vertical
El desplazamiento vertical permite a los usuarios deslizarse o desplazarse hacia arriba y hacia abajo. Usa este comportamiento para imitar el desplazamiento hacia abajo en un sitio web largo o una página de contenido dentro de una aplicación.
Horizontal
El desplazamiento horizontal permite a los usuarios deslizar o desplazar hacia la izquierda y hacia la derecha, mientras mantienen su posición vertical. Úsalo para crear controles deslizantes para contenido, como productos, galerías y bibliotecas.
Sin desplazamiento
La opción "Sin desplazamiento" impide que los usuarios se desplacen en cualquier dirección. El contenido que se extienda más allá de los límites del marco no será visible.
Ambas direcciones
Ambas direcciones (horizontal y vertical) permiten a los usuarios navegar en cualquier dirección, como cuando se visualiza un mapa o una imagen ampliada.
Aplicar la posición de desplazamiento a los objetos dentro de un marco
La posición de desplazamiento define cómo se comportan las capas de un marco cuando los usuarios se desplazan más allá de ellas. Solo puedes aplicar una posición de desplazamiento a cada capa.
- Selecciona un objeto, grupo o componente. El objeto debe estar en un marco al que se le aplicó un desbordamiento de desplazamiento.
- Abre la pestaña Prototype (Prototipo) en el panel de propiedades de la derecha.
- En la sección Comportamiento de desplazamiento, selecciona el menú desplegable Posición. Elige entre estas opciones:
- Desplazarse con el principal
- Fijo
- Nota adhesiva
Desplazarse con el principal
Los objetos que se desplazan con el elemento principal se mueven hacia arriba y hacia abajo en el marco a medida que te desplazas. Emplea este comportamiento para imitar el comportamiento de desplazar hacia arriba y hacia abajo en páginas de contenido más largas.
Fijo
Los objetos fijos no se mueven, incluso mientras te desplazas hacia arriba y hacia abajo. Por ejemplo, emplea esta opción para fijar una barra de estado en la parte superior del dispositivo o un menú en la parte inferior de un marco.
No se puede asignar una posición de desplazamiento fija a ningún objeto en un marco con disposición automática, a menos que el objeto tenga una posición absoluta aplicada.
Cuando configuras un objeto como fijo, Figma lo moverá por encima de las otras capas en el marco y las etiquetará como Fijo en la sección Capas del panel de navegación izquierdo. No es posible colocar objetos de desplazamiento sobre capas fijas.
Nota adhesiva
Aplica una posición de desplazamiento adhesivo a cualquier objeto dentro de un marco que tenga desplazamiento vertical.
Los objetos adhesivos se desplazarán al principio, pero se fijarán una vez que el borde superior llegue a la parte superior de su marco padre. (Si vuelves a desplazarte hacia arriba, el objeto dejará de adherirse y se moverá hacia abajo en el marco principal).
Consejo: Usamos los términos padre, hijo, hermano y marco de nivel superior para describir las relaciones entre objetos en Figma. Obtén más información sobre la jerarquía de capas en Figma →
Si el objeto adhesivo está anidado dentro de otra capa en un marco, permanece dentro de los límites directos de su padre. Esto significa que cuando la capa padre directa se desplaza fuera de la vista, el objeto adhesivo sigue desplazándose con su capa padre.
Comprueba la sección Capas en el panel de navegación izquierdo para ver cómo se apilan los objetos adhesivos al desplazarse. Las capas situadas por debajo de un objeto adhesivo se desplazarán detrás de él, y las capas situadas por encima de un objeto adhesivo se desplazarán delante de él. Si quieres cambiar el orden en que se apilan los objetos para el desplazamiento adhesivo, cambia su orden en el panel de capas.
Nota: En un marco con disposición automática, reorganizar las capas en la sección Capas del panel de navegación izquierdo afectará el orden en que las capas aparecen visualmente en el lienzo.
Por defecto, los objetos en un marco con disposición automática tienen su configuración de apilamiento de lienzos establecida en Último arriba, lo que significa que las capas visualmente en la parte inferior de un marco se apilan delante de las capas por encima de ellas.
Para invertir el orden de modo que las capas se apilen de arriba a abajo:
- Selecciona el marco con disposición automática.
- En la sección Disposición automática de la barra lateral derecha, selecciona Configuración de la disposición automática.
- Desde el menú desplegable Apilamiento de lienzos, selecciona Primero arriba.
Obtén más detalles sobre la disposición automática →
Conservar y restablecer la posición de desplazamiento
Cuando el prototipo contiene varias páginas o pantallas, puedes optar por conservar posición de desplazamiento o restablecer posición de desplazamiento entre marcos.
- Conservar posición de desplazamiento: Mantén la posición de desplazamiento del usuario cuando pasa de un marco a otro.
- Restablecer posición de desplazamiento: Restablece la posición de desplazamiento del usuario cuando pasa de un marco a otro.
Más detalles sobre cómo conservar o restablecer la posición de desplazamiento en prototipos →
Nota: Preservar la posición de desplazamiento es un tipo de administración de estado de prototipos. La administración del estado nos permite mantener las propiedades y estados de los objetos al navegar dentro y a través de los marcos al reproducir prototipos, y puede aplicarse a la posición de desplazamiento, componentes interactivos y videos.
Obtén más información sobre la gestión de estados de prototipos →
Antes de empezar
Quién puede utilizar esta función
Disponible en cualquier plan
Cualquiera con acceso de puede editar a un archivo puede crear y editar prototipos.
Establece cómo funciona el desplazamiento en tus prototipos para replicar las interacciones del usuario, como estas:
- Desplazarse hacia arriba y hacia abajo en una página larga de contenido
- Desplazarse hacia la izquierda y hacia la derecha para ver diferentes elementos en un control deslizante.
- Desplazarse hacia arriba y hacia abajo en cualquier dirección, como en un mapa interactivo.
- Fijar objetos, como barras de navegación y menús, en una posición de la página mientras te desplazas.
- Crear "objetos adhesivos" que permanezcan en su lugar en la parte superior del marco una vez que te desplaces por ellos.
Para usar el desplazamiento en tus prototipos de Figma, debes:
- Prepara los marcos para el desplazamiento: Asegúrate de que el contenido se extiende más allá de los límites de las dimensiones del marco.
- Aplicar desbordamiento de desplazamiento al marco: define si tu marco tendrá desplazamiento vertical, horizontal, ambos o ninguno.
- Aplicar la posición de desplazamiento a los objetos dentro del marco: define cómo se comportan los objetos en tu marco cuando te desplazas por ellos. Pueden desplazarse con el marco principal, permanecer en una posición fija o pegarse a la parte superior de su marco principal.
Una vez configurado el desplazamiento, también puedes considerar la posibilidad de conservar o restablecer la posición de desplazamiento al navegar entre varios marcos.
Preparar marcos para desplazarse
Para agregar comportamiento de desplazamiento a un marco, el marco debe tener contenido que se extienda más allá de los límites del marco.
Piénsalo como cualquier sitio web: cuando navegas en tu teléfono, solo puedes ver el contenido que se ajusta a las dimensiones de tu pantalla. No obstante, hay contenido “oculto” que existe más allá de lo que ves en tu pantalla que solo puedes ver con el desplazamiento.
Amplía el contenido más allá de las dimensiones del marco
Para cambiar el tamaño de un marco:
- Selecciona el marco que deseas actualizar.
- Abre el panel de diseño en la barra lateral derecha.
- Pasa el cursor sobre el borde del marco hasta que aparezca el cursor.
- Arrastra el cuadro delimitador para cambiar el tamaño del marco.
- Mac: ⌘ Command
- Windows: Ctrl
Para asegurarte de que cada objeto aún se encuentra dentro del marco seleccionado, marca el panel Layers (Capas). Los objetos secundarios se anidan bajo su marco principal.
Clip content
Puedes ocultar cualquier contenido que se extienda más allá de los límites de un marco con Recortar contenido.
- Selecciona el marco que deseas actualizar.
- Abre el panel de diseño en la barra lateral derecha.
- En la sección Marco de la barra lateral derecha, marca la casilla junto a Recortar contenido.
Aplicar desbordamiento de desplazamiento a los marcos
El desbordamiento de desplazamiento define cómo los usuarios pueden interactuar con el contenido que se extiende más allá de las dimensiones de un marco.
Solo se puede aplicar el comportamiento de desbordamiento a los marcos. Esto se aplica a los marcos que están directamente en el lienzo (marcos de nivel superior), así como a los marcos anidados dentro de otros marcos o capas.
Para aplicar desbordamiento de desplazamiento a un marco:
- Selecciona un marco.
- Abre el panel de prototipos en la barra lateral derecha.
- En la sección Comportamiento de desplazamiento, selecciona el menú desplegable Desbordamiento. Elige entre estas opciones:
- Sin desplazamiento
- Horizontal
- Vertical
- Ambas direcciones
Nota: Si recibes un mensaje de error marcado con un signo de exclamación ("Para que el desplazamiento funcione en este marco, el contenido debe ser más grande que el marco"), esto significa que aún debes preparar el marco para el desplazamiento extendiendo el contenido del marco más allá de las dimensiones del marco.
Vertical
El desplazamiento vertical permite a los usuarios deslizarse o desplazarse hacia arriba y hacia abajo. Usa este comportamiento para imitar el desplazamiento hacia abajo en un sitio web largo o una página de contenido dentro de una aplicación.
Horizontal
El desplazamiento horizontal permite a los usuarios deslizar o desplazar hacia la izquierda y hacia la derecha, mientras mantienen su posición vertical. Úsalo para crear controles deslizantes para contenido, como productos, galerías y bibliotecas.
Sin desplazamiento
La opción "Sin desplazamiento" impide que los usuarios se desplacen en cualquier dirección. El contenido que se extienda más allá de los límites del marco no será visible.
Ambas direcciones
Ambas direcciones (horizontal y vertical) permiten a los usuarios navegar en cualquier dirección, como cuando se visualiza un mapa o una imagen ampliada.
Aplicar la posición de desplazamiento a los objetos dentro de un marco
La posición de desplazamiento define cómo se comportan las capas de un marco cuando los usuarios se desplazan más allá de ellas. Solo puedes aplicar una posición de desplazamiento a cada capa.
- Selecciona un objeto, grupo o componente. El objeto debe estar en un marco al que se le aplicó un desbordamiento de desplazamiento.
- Abre el panel de prototipos en la barra lateral derecha.
- En la sección Comportamiento de desplazamiento, selecciona el menú desplegable Posición. Elige entre estas opciones:
- Desplazarse con el principal
- Fijo
- Nota adhesiva
Desplazarse con el principal
Los objetos que se desplazan con el elemento principal se mueven hacia arriba y hacia abajo en el marco a medida que te desplazas. Emplea este comportamiento para imitar el comportamiento de desplazar hacia arriba y hacia abajo en páginas de contenido más largas.
Fijo
Los objetos fijos no se mueven, incluso mientras te desplazas hacia arriba y hacia abajo. Por ejemplo, emplea esta opción para fijar una barra de estado en la parte superior del dispositivo o un menú en la parte inferior de un marco.
No se puede asignar una posición de desplazamiento fija a ningún objeto en un marco con disposición automática, a menos que el objeto tenga una posición absoluta aplicada.
Cuando configuras un objeto como fijo, Figma lo moverá por encima de las otras capas del marco y las etiquetará como Fijo en tu panel de capas. No es posible colocar objetos de desplazamiento sobre capas fijas.
Nota adhesiva
Aplica una posición de desplazamiento adhesivo a cualquier objeto dentro de un marco que tenga desplazamiento vertical.
Los objetos adhesivos se desplazarán al principio, pero se fijarán una vez que el borde superior llegue a la parte superior de su marco padre. (Si vuelves a desplazarte hacia arriba, el objeto dejará de adherirse y se moverá hacia abajo en el marco principal).
Consejo: Usamos los términos padre, hijo, hermano y marco de nivel superior para describir las relaciones entre objetos en Figma. Obtén más información sobre la jerarquía de capas en Figma →
Si el objeto adhesivo está anidado dentro de otra capa en un marco, permanece dentro de los límites directos de su padre. Esto significa que cuando la capa padre directa se desplaza fuera de la vista, el objeto adhesivo sigue desplazándose con su capa padre.
Comprueba el panel de capas para ver cómo se apilan los objetos adhesivos al desplazarse. Las capas situadas por debajo de un objeto adhesivo se desplazarán detrás de él, y las capas situadas por encima de un objeto adhesivo se desplazarán delante de él. Si quieres cambiar el orden en que se apilan los objetos para el desplazamiento adhesivo, cambia su orden en el panel de capas.
Nota: En un marco con disposición automática, reorganizar las capas en el panel de capas afectará el orden en que las capas aparecen visualmente en el lienzo.
Por defecto, los objetos en un marco con disposición automática tienen su configuración de apilamiento de lienzos establecida en Último arriba, lo que significa que las capas visualmente en la parte inferior de un marco se apilan delante de las capas por encima de ellas.
Para invertir el orden de modo que las capas se apilen de arriba a abajo:
- Selecciona el marco con disposición automática.
- En la sección Auto layout (Disposición automática) de la barra lateral derecha, selecciona la configuración Advanced auto layout (Disposición automática avanzada).
- Desde el menú desplegable Apilamiento de lienzos, selecciona Primero arriba.
Obtén más detalles sobre la disposición automática →
Conservar y restablecer la posición de desplazamiento
Cuando el prototipo contiene varias páginas o pantallas, puedes optar por conservar posición de desplazamiento o restablecer posición de desplazamiento entre marcos.
- Conservar posición de desplazamiento: Mantén la posición de desplazamiento del usuario cuando pasa de un marco a otro.
- Restablecer posición de desplazamiento: Restablece la posición de desplazamiento del usuario cuando pasa de un marco a otro.
Más detalles sobre cómo conservar o restablecer la posición de desplazamiento en prototipos →
Nota: Preservar la posición de desplazamiento es un tipo de administración de estado de prototipos. La administración del estado nos permite mantener las propiedades y estados de los objetos al navegar dentro y a través de los marcos al reproducir prototipos, y puede aplicarse a la posición de desplazamiento, componentes interactivos y videos.
Obtén más información sobre la gestión de estados de prototipos →