You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
2 Hrs
11 Min
54 Seg

Prototipando en Figma

17/20
Resources

What is prototyping in Figma and why is it important?

Prototyping is a crucial step in the development of a digital product, and Figma is a powerful tool that facilitates this process with its collaborative design capabilities in the cloud. A prototype is not simply a sketch, but an interactive file that allows you to visualize the look and functionality of a product before it is fully developed. Figma allows developers and designers to not only create visual designs but also define interactions and animations that provide a realistic experience of the final product. This facilitates product evaluation and fine-tuning in the early stages of development. Let's look at how to prototype effectively in Figma and the key elements of this process.

What are the key elements in a Figma prototype?

Prototyping comprises several essential elements to ensure a smooth and functional experience:

  • Object and Target: Identify the interactive elements, such as buttons or links (object A), that will take the user to other elements or specific screens (object B).

  • Interaction: Define how and when the interaction will occur, i.e., what user action (click, drag, etc.) will initiate the change from one screen or element to another.

  • Transitions or animations: These are the ways in which the interaction will take the user from one state to another, either through sliding motions, fades, or other animations.

  • Preview: Figma allows you to visualize how the prototype will look and function in real time, which is crucial for user testing and customer presentations.

How is basic prototyping done in Figma?

Prototyping in Figma is a fairly straightforward process and does not require advanced technical knowledge. Here are some basic steps that will guide you through the creation of a prototype:

  1. Define interaction and scrolling:

    • Fix important components such as the header and footer using the "Fixed Position When Scrolling" option. This ensures that these elements remain visible as the user scrolls through the content.
    • Configures vertical scrolling in relevant content areas to allow the user to explore extensive content.
  2. Cross-screen navigation:

    • Create interactions that connect different screens in the prototype. For example, a click on an image on the main screen could lead to a detail page.
    • Use arrows and other prompts to guide navigation.
  3. Animations:

    • Assign smooth, natural animations to enhance the user experience. You can opt for transitions such as side swipes, which give fluidity to the change between screens.
    • Set appropriate durations (e.g. 250-300 milliseconds) to maintain natural interaction and avoid excessive waiting.

What recommendations to follow when prototyping in Figma?

Here are some recommendations when prototyping in Figma:

  • Design as realistically as possible: The closer the prototype is to the final product, the more valuable the feedback you will receive.

  • Test on real devices: Although Figma allows for in-app previews, testing the prototype on real devices provides a better understanding of the user experience.

  • Use different files for demonstrations: When presenting to customers or stakeholders, work from a separate file to prevent changes to the prototype from affecting the demo.

  • Document interaction: Detail interactions and the reasons behind specific design decisions to maintain clarity among team members and stakeholders.

Finally, prototyping with Figma not only speeds up the design validation process, but also ensures that the development team has a clear, visual roadmap to follow. Continue to explore and practice with this tool to master its capabilities and improve your design and development processes.

Contributions 29

Questions 9

Sort by:

Want to see more contributions, questions and answers from the community?

¡Gracias!
En mi ruta para Product Designer está Figma…pero luego de esta clase quedé con más emoción y motivación

Hoy he aprendido todo lo necesrio para terminar mi prototipo, no puedo creer lo que hace 8 minutos por mi vida, grcias Platzi ❤️

SCROLL

Podemos añadir un scroll en nuestro diseño siguiendo los pasos:

Mis notas de la clase:

  • Objetivos y destinos: definir punto de llega y de salida.
  • Interacción: disparador de la acción.
  • Transiciones y animaciones: cómo moverse de A hasta B.
  • Previsualiza el prototipo, todos los cambios pueden afectar al fichero.

Elementos:

  1. Objetivos y destinos
  2. Interacción
  3. Transiciones o animaciones
  4. Previsualizar el prototipo (importante que sea aparte)

Buen día!
Nunca he llegado a manejar Figma, pero gracias a estas clases me ha llamado mucho la atención el funcionamiento y la cantidad de cosas que se pueden realizar ahí.

Buena introducción al trabajo en el software más popular para UI y UX hoy en día: Figma.

el “fix position when scrolling” ahora está en la barra de prototipado

