A5. Crear mockups con Figma

En esta actividad utilizaremos Figma para crear los mockups de nuestra aplicación web, aplicando la guía de estilo y reutilizando los componentes creados en la actividad anterior.

1. Organizar el archivo de Figma

Organiza el archivo de diseño en dos páginas:

• Components: Contendrá los componentes reutilizables de la aplicación.
• Mockups: Contendrá los diseños de las diferentes vistas.

Todas las vistas deberán estar en la página Mockups, cada una dentro de su propio frame.

2. Crear los mockups desktop

Diseña, como mínimo, las siguientes vistas de tu aplicación:

• Listado de objetos: Vista que muestra una colección de elementos (clientes, productos, vehículos, etc.).
• Detalle de objeto: Vista que muestra la información de un elemento seleccionado.

Utiliza un frame predefinido de Figma para desktop como contenedor principal de cada vista (por ejemplo, Desktop 1440).

Los mockups deberán incluir los colores, tipografías, iconos y demás elementos visuales definidos en la guía de estilo.

3. Organizar los elementos

Organiza los elementos de cada vista siguiendo estas recomendaciones:

• Utiliza frames para estructurar las diferentes secciones de la interfaz.
• Aplica Auto Layout cuando resulte conveniente para controlar el padding, la alineación y la separación entre elementos.
• Reutiliza los componentes creados anteriormente mediante sus instancias.
• Crea nuevos componentes cuando sea necesario.
• Utiliza componentes anidados cuando corresponda.
• Mantén una jerarquía clara de elementos, asignando nombres descriptivos a los frames, grupos y demás elementos.

Frames, grupos y componentes

• Frame: Contenedor que permite organizar elementos y configurar propiedades como Auto Layout, padding y espaciado.
• Grupo: Agrupación de elementos para seleccionarlos y moverlos conjuntamente.
• Componente: Elemento reutilizable cuyas instancias mantienen una vinculación con el componente principal.

No todos los frames necesitan convertirse en componentes. Utiliza componentes cuando necesites reutilizar elementos y mantener un diseño consistente.

Ejemplo de organización de una vista

La siguiente imagen muestra cómo organizar una vista de listado de objetos mediante frames, componentes e instancias.

En el ejemplo:

• Los frames organizan la vista y sus diferentes secciones.
• Los componentes definen elementos reutilizables, como botones, tarjetas, menús y campos de formulario.
• Las instancias permiten utilizar esos componentes dentro de la interfaz.
• Los componentes anidados permiten construir elementos más complejos a partir de otros componentes.

Observa también la jerarquía de elementos en el panel de capas de Figma.

4. Ampliación opcional

Puedes ampliar el trabajo realizando:

• Resto de vistas desktop: Completa los mockups de todas las vistas definidas en las actividades anteriores.
• Diseño mobile: Adapta las vistas a dispositivos móviles utilizando frames predefinidos de Figma.

Las versiones móviles deberán adaptar la distribución de los elementos al tamaño de pantalla, no limitarse a reducir las dimensiones del diseño desktop.

5. Evaluación

La actividad se calificará sobre 10 puntos, con la siguiente distribución:

Apartado	Puntuación máxima
Mockups desktop de listado y detalle de objetos.	5 puntos.
Resto de vistas desktop.	2 puntos.
Adaptación de todas las vistas a dispositivos móviles.	3 puntos.
Total	10 puntos

La puntuación será acumulativa:

• Hasta 5 puntos: Realización de las dos vistas desktop obligatorias.
• Hasta 7 puntos: Realización de todas las vistas desktop.
• Hasta 10 puntos: Realización de todas las vistas mobile.