Cómo exportar un GIF desde Figma

Enlaces de dispositivos

¿Está buscando una manera de llevar su juego de desarrollador y diseño al siguiente nivel? Figma es una herramienta increíble que permite a los usuarios crear prototipos ricos llenos de efectos de audio, video y animación. Sin embargo, para probar adecuadamente la sensación y las funciones del prototipo, debería poder exportarlo como un GIF y verlo en acción.

Cómo exportar un GIF desde Figma

Esta guía explicará cómo puede exportar sus prototipos de Figma como GIF utilizando su PC o dispositivo móvil.

Cómo exportar a GIF en Figma en una PC

La forma más sencilla de exportar GIF animados desde Figma es con el complemento TinyImage. Antes de que pueda iniciar y usar el complemento, deberá iniciar sesión en su cuenta de Figma e ir a la sección "Comunidad".

Para descargar el complemento:

  1. Ingrese "TinyImage" en el cuadro de búsqueda.
    Cómo exportar un GIF desde Figma
  2. En la sección "Complementos", busque el icono "TinyImage Compressor".
    Cómo exportar un GIF desde Figma
  3. Haga clic en el botón de instalación junto al icono.
    Cómo exportar un GIF desde Figma

Cuando haya instalado el complemento, abra el proyecto de diseño que desea guardar como GIF. Haga clic en cualquier parte de la pantalla para abrir el menú desplegable. Elija "Complementos" y toque "TinyImage Compressor" para iniciarlo.

Aquí se explica cómo crear un GIF con el complemento:

  1. En la parte superior de la ventana del complemento, presione el botón "Crear un GIF".
    Cómo exportar un GIF desde Figma
  2. Selecciona las capas en tu lienzo de Figma. Actuarán como marcos de tu GIF.
    Cómo exportar un GIF desde Figma
  3. En la parte inferior de la ventana de TinyImage, toque la opción "Usar capas seleccionadas". Verá una presentación de diapositivas de sus capas en el centro de la ventana en el orden en que las seleccionó.
    Cómo exportar un GIF desde Figma
  4. Debajo de la vista previa, haga clic en los íconos de capa, luego arrástrelos hacia la izquierda o hacia la derecha para cambiar su orden.
    Cómo exportar un GIF desde Figma
  5. Toque el pequeño botón "Reproducir" debajo de la presentación de diapositivas para ajustar la velocidad de reproducción.
    Cómo exportar un GIF desde Figma
  6. Junto a los controles de retardo de tiempo, seleccione cuántas veces se repetirá el GIF. La configuración predeterminada es "Infinito". Haga clic en la opción "Infinito" para desactivarlo e ingrese el número deseado de bucles en el cuadro al lado.
    Cómo exportar un GIF desde Figma
  7. Ajuste el tamaño del GIF en los campos debajo de las opciones de retardo de tiempo y bucle.
    Cómo exportar un GIF desde Figma
  8. Si sus capas tienen bordes transparentes, presione el botón "Fondo transparente" en la parte inferior de la ventana para hacerlos visibles en el GIF.
    Cómo exportar un GIF desde Figma
  9. Seleccione la calidad de imagen del GIF en la esquina inferior izquierda. Lo mejor es establecer la tasa en alrededor de 80 o 90 para conservar todas las características de sus capas.
    Cómo exportar un GIF desde Figma
  10. Deje los controles de "Dithering" configurados en "No Dithering".
    Cómo exportar un GIF desde Figma
  11. Toque el botón "Exportar GIF" en la parte superior de la ventana de TinyImage.
    Cómo exportar un GIF desde Figma
  12. Los marcos se fusionarán y formarán un GIF y se descargarán y guardarán automáticamente en sus archivos de descarga.

Una nota sobre las capas

El menú desplegable sobre las miniaturas de las capas también le permite reproducir las capas de izquierda a derecha o de derecha a izquierda. Sin embargo, para tener más control sobre la apariencia final del GIF, es mejor ordenar los marcos manualmente.

Una nota sobre la reproducción

