Cómo exportar un GIF desde Figma

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

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".
    FIGMA Como exportar GIF 11
  2. Selecciona las capas en tu lienzo de Figma. Actuarán como marcos de tu GIF.
    FIGMA Como exportar GIF 12
  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ó.
    Figma Como exportar GIF 15
  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.
    FIGMA Como exportar GIF 16
  5. Toque el pequeño botón "Reproducir" debajo de la presentación de diapositivas para ajustar la velocidad de reproducción.
    FIGMA Como exportar GIF 17
  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.
    Figma Como exportar GIF 18
  7. Ajuste el tamaño del GIF en los campos debajo de las opciones de retardo de tiempo y bucle.
    FIGMA Como exportar GIF 19
  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.
    FIGMA Como exportar GIF 20
  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.
    FIGMA Como exportar GIF 21
  10. Deje los controles de "Dithering" configurados en "No Dithering".
    FIGMA Como exportar GIF 22
  11. Toca el botón "Exportar GIF" en la parte superior de la ventana de TinyImage.
    FIGMA Como exportar GIF 23
  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 tienda de aplicaciones.

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".
    FIGMA Como exportar GIF 24
  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".
    FIGMA Como exportar GIF 25
  4. Presione el botón "Agregar acceso directo" para habilitar el acceso directo GIF.
    FIGMA Como exportar GIF 26
  5. Cuando se haya instalado el acceso directo, vuelva a "Mis accesos directos".
    FIGMA Como exportar GIF 27
  6. Toque "Crear GIF" y elija "Aceptar" para conectar la aplicación y su galería de fotos.
    FIGMA Como exportar GIF 28
  7. Navegue a través de sus videos y seleccione el video que convertirá en un GIF.
    FIGMA Como exportar GIF 29
  8. Utilice los controles deslizantes para seleccionar qué fotogramas se incluirán en el GIF.
    FIGMA Como exportar GIF 30
  9. Toque "Guardar" para registrar los cambios. Su nuevo archivo GIF se guardará en la aplicación de fotos de la tableta.
    FIGMA Como exportar GIF 30 1
  10. Haga clic en "Listo" para salir de la aplicación Accesos directos.
    FIGMA Como exportar GIF 31

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 el aplicación GIPHY.

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

    1. Instale y ejecute el aplicación GIPHY en su dispositivo.
      Firma5

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.