Hay un millón de formas de hacer una presentación, pero Figma es una herramienta subestimada para ello. La función de prototipo en Figma permite una multitud de opciones de transición personalizables. Sus transiciones no solo sorprenderán a su audiencia, sino que también puede incorporar complementos para obtener más dinamismo y mantener a su audiencia comprometida, haciéndolo sentir seguro en sus habilidades.
Le mostraremos cómo hacer una excelente presentación usando Figma; solo sigue esta guía.
1. Configure su primer marco de presentación
Abierto figma y haga clic Nuevo archivo de diseño. Haga clic en el Herramienta Marco (F) para dibujar su marco o elegir un marco preestablecido a la derecha usando Presentación > Diapositiva 16:9. Puedes crear una plantilla maestra para ahorrar tiempo.
Cambie el nombre de su marco haciendo doble clic en el título azul en la parte superior izquierda. Establecer un color de fondo; aunque siempre puede cambiarlo más tarde resaltando todos los marcos y cambiando el color de relleno.
2. Agregue el texto del título
Utilizar el Herramienta de texto (T) y escriba su título. Use cuadros de texto separados para líneas separadas, con solo una o dos palabras por línea. Configure sus preferencias de texto en el Texto menú de la derecha. Figma usa fuentes de Google, por lo que es posible que desee saber las mejores combinaciones de fuentes de Google.
3. Agregar una imagen
Puedes usar una foto de archivo o tome su propia foto relevante. Para agregar una imagen, dibuje un rectángulo usando el Herramienta rectangular (R). Su imagen se sentará en esta forma.
Haga clic en el rectángulo y vaya a Llenar y haga clic en el cuadrado de color. Luego haga clic Sólido > Imagen > Elegir imagen. Encuentra tu imagen y haz clic Abierto. Pase el cursor sobre la imagen para revelar 4 círculos blancos. Haz clic y arrastra un círculo hacia adentro para redondear las esquinas de tu imagen.
Organice sus capas para que la imagen esté en la parte posterior y el texto esté en la capa superior. Puede arrastrar las capas en el panel de capas o usando CMD/Cverdad + [ para enviar una capa hacia atrás o CMD/Cverdad + ] para traer una capa hacia adelante.
4. Crear la primera transición
La primera transición abrirá la imagen y permitirá que el texto del título se deslice dentro del marco. Primero, duplique el primer cuadro seleccionándolo y presionando CMD/Cverdad + D para duplicarlo.
En el marco de la izquierda, reduzca la escala de la imagen reduciendo los atributos de altura en el H cuadro a alrededor de 150, dejando una rendija horizontal de la imagen. Alinéelo al centro seleccionando ambas imágenes en los marcos y haciendo clic en Oopción + V (Mac) o Alt+V (Ventanas).
Para completar la transición de la imagen, seleccione la imagen de la izquierda. Luego cambia el opacidad a 0% en el menú de la derecha en el cuadro junto a Pasar a través en Capa. Esto hará que la imagen sea invisible antes de que haga la transición y se abra.
Haga clic en el primer cuadro de texto y mantenga presionado Cambio. Comience a arrastrar, luego también mantenga presionado barra espaciadora y continúe arrastrando el texto fuera del marco. Parece que desaparece una vez fuera del marco. Sin la adición de la barra espaciadora, esta transición no funcionará, pero si mantiene presionada la barra espaciadora antes de arrastrar, solo moverá su marco.
Haga esto nuevamente para su segundo cuadro de texto o subsiguientes, pero arrástrelos un poco más hacia la izquierda para agregar algo de variedad en la transición. Con el texto aún seleccionado, reduzca la opacidad de la capa al 0% de la misma manera que lo hizo anteriormente para la imagen.
Para establecer la transición, vaya a Prototipo. Seleccione el marco de la izquierda y haga clic en el círculo azul que aparece en el centro del lado derecho del marco. Arrástralo, para que la línea vaya a tu segundo cuadro.
En el desplegable que dice Instante, Seleccione Animación inteligente. Luego cambia la caja con el cronógrafo a 1000 ms. Esto configurará su transición para tomar un segundo desde el clic del mouse. Las otras configuraciones deben establecerse de forma predeterminada. Asegúrese de no cambiar el nombre de los títulos de los cuadros después de establecer una transición, de lo contrario, los archivos no se conectarán.
Haga clic en el Tocar botón para probar su transición. Volver a Diseño para continuar con el diseño de su presentación.
5. Agregar más diapositivas
Para pasar de la diapositiva 1 a la diapositiva 2, duplique la diapositiva más a la derecha (CMD/Cverdad + D). En el nuevo marco, diapositiva 2, mueva los cuadros de texto fuera del marco utilizando la técnica anterior (Cambio + Arrastrar después barra espaciadora después de haber comenzado a arrastrar). Mueva un cuadro de texto a la izquierda y el otro a la derecha del marco. Establezca la opacidad en 0% para ambos.
Para la imagen, reduzca su escala y muévala ligeramente fuera del centro, luego establezca la opacidad en 0%. Esto, efectivamente, le brinda un lienzo en blanco para su segunda diapositiva. Puede agregar el contenido encima de los activos invisibles de la diapositiva anterior.
Agregue una imagen grande al centro del marco. Para agregar algunas decoraciones en la parte superior de su imagen, use un Complemento Figma para GIF o descargar un GIF de pegatina de Giphy y arrástrelo encima de la imagen. Seleccione su imagen principal y cualquier GIF, y agrúpelos (CMD/Cverdad + GRAMO), esto garantiza que Smart Animate funcionará correctamente.
Seleccione el grupo y cópielo (CMD/Cverdad + C). Luego péguelo en el marco de la diapositiva 1 (CMD/Cverdad + V). Reduzca la escala y establezca la opacidad en 0%. Luego mueva esta capa hacia atrás (CMD/Cverdad + [). Esto asegura una transición suave a la siguiente diapositiva.
Ir Prototipo. Seleccione la diapositiva 2 y haga clic en el círculo azul para arrastrarlo a la diapositiva 3. El valor predeterminado de Figma en el menú del prototipo es usar la configuración anterior, por lo que deben configurarse de acuerdo con la transición anterior. Volver a Diseño.
Duplicar la última diapositiva (CMD/Cverdad + D). Esta diapositiva usará la misma imagen que la anterior, pero la escalaremos a un lado del marco. Mueva la imagen a la izquierda del marco arrastrándola mientras mantiene presionado Cambio. Pase el cursor sobre el borde derecho de la imagen hasta que aparezcan flechas opuestas, haga clic y arrastre el borde derecho de la imagen hacia la izquierda hasta que esté satisfecho.
Ir Prototipo y une los dos marcos. Luego vuelve a Diseño.
Agregue un título y un cuerpo de texto a la derecha de la imagen escalada y agrúpelos. Copie el grupo de texto y péguelo en la diapositiva anterior. Haga clic y arrastre el grupo de texto a la derecha del marco como antes.
6. Agregar una maqueta
Crea una maqueta; echa un vistazo a nuestro guía sobre cómo crear maquetas usando complementos en Figma. Agregue un nuevo marco, luego pegue su maqueta en él. Cambia el tamaño de la maqueta para que se ajuste al marco.
Copie la maqueta y péguela en el cuadro anterior. Cambie su tamaño para que quepa dentro de la parte de la imagen, luego muévalo a la parte posterior de las capas y establezca la opacidad en 0%. Vincular los marcos en Prototipo.
7. Agregar etiquetas
Duplica el marco de la maqueta. Agregue un título y una descripción para explicar partes de su maqueta. Agrupa el texto y nómbralo. Entonces tú puedes crear un indicador de vidrio esmerilado para sus viñetas y líneas. Agrupa una línea con un círculo. Alinee su indicador con lo que está describiendo y agregue su descripción junto a él. Vincular los marcos en Prototipo.
Duplique el marco y agregue otro indicador de viñeta con lo que está describiendo. Prototipar esto de nuevo. Duplique cada cuadro por punto de viñeta, de modo que cada punto de viñeta transicione solo.
8. Termina tu presentación
Duplica la última diapositiva. Escriba una o dos palabras finales y céntrelas. Copie el texto y péguelo en la diapositiva anterior.
Reduzca la escala del texto manteniendo presionado k mientras lo escala, esto mantiene su texto formateado mientras lo reduce. Coloque su texto en algún lugar cerca de la parte superior de la maqueta y envíe la capa hacia atrás, debajo de la imagen. Establezca la opacidad en 0%. Vuelve a tu diapositiva final.
Mueva todos los demás objetos fuera del marco utilizando el método de arrastre. La transición deslizará todo hacia los lados y la parte superior a medida que el texto se mueve hacia abajo desde la parte superior y se expande. Vincular diapositivas en Prototipo.
9. Comparta su presentación de Figma
Puede acceder a su presentación desde cualquier lugar donde pueda iniciar sesión en su cuenta de Figma o compartir la URL con otros, para que puedan verla desde cualquier lugar. Para presentar su presentación final con sus transiciones, haga clic en el Tocar botón y presente en modo de pantalla completa.
También puede guardar los cuadros como archivos PDF, aunque al hacerlo perderá las transiciones animadas.
Mejora tus presentaciones con Figma
Esta presentación no solo es minimalista, lo que no abrumará a su audiencia, sino que las transiciones son profesionales y limpias. No hace falta ser un experto en UI/UX para usar Figma de una manera que beneficie sus presentaciones, sin importar su puesto de trabajo. Presente con confianza y se verá inundado de preguntas sobre cómo se hizo su presentación.