Establezca la velocidad de reproducción predeterminada moviendo el botón en la línea de medición de tiempo. Sin embargo, si desea que los cuadros específicos tengan diferentes velocidades de reproducción, puede hacerlo haciendo clic en una miniatura y configurando la velocidad en el cuadro debajo de ella.

Cómo exportar a GIF en Figma en un dispositivo móvil

Los prototipos de Figma a menudo vienen con animaciones avanzadas como pestañas deslizantes, opciones de deslizamiento y menús desplegables. Guardarlos como un GIF le facilitará mostrar el diseño en acción. Sin embargo, la aplicación móvil solo permite a los usuarios obtener una vista previa de sus prototipos. Aunque no hay soporte de exportación incorporado, puede solucionar el problema grabando la pantalla de la aplicación y convirtiendo el video en un GIF.

Cómo exportar a GIF en Figma en un iPhone

Para guardar su proyecto como un GIF en un iPhone, primero grabará en pantalla la aplicación Figma y creará un GIF con la aplicación Accesos directos.

Para grabar en pantalla Figma en un iPhone:

  1. Inicie la aplicación móvil Figma y abra el proyecto que desea convertir en un GIF.
  2. Ingrese a "Configuración" y seleccione "Centro de control".
  3. Elija "Personalizar controles" y toque el botón verde junto a "Grabación de pantalla" para habilitar la función.
  4. Regrese al "Centro de control".
  5. Presione el botón "Grabación de pantalla".
  6. Haga clic en el botón rojo para finalizar la grabación.

La grabación generalmente se almacena en su aplicación Fotos.

Verifique si su iPhone tiene la herramienta de accesos directos preinstalada para convertir su video en un GIF. También puede descargar la herramienta desde la App Store .

Aquí se explica cómo convertir el video en un archivo GIF en un iPhone:

  1. Abra la aplicación, vaya a la parte inferior de la interfaz y seleccione la tarjeta "Galería".
    Cómo exportar un GIF desde Figma
  2. Toque la pestaña "Accesos directos de inicio" debajo del menú de búsqueda.
  3. Desplácese hasta la parte inferior de la pantalla y haga clic en la sección "Crear GIF".
    Cómo exportar un GIF desde Figma
  4. Presione el botón "Agregar acceso directo" para habilitar el acceso directo GIF.
    Cómo exportar un GIF desde Figma
  5. Cuando se haya instalado el acceso directo, vuelva a "Mis accesos directos".
    Cómo exportar un GIF desde Figma
  6. Toque "Crear GIF" y elija "Aceptar" para conectar la aplicación y su galería de fotos.
    Cómo exportar un GIF desde Figma
  7. Navegue a través de sus videos y seleccione el video que convertirá en un GIF.
    Cómo exportar un GIF desde Figma
  8. Utilice los controles deslizantes para seleccionar qué fotogramas se incluirán en el GIF.
    Cómo exportar un GIF desde Figma
  9. Toque "Guardar" para registrar los cambios. Su nuevo archivo GIF se guardará en la aplicación de fotos de la tableta.
    Cómo exportar un GIF desde Figma
  10. Haga clic en "Listo" para salir de la aplicación Accesos directos.
    Cómo exportar un GIF desde Figma

Cómo exportar a GIF en Figma en un dispositivo Android

Como la aplicación Figma permite a los usuarios obtener una vista previa de los prototipos pero no exportarlos, grabará la vista previa en su dispositivo Android, transformando el video en un GIF más tarde.

Aquí se explica cómo grabar en pantalla Figma en un Android:

  1. Inicie la aplicación y abra una vista previa de su proyecto.
  2. Deslice dos veces desde la parte superior de la pantalla y seleccione "Registro de pantalla". Si no está allí, intente deslizar el dedo hacia la derecha. A veces tendrás que tocar el ícono "Editar" en la parte superior de la pantalla para revelar un menú oculto. La función "Registro de pantalla" también puede estar allí.
  3. Toque la vista previa del prototipo para indicar que desea grabarlo.
  4. Haga clic en el botón "Inicio". Una vez finalizada la cuenta atrás, se grabará la pantalla.
  5. Deslice hacia abajo y toque la tarjeta "Grabadora de pantalla" para detener la grabación.

