¡Gracias!
En mi ruta para Product Designer está Figma…pero luego de esta clase quedé con más emoción y motivación
Intro
Bienvenida
Introducción al mundo digital
Introducción al software
Historia del diseño
Heurísticos
Principios heurísticos de percepción y comportamiento I
Principios heurísticos de percepción y comportamiento II
Principios heurísticos de relación y jerarquía
Principios heurísticos de forma I
Principios heurísticos de forma II
Interacción
Básicos de User Interface
Arquitectura de la información
Tipografía
Vectores y operaciones booleanas
Usabilidad, consistencia y eficiencia
Organización, colaboración y procesos
Animación
Principios de la animación
Prototipando en Figma
Cierre
Ejemplos de portafolio de diseño
Cierre
Live Class
Live Class - UI Design: transforma ideas en experiencias
You don't have access to this class
Keep learning! Join and start boosting your career
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.
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.
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:
Define interaction and scrolling:
Cross-screen navigation:
Animations:
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
¡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:
Elementos:
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
Si no te aparece la opción fix position when scrolling, este video puede serte útil (está en inglés):
Hay una serie de pasos a seguir para realizar un prototipado
.
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:
Muy bueno
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!
Want to see more contributions, questions and answers from the community?