Cómo exportar un GIF desde Figma

Enlaces de dispositivos

• Androide
• iPhone
• Mac
• ventanas
• ¿Falta el dispositivo?

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

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.
   
2. En la sección "Complementos", busque el icono "TinyImage Compressor".
   
3. Haga clic en el botón de instalación junto al icono.
   

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".
   
2. Selecciona las capas en tu lienzo de Figma. Actuarán como marcos de tu GIF.
   
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ó.
   
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.
   
5. Toque el pequeño botón "Reproducir" debajo de la presentación de diapositivas para ajustar la velocidad de reproducción.
   
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.
   
7. Ajuste el tamaño del GIF en los campos debajo de las opciones de retardo de tiempo y bucle.
   
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.
   
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.
   
10. Deje los controles de "Dithering" configurados en "No Dithering".
    
11. Toque el botón "Exportar GIF" en la parte superior de la ventana de TinyImage.
    
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".
   
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".
   
4. Presione el botón "Agregar acceso directo" para habilitar el acceso directo GIF.
   
5. Cuando se haya instalado el acceso directo, vuelva a "Mis accesos directos".
   
6. Toque "Crear GIF" y elija "Aceptar" para conectar la aplicación y su galería de fotos.
   
7. Navegue a través de sus videos y seleccione el video que convertirá en un GIF.
   
8. Utilice los controles deslizantes para seleccionar qué fotogramas se incluirán en el GIF.
   
9. Toque "Guardar" para registrar los cambios. Su nuevo archivo GIF se guardará en la aplicación de fotos de la tableta.
   
10. Haga clic en "Listo" para salir de la aplicación Accesos directos.
    

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

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.