A4. Crear componentes con Figma

En esta actividad utilizaremos Figma para crear componentes reutilizables que posteriormente emplearemos en los mockups finales de nuestra aplicación web.

1. Crear los componentes

Abre el archivo de Figma de tu aplicación y crea, como mínimo, los siguientes componentes:

• Botón (Button). Elemento para realizar acciones.
• Barra de navegación (Navbar). Elemento con las principales opciones de navegación.
• Tarjeta (Card). Elemento para mostrar información agrupada.

Los componentes deberán respetar los colores, tipografías y demás características definidas en la guía de estilo de la aplicación.

2. Organizar los componentes

• Organiza los componentes en una página de Figma llamada Components.
• Asigna nombres descriptivos a los componentes.

Estos componentes se reutilizarán posteriormente para construir los mockups de las distintas vistas.

Wireframe, mockup y prototipo

• Wireframe: Esquema básico que define la estructura y distribución de los elementos de una interfaz.
• Mockup: Representación visual del diseño final, con colores, tipografías e imágenes.
• Prototipo: Simulación interactiva que permite probar la navegación y el funcionamiento de la interfaz.

3. Vídeos recomendados

En el curso oficial Figma Design for beginners encontrarás los siguientes vídeos:

1. Create the button (5 min).
2. Components fundamentals (4 min).
3. Create the card and container system (18 min).
4. Create the navigation bar and footer (14 min).

Recurso adicional

Design an interactive button component: tutorial práctico para crear un botón reutilizable con variantes, estados e interactividad.