Curso Figma: 25. Proyecto Final: Atomic Design - #jonmircha

Introducción al Curso de Firma

Bienvenida y Presentación

• Jonathan Marcha da la bienvenida a la clase número 25 del curso de firma, invitando a los espectadores a compartir el contenido si lo consideran valioso.

• Se recuerda que se ha comenzado una nueva etapa en el curso enfocada en el proyecto final, mencionando un proceso relacionado con UEX.

Metodología Atomic Design

Concepto de Atomic Design

• Jonathan introduce la metodología "Atomic Design", acuñada por Brad Frost, que utiliza una metáfora de la tabla periódica para clasificar elementos HTML.

• Se explica cómo esta metodología permite agrupar etiquetas HTML en diferentes categorías según su función y características.

Clasificación de Elementos HTML

• Las etiquetas se clasifican por colores: azules para metadatos, amarillas para texto específico, moradas para elementos no textuales como imágenes y verdes para formularios.

• Se menciona que cada color representa diferentes tipos de elementos HTML, facilitando su identificación y uso en diseño web.

Aplicación del Atomic Design en Firma

Integración con Herramientas de Firma

• Jonathan destaca cómo el concepto de componentes en firma se alinea perfectamente con la metodología del atomic design.

• Se hace referencia a clases anteriores donde se enseñó a crear estilos locales y exportarlos como sistemas de diseño o "team library".

Niveles del Atomic Design

• La metodología propone cinco niveles: átomos, moléculas, organismos, templates y páginas; cada uno representando un nivel creciente de complejidad.

• Se enfatiza que los átomos son las unidades más pequeñas (etiquetas HTML), mientras que las moléculas son combinaciones funcionales de estas etiquetas.

Ejemplos Prácticos del Atomic Design

Definición y Ejemplificación

• Un átomo es definido como la unidad más pequeña e indivisible; ejemplos incluyen etiquetas individuales como inputs o botones.

¿Qué es un organismo en el diseño atómico?

Definición de Organismo

• Un organismo se define como un conjunto de moléculas más complejas, que a su vez son componentes de la interfaz de usuario.

• Brad Frost ilustra este concepto con el ejemplo de una cabecera típica, que puede variar en complejidad según las funcionalidades del sitio.

Componentes del Organismo

• Los organismos están formados por estructuras más complejas compuestas por átomos y moléculas, como etiquetas o elementos más pequeños.

• En el caso de la cabecera mencionada, incluye tres moléculas: el logo, el menú y un formulario de búsqueda.

¿Cómo se relacionan los templates con los wireframes?

Concepto de Templates

• Los templates son representaciones visuales que derivan de los wireframes, que son figuras geométricas y textos descriptivos.

• Estos templates permiten visualizar cómo se integrarán diferentes elementos en la interfaz sin necesidad de explicaciones extensas sobre su función.

Ejemplo Visual

• Se menciona que los templates pueden incluir elementos como vídeos o texto, lo cual hace evidente su propósito dentro del diseño.

Los cinco niveles del diseño atómico

Estructura General

• La metodología del diseño atómico se compone de cinco niveles: átomos, moléculas, organismos, templates y páginas.

• Las páginas representan el layout final con contenido real o simulado dependiendo del estado del proyecto.

Recursos Adicionales

• Brad Frost ofrece recursos adicionales a través de su sitio web "Pattern Lab", donde se pueden encontrar herramientas para implementar esta metodología.

Relación entre diseño atómico y desarrollo en código

Implementación en Código

• El diseño atómico también se aplica al desarrollo en código utilizando CSS y HTML para crear componentes reutilizables.

• Frameworks como Bootstrap o Tailwind utilizan estos principios al ofrecer componentes listos para usar que facilitan la creación rápida de interfaces.

Flexibilidad Metodológica

Introducción al Atomic Design en Proyectos Web

Conceptos Básicos del Atomic Design

• Se introduce el concepto de Atomic Design, que se aplica a la estructura de un proyecto web, dividiendo los elementos en átomos, moléculas y organismos.

• Los átomos incluyen elementos fundamentales como tipografía, paleta de colores y componentes básicos (botones, inputs, imágenes).

• Las moléculas son combinaciones de átomos que forman bloques más complejos; por ejemplo, un formulario de búsqueda.

Estructura Avanzada: Organismos y Templates

• Los organismos son conjuntos más elaborados que pueden incluir múltiples moléculas; se menciona un ejemplo visual con una cuadrícula.

• Ejemplo de un organismo es una tarjeta con imagen y contenido, mostrando cómo se agrupan los elementos visuales.

• En cuanto a los templates, se presenta una página inicial típica de un blog con su cabecera, menú y contenido simulado.

Implementación Práctica del Diseño

• Se discute la importancia de los wireframes como representaciones gráficas iniciales antes del desarrollo final.

• En el nivel final del diseño atómico (páginas), se reemplaza el contenido simulado por texto e imágenes reales en ejemplos prácticos.

Aplicación en Proyectos Personales

• El proceso descrito puede aplicarse a proyectos personales como la creación de una landing page o portafolio digital.

• Se anima a los participantes a utilizar sus dominios personales para crear presentaciones efectivas de sus currículos o trabajos.

Conclusiones y Próximos Pasos

• Se anticipa que en futuros videos se explorarán más pasos dentro del proceso UX utilizando la metodología del Atomic Design.