El video de la vista previa de Figma se guardará en su aplicación de fotos de Android. Puedes convertirlo en un GIF con la aplicación GIPHY .

Para convertir un video en un GIF en un dispositivo Android:

  1. Instale y ejecute la aplicación GIPHY en su dispositivo.
    Cómo exportar un GIF desde Figma
  2. Regístrate y crea una cuenta GIPHY.
    Cómo exportar un GIF desde Figma
  3. Presione el botón "Crear" en la parte superior derecha de la interfaz.
    Cómo exportar un GIF desde Figma
  4. Habilite la aplicación para acceder a su cámara.
    Cómo exportar un GIF desde Figma
  5. Seleccione un video de su galería de Android.
    Cómo exportar un GIF desde Figma
  6. Ajusta la duración del video. La aplicación GIPHY permite a los usuarios insertar elementos como texto y pegatinas en sus archivos.
    Cómo exportar un GIF desde Figma
  7. Haga clic en el icono de "Flecha" en la parte inferior de la aplicación.
    Cómo exportar un GIF desde Figma
  8. Elija "Compartir GIF" y seleccione "Guardar GIF".
    Cómo exportar un GIF desde Figma

Exportar GIF sin restricciones

Ya sea que sea un desarrollador experimentado o un diseñador aficionado, merece tener una forma conveniente de mostrar su trabajo a otros en forma de GIF. Puede obtener una vista previa de sus creaciones en la aplicación Figma, pero acceder a sus diseños puede convertirse en una tarea desafiante una vez que se corta la conexión a Internet. Hasta que Figma presente una solución de exportación fácil de usar, puede confiar en los métodos que presentamos en el artículo.

Esperamos que esta guía lo haya ayudado a comprender mejor cómo obtener un GIF de alta calidad de sus creaciones de Figma, sin importar qué dispositivo esté usando.

¿Utilizas la versión web o móvil de Figma? ¿Cuál es tu forma preferida de exportar GIF? Háganos saber en la sección de comentarios a continuación.

Sign up and earn $1000 a day ⋙

Cómo deshabilitar el bloqueador de ventanas emergentes en Google Chrome, Safari y Edge

Cómo deshabilitar el bloqueador de ventanas emergentes en Google Chrome, Safari y Edge

Todos los navegadores web populares en todas las plataformas vienen con un bloqueador de ventanas emergentes incorporado. Por lo general, son lo suficientemente inteligentes como para bloquear ventanas emergentes no deseadas que

Cómo solucionar el problema de que la aplicación EA sigue cerrando sesión

Cómo solucionar el problema de que la aplicación EA sigue cerrando sesión

La aplicación Electronic Arts (EA) en Windows es su destino principal para acceder a sus juegos favoritos. Por eso, puede resultar increíblemente frustrante cuando el

Cómo saber cuándo se publicó o lanzó un sitio web por primera vez

Cómo saber cuándo se publicó o lanzó un sitio web por primera vez

Todos tuvieron una buena cantidad de problemas para encontrar la publicación de un sitio web o la fecha de lanzamiento. Algunos deben obtener fechas de publicación para un ensayo escolar, mientras que

Cómo cambiar la imagen de una lista de reproducción en SoundCloud

Cómo cambiar la imagen de una lista de reproducción en SoundCloud

Ya sea que estés subiendo tu música o seleccionando la lista de reproducción perfecta para hacer ejercicio, la portada de tu lista de reproducción es lo primero que aparece en SoundCloud.

Cómo encontrar al último asaltante en Minecraft

Cómo encontrar al último asaltante en Minecraft

Si alguna vez te has encontrado al final de una incursión de Minecraft, buscando al último asaltante para eliminar, no estás solo. Muchos jugadores han tenido eso.

Cómo habilitar JavaScript en Google Chrome, Firefox, Microsoft Edge y Safari

Cómo habilitar JavaScript en Google Chrome, Firefox, Microsoft Edge y Safari

