Desplazamiento en la creación de prototipos y comportamiento en caso de desbordamiento
Este artículo es aplicable tanto a la anterior IU de Figma como a la nueva. Utiliza el botón en la parte izquierda de la página para seleccionar tu IU actual. Conoce UI3: el rediseño de Figma →
Antes de empezar
Quién puede utilizar esta función
Disponible para cualquier plan
Cualquier persona con acceso Puede editar a un archivo puede crear y editar prototipos.
Define cómo funcionan el desplazamiento y la vista panorámica en tus prototipos para replicar las interacciones de los usuarios, como:
- Desplazarse arriba y abajo por una página de contenido extensa
- Desplazarse hacia la izquierda y hacia la derecha para ver diferentes elementos en un control deslizante
- Desplazarse o deslizar 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 durante el desplazamiento
- Crear «objetos pegajosos» 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.
- Aplica desbordamiento de desplazamiento al marco: define si tu marco tendrá desplazamiento vertical, horizontal, ambos o ninguno.
- Aplica la posición de desplazamiento a los objetos dentro del marco: define cómo se comportan los objetos del marco cuando te desplazas más allá de ellos. Pueden desplazarse con el marco principal, permanecer en una posición fija o quedarse en la parte superior del marco principal.
Una vez configurado el desplazamiento, también puedes plantearte la posibilidad de conservar o restablecer la posición de desplazamiento al navegar entre varios marcos.
Preparar marcos para el desplazamiento
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 página web: cuando navegas en tu teléfono, solo puedes ver el contenido que se ajusta a las dimensiones de tu pantalla. Sin embargo, hay contenido «oculto» que existe más allá de la pantalla y que solo puedes ver al desplazarte.
Ampliar el contenido más allá de las dimensiones del marco
Para redimensionar un marco:
- Selecciona el marco que deseas actualizar.
- Abre el panel Diseño en la barra lateral derecha.
- Pasa el cursor sobre el borde del marco hasta que aparezca el cursor.
- Arrastra el cuadro de límite para redimensionar el marco.
- Mac: ⌘ Command
- Windows: Ctrl
Para asegurarte 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.
Recortar contenido
Puedes ocultar cualquier contenido que se extienda más allá de los límites de un marco utilizando 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 Diseño, 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 en caso 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 un desbordamiento de desplazamiento a un marco:
- Selecciona un marco.
- Abre la pestaña Creación de prototipos en el panel de propiedades de la derecha.
- En la sección Comportamiento del desplazamiento, selecciona el menú desplegable Desbordamiento. Elige entre:
- 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 tienes que 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 deslizar o desplazarse hacia arriba y hacia abajo. Utiliza 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 desplazarse hacia la izquierda y hacia la derecha, manteniendo 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 se puede 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 haya aplicado un desbordamiento de desplazamiento.
- Abre la pestaña Creación de prototipos en el panel de propiedades de la derecha.
- En la sección Comportamiento de desplazamiento, selecciona el menú desplegable Posición. Elige entre:
- 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. Utiliza este comportamiento para imitar el comportamiento de desplazamiento 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. Utiliza esta opción, por ejemplo, para fijar una barra de estado en la parte superior del dispositivo o fijar 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 diseño automático, a menos que el objeto tenga aplicada una posición absoluta.
Cuando configuras un objeto como fijo, Figma lo moverá por encima de las otras capas del marco y lo 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 fija a cualquier objeto dentro de un marco con desplazamiento vertical.
Los objetos pegajosos se desplazarán al principio, pero quedarán fijos una vez que su borde superior alcance la parte superior de su marco principal. (Si vuelves a desplazarte hacia arriba, el objeto se despegará y se moverá hacia abajo en el marco principal).
Consejo: usamos los términos principal, hijo, hermano y marco de nivel superior para describir las relaciones entre objetos en Figma. Más información sobre la jerarquía de capas en Figma →
Si el objeto pegajoso está anidado dentro de otra capa en un marco, permanece dentro de los límites de su principal directo. Es decir, que cuando la capa principal directa se desplaza fuera de la vista, el objeto pegajoso continúa desplazándose con su capa principal.
Revisa la sección Capas en el panel de navegación izquierdo para ver cómo se apilan los objetos pegajosos al desplazarse. Las capas que estén debajo de un objeto adhesivo se desplazarán detrás de él y las capas que estén por encima de un objeto adhesivo se desplazarán delante de él. Para cambiar el orden en que se apilan los objetos para el desplazamiento fijo, cambia su orden en el panel Capas.
Nota: en un marco de diseño automático, la reorganización de las capas en la sección Capas del panel de navegación izquierdo afectará al orden en el que las capas se muestran en el lienzo.
De forma predeterminada, los objetos de un marco de diseño automático tienen la configuración de apilamiento del lienzo Último en la parte superior, lo que significa que las capas que se encuentran en la parte inferior de un marco se apilan delante de las capas que están por encima de ellos.
Para invertir el orden de modo que las capas se apilen de arriba a abajo:
- Selecciona el marco de diseño automático.
- En la sección Diseño automático de la barra lateral derecha, selecciona Configuración de diseño automático.
- En el menú desplegable Apilamiento de lienzo, selecciona Primero en la parte superior.
Más información sobre Diseño automático →
Conservar y restablecer la posición de desplazamiento
Cuando tu prototipo contiene varias páginas o pantallas, puedes optar por conservar la posición de desplazamiento o restablecer la posición de desplazamiento entre marcos.
- Conservar la posición de desplazamiento: mantiene la posición de desplazamiento del usuario cuando pasa de un fotograma a otro
- Restablecer la posición de desplazamiento: restablece la posición de desplazamiento del usuario cuando pasa de un fotograma a otro
Más información sobre cómo conservar o restablecer la posición de desplazamiento en Creación de prototipos →
Nota: preservar la posición de desplazamiento es un tipo de gestión del estado de prototipos. El estado del prototipo nos permite mantener las propiedades y los estados de los objetos al navegar dentro y entre los marcos al reproducir prototipos, y se puede aplicar a la posición del desplazamiento, a los componentes interactivos y a los vídeos.
Más información sobre la gestión del estado de prototipos →
Antes de empezar
Quién puede utilizar esta función
Disponible para cualquier plan
Cualquier persona con acceso Puede editar a un archivo puede crear y editar prototipos.
Define cómo funcionan el desplazamiento y la vista panorámica en tus prototipos para replicar las interacciones de los usuarios, como:
- Desplazarse arriba y abajo por una página de contenido extensa
- Desplazarse hacia la izquierda y hacia la derecha para ver diferentes elementos en un control deslizante
- Desplazarse o deslizar 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 durante el desplazamiento
- Crear «objetos pegajosos» 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.
- Aplica desbordamiento de desplazamiento al marco: define si tu marco tendrá desplazamiento vertical, horizontal, ambos o ninguno.
- Aplica la posición de desplazamiento a los objetos dentro del marco: define cómo se comportan los objetos del marco cuando te desplazas más allá de ellos. Pueden desplazarse con el marco principal, permanecer en una posición fija o quedarse en la parte superior del marco principal.
Una vez configurado el desplazamiento, también puedes plantearte la posibilidad de conservar o restablecer la posición de desplazamiento al navegar entre varios marcos.
Preparar marcos para el desplazamiento
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 página web: cuando navegas en tu teléfono, solo puedes ver el contenido que se ajusta a las dimensiones de tu pantalla. Sin embargo, hay contenido «oculto» que existe más allá de la pantalla y que solo puedes ver al desplazarte.
Ampliar el contenido más allá de las dimensiones del marco
Para redimensionar un marco:
- Selecciona el marco que deseas actualizar.
- Abre el panel Diseño en la barra lateral derecha.
- Pasa el cursor sobre el borde del marco hasta que aparezca el cursor.
- Arrastra el cuadro de límite para redimensionar el marco.
- Mac: ⌘ Command
- Windows: Ctrl
Para asegurarte de que cada objeto sigue dentro del marco seleccionado, marca el panel Capas. Los objetos secundarios se anidan debajo de su marco principal.
Recortar contenido
Puedes ocultar cualquier contenido que se extienda más allá de los límites de un marco utilizando Recortar contenido.
- Selecciona el marco que deseas actualizar.
- Abre el panel Diseño en la barra lateral derecha.
- En la sección Marco de la barra lateral derecha, marca la casilla situada 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 en caso 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 un desbordamiento de desplazamiento a un marco:
- Selecciona un marco.
- Abre el panel Creación de prototipos en la barra lateral derecha.
- En la sección Comportamiento del desplazamiento, selecciona el menú desplegable Desbordamiento. Elige entre:
- 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 tienes que 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 deslizar o desplazarse hacia arriba y hacia abajo. Utiliza 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 desplazarse hacia la izquierda y hacia la derecha, manteniendo 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 se puede 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 haya aplicado un desbordamiento de desplazamiento.
- Abre el panel Creación de prototipos en la barra lateral derecha.
- En la sección Comportamiento de desplazamiento, selecciona el menú desplegable Posición. Elige entre:
- 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. Utiliza este comportamiento para imitar el comportamiento de desplazamiento 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. Utiliza esta opción, por ejemplo, para fijar una barra de estado en la parte superior del dispositivo o fijar 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 diseño automático, a menos que el objeto tenga aplicada una posición absoluta.
Cuando configuras un objeto como fijo, Figma lo mueve por encima de las otras capas del marco y lo 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 fija a cualquier objeto dentro de un marco con desplazamiento vertical.
Los objetos pegajosos se desplazarán al principio, pero quedarán fijos una vez que su borde superior alcance la parte superior de su marco principal. (Si vuelves a desplazarte hacia arriba, el objeto se despegará y se moverá hacia abajo en el marco principal).
Consejo: usamos los términos principal, hijo, hermano y marco de nivel superior para describir las relaciones entre objetos en Figma. Más información sobre la jerarquía de capas en Figma →
Si el objeto pegajoso está anidado dentro de otra capa en un marco, permanece dentro de los límites de su principal directo. Es decir, que cuando la capa principal directa se desplaza fuera de la vista, el objeto pegajoso continúa desplazándose con su capa principal.
Revisa el panel Capas para ver cómo se apilan los objetos adhesivos al desplazarse. Las capas que estén debajo de un objeto adhesivo se desplazarán detrás de él y las capas que estén por encima de un objeto adhesivo se desplazarán delante de él. Para cambiar el orden en que se apilan los objetos para el desplazamiento fijo, cambia su orden en el panel Capas.
Nota: en un marco de diseño automático, la reorganización de las capas en el panel de Capas afectará al orden en el que las capas aparecen visualmente en el lienzo.
De forma predeterminada, los objetos de un marco de diseño automático tienen la configuración de apilamiento del lienzo Último en la parte superior, lo que significa que las capas que se encuentran en la parte inferior de un marco se apilan delante de las capas que están por encima de ellos.
Para invertir el orden de modo que las capas se apilen de arriba a abajo:
- Selecciona el marco de diseño automático.
- Desde la sección Diseño automático de la barra lateral derecha, selecciona la configuración avanzada de diseño automático.
- En el menú desplegable Apilamiento de lienzo, selecciona Primero en la parte superior.
Más información sobre Diseño automático →
Conservar y restablecer la posición de desplazamiento
Cuando tu prototipo contiene varias páginas o pantallas, puedes optar por conservar la posición de desplazamiento o restablecer la posición de desplazamiento entre marcos.
- Conservar la posición de desplazamiento: mantiene la posición de desplazamiento del usuario cuando pasa de un fotograma a otro
- Restablecer la posición de desplazamiento: restablece la posición de desplazamiento del usuario cuando pasa de un fotograma a otro
Más información sobre cómo conservar o restablecer la posición de desplazamiento en Creación de prototipos →
Nota: preservar la posición de desplazamiento es un tipo de gestión del estado de prototipos. El estado del prototipo nos permite mantener las propiedades y los estados de los objetos al navegar dentro y entre los marcos al reproducir prototipos, y se puede aplicar a la posición del desplazamiento, a los componentes interactivos y a los vídeos.
Más información sobre la gestión del estado de prototipos →