**Clase 17 - Prototipado en Figma** * **¿Qué elementos debemos definir cuándo vamos a prototipar en Figma?** * Objetivos y destinos. * Interacción. * Transiciones o animaciones. * Previsualiza el prototipo * **¿Qué representa el elemento “Objetivos y destinos” en el prototipado en Figma?** * Esto nos permite navegar entre diferentes elementos del producto, es decir, llevarnos de un lado a A un lado B. * **¿Qué representa el elemento de “Interacción” en el prototipado en Figma?** * Esto representa el evento que asignamos a un elemento A para llegar al elemento B, por ejemplo: * Hacer click. * Pasar el cursor sobre el elemento. * **¿Qué representa el elemento “Transiciones o animaciones” en el prototipado en Figma?** * Esto representa el cómo nos vamos a mover de un elemento A a un elemento B. * **¿Qué representa el elemento “Previsualiza el prototipo” en el prototipado en Figma?** * Esto nos habla de que debemos de tener cuidado a la hora de hacer cualquier cambio sobre el archivo sobre el que estamos trabajando, ya que los archivos en Figma son elementos vivos y podemos dañar nuestro diseño sin darnos cuenta. Por esta razón se recomienda trabajar sobre una copia que podemos modificar.
**Resumen de la clase: Prototipando en Figma** 1. **Definición de Prototipos**: Se introduce la importancia de los prototipos en el diseño, destacando su función como una representación visual interactiva del producto. 2. **Elementos Clave**: - **Objeto A y Destino B**: Identificar el objeto que inicia la interacción y el destino al que lleva. - **Interacciones**: Define las acciones que inician la interacción (clic, arrastrar, etc.). - **Transiciones o Animaciones**: Describe cómo se mueven entre elementos. 3. **Previsualización**: Se enfatiza que el prototipo es un "fichero vivo", donde cualquier cambio afecta su presentación. Se recomienda trabajar en un fichero separado durante pruebas. 4. **Demo en Figma**: - Se presenta una aplicación móvil como ejemplo, mostrando cómo fijar cabecera y footer durante el scroll. - Se enseña a añadir interacciones para navegar entre páginas, cómo realizar scroll vertical y personalizar animaciones. 5. **Conclusión**: La clase concluye invitando a explorar más sobre el uso de Figma en el diseño de interfaces.
Wow! Amé esta clase! :D

Si no te aparece la opción fix position when scrolling, este video puede serte útil (está en inglés):

https://www.youtube.com/watch?v=aWq6gzccqEY

Hay una serie de pasos a seguir para realizar un prototipado
.

  1. Definir el objeto y el destino : Tener claro hacia donde me debe llevar cierto elemento.
    .
  2. Interacción : Entender ****cual va a ser el detonador para realizar el movimiento hacia el destino, ¿Que debe suceder para que se realice ese movimiento o se ejecute la acción?
    .
  3. Transiciones y animaciones : Como sere el movimiento desde un elemento A hasta un elemento B
    .
  4. Previsualiza el prototipo : Hay que tener en cuenta que el prototipo es un fichero que esta vivo, metaforicamente hablando es decir que todos los pasos anteriores se veran reflejados aqui

ANIMACIONES

Figma permite añadir una animación a una interacción entre pantallas, siguiendo los siguientes pasos:

INTERACCIONES

Podemos añadir interacción entre 2 pantallas de nuestro prototipo para relacionarlas, siguiendo los siguientes pasos:

Gracias, excelente figma, tomaré el curso!!!
No encuentro en Figma la opción de Fix position when scrolling, alguien sabe si hubo alguna actualización?, gracias
Siento que la idea era crear en conteniado y luego animarlo. Es un brinco grante, recuerden que es el primer nivel del curso.

Muy bueno

* Objetivos y destinos: De A a B, cual va a ser la interacción?, cuando va a ocurris esto, cuando se arranca la interacción. Transiciones o animaciones es como nos movemos de A a B. Previsualizar el prototipo, cualquier mínimo cambio afecta todo el proyecto, asi que es importante hacerlo en otro fichero aparte de prueba. * Nos explican la utilización de Figma.
El maestro en prototipado interactivo es Adobe XD

Casi que no anclo los elementos.

Bueno este scrolling no lo conocia jaja, me encanta y funciona muy bien para mi trabajo!!!

Gracias

Muchas gracias Profe Emilio García.

Amé.

Wow!!! Excente clase, ahora todo tiene sentido. Muchas gracias!

Hola, alguien me puede dar acceso al link de Figma no puedo ingresar ya me registre pero me pide la confirmación.