En la octava clase del curso de Iniciación a Figma vamos a crear prototipos para mostrar nuestros diseños, y compartirlos tanto para mostrarlos como para que colaboren terceros.
Para que un prototipo funcione, siempre tiene que existir al menos un frame. Para ver el prototipo, hacemos clic en el botón de Presentar, en la esquina superior derecha, el botón que tiene el icono de play.
Desde la pestaña Prototipo, en Figma, podemos: crear conexiones entre los frames, indicar cuál va a ser el desencadenante o trigger de la interacción, indicar cuál va a ser la interacción, y crear una animación en la interacción.
Podemos cambiar la vista de edición y de prototipo y veremos los cambios que hacemos en tiempo real e indicar qué Frame queremos que se visualice primero.
Tenemos que tener en cuenta que no se pueden hacer conexiones entre páginas, solo se pueden hacer conexiones entre frames que estén en la misma página. ¡Vamos a verlo!
Como hemos visto en el vídeo, a veces no aparecen algunas capas en el prototipo y no nos damos cuenta de que es porque esa capa no está realmente dentro del frame que estamos visualizando. Por eso, siempre recomiendo que miremos continuamente el panel de capas para comprobar que estamos organizando bien nuestro diseño.
Al compartir nuestro prototipo, podemos asignar permisos para ver o para editar, tanto cuando compartimos la vista de edición como la vista de prototipo. Las URLs de los prototipos tienen la etiqueta «proto» y las URLs de los archivos tienen la etiqueta «file».
Respecto a las opciones de exportación, están disponibles abajo a la derecha, en el panel de propiedades. Podemos exportar nuestros diseños en varios formatos: PNG, JPEG, SVG y PDF. Además, podemos seleccionar opciones de tamaño.
Si seleccionamos una capa o un grupo antes de exportar, se exportará lo que hayamos seleccionado y podemos seleccionar un área específica para exportar si utilizamos la herramienta Slice.
En los ejercicios de este tema, nuestros diseños van a cobrar vida. Os propongo las siguientes tareas:
- Crear un archivo nuevo y, en la primera página, crear tres frames con las dimensiones de un smartphone. Crear varias capas en cada frame (pueden ser rectángulos, círculos, estrellas, u otras).
- Hacer clic en la pestaña Prototype y conectar las capas de los frames entre sí:
- Elegir distintos desencadenantes o triggers para cada conexión, para ver cómo funcionan.
- Visualizar el prototipo y compartirlo con alguien, o con vosotros mismos.
- Hacer clic en las distintas áreas interactivas que has creado y comprueba la magia del prototipado de Figma. Si se actualiza el diseño en el ordenador, se actualizará el prototipo del móvil en tiempo real.
Para practicar las opciones de exportación de archivos, os propongo las siguientes tareas:
- Delimitar con la herramienta Slice un área de tu diseño. Exportar ese área en PNG a tres veces su tamaño.
- Crear varias capas, agrupar y exportar el grupo a PDF.
Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente lección! :)
Todos los capítulos de este curso:
- Curso Figma #1. Introducción
- Curso Figma #2. Entorno de trabajo
- Curso Figma #3. Formas y herramientas
- Curso Figma #4. Textos e imágenes
- Curso Figma #5. Capas
- Curso Figma #6. Auto Layout, Constraints y Layout Grids
- Curso Figma #7. Componentes y estilos
- Curso Figma #8. Prototipado y exportar
- Curso Figma #9. Team Library
- Curso Figma #10. La comunidad de Figma