JavaScript es uno de los motores más poderosos detrás de la web interactiva. Este lenguaje de programación permite que las páginas web respondan a sus acciones en tiempo real.

Cómo reparar el código de error 014.50 de Hisense TV

Cómo reparar el código de error 014.50 de Hisense TV

Los televisores Hisense están calificados como uno de los mejores televisores ROKU del mercado. Sin embargo, es posible que a veces te encuentres con una notificación del código de error 014.50 en tu televisor al intentar

Cómo controlar el volumen en tu Amazon Fire Stick

Cómo controlar el volumen en tu Amazon Fire Stick

Intentar gestionar controles remotos en 2024 es como intentar gestionar facturas. Afortunadamente, si estás usando un Fire Stick para transmitir tus programas favoritos y

Cómo eliminar todas las fotos de tu iPhone (sin perderlas para siempre)

Cómo eliminar todas las fotos de tu iPhone (sin perderlas para siempre)

Dado que los teléfonos Apple sólo vienen con una cantidad determinada de almacenamiento interno que no se puede ampliar, es posible que te quedes sin espacio rápidamente. En algún momento, es posible que

Cómo actualizar aplicaciones en Hisense TV

Cómo actualizar aplicaciones en Hisense TV

Hisense es una marca cada vez más popular cuando se trata de tecnología Smart TV. Fabrican unidades LED y ULED (Ultra LED) económicas que

Roblox: Cómo conseguir la cabeza sin cabeza

Roblox: Cómo conseguir la cabeza sin cabeza

Una guía completa para comprar o intercambiar el exclusivo Headless Head, conocido por su efecto decorativo único, en Robolox.

Cómo ver el número de teléfono de alguien en Telegram

Cómo ver el número de teléfono de alguien en Telegram

Durante el registro de una cuenta en Telegram, debe agregar un número de teléfono a sus datos personales. Si tienes curiosidad por confirmar la de otra persona

Cómo mostrar imágenes de Amazon Photos en Echo Show

Cómo mostrar imágenes de Amazon Photos en Echo Show

Descubra cómo transformar su Amazon Echo Show en un marco de fotos digital con Amazon Photos en esta guía.

Cómo crear un formulario de pedido en línea

Cómo crear un formulario de pedido en línea

Un formulario de pedido en línea ayuda a las empresas a recibir pedidos de sus clientes sin problemas. Con un formulario de pedido, los clientes pueden realizar pedidos de productos, realizar

DoorDash: Cómo obtener un reembolso

DoorDash: Cómo obtener un reembolso

¿Se pregunta cómo obtener un reembolso por su pedido de DoorDash? Consulte todas las formas en que puede obtener un reembolso, el cronograma de reembolso y más.

Cómo desactivar etiquetas en Google Maps

Cómo desactivar etiquetas en Google Maps

Las etiquetas son funciones indispensables de Google Maps que nos ayudan a encontrar lugares con facilidad. Sin embargo, un mapa lleno de pines y banderas dondequiera que mires puede ser

Canva: Cómo agregar música a un video

Canva: Cómo agregar música a un video

Los vídeos son mucho más entretenidos con una banda sonora. Ya sea añadiendo música ambiental para atraer a la audiencia o añadiendo efectos de sonido encima de un vídeo, Canva

Snapchat: cómo cambiar números

Snapchat: cómo cambiar números

Acabas de cambiar tu número de teléfono por cualquier motivo. Esta es una decisión importante, especialmente si ha tenido ese número por un tiempo. Pero este cambio

Cómo enviar correos electrónicos masivos en HubSpot

Cómo enviar correos electrónicos masivos en HubSpot

El marketing masivo por correo electrónico puede ahorrarle una gran cantidad de tiempo al permitirle enviar una campaña de correo electrónico a una gran cantidad de destinatarios al mismo tiempo. Es un

Hisense TV: Cómo solucionar el problema de poca memoria del sistema

Hisense TV: Cómo solucionar el problema de poca memoria del sistema

¿Estás cansado de lidiar con problemas de poca memoria del sistema en tu televisor Hisense? Aquí hay algunas soluciones funcionales para solucionar este problema.