Sesión 9: Átomos en Figma

Miércoles 10 Agosto 2022. La clase trata de la conformación de los átomos y la primera molécula de mi design System (el botón) . Hasta ahora se han creado tipografías, sus tamaños y características, colores, estilos de bordes, sombras y se han designado iconos convertidos a componentes.

 

 

1. Átomos: son los componentes básicos de la materia, aplicados a interfaces web se traduce a las etiquetas de un HTML, como los botones por ejemplo. Los átomos también pueden incluir colores, fuentes e incluso animaciones.

 

 

Los átomos en sí son muy abstractos en la naturaleza, por si solos pueden parecer inútiles, pero son excelentes como una referencia de patrones, ya que podemos ver los estilos a niveles globales.

 

 

2. Moléculas: Consiste en la combinación de átomos, y es donde se presenta mejor su utilidad, ya que se vuelven la columna vertebral de nuestros sistemas de diseño, imaginemos la combinación de una etiqueta de formulario y un botón, juntos forman un formulario y ahora pueden hacer algo juntos.

La idea de juntar átomos nos permite crear moléculas simples que sirvan para ser reutilizadas, es por ello que hay un enfoque de hacerlo bien.

 

https://www.uifrommars.com/atomic-design-ventajas/

 

3. Organismos: Las moléculas nos ofrecen bloques que al unirlos nos permiten crear cosas más complejas, al combinarlas se forman organismos que pueden pertenecer a una sección de una interfaz un tanto más compleja.

 

La acumulación de moléculas y organismos nos permiten tener más practicidad a la hora de elaborar algo “rápido”, sobre todo cuando conversamos con clientes, ya que nos permiten formar una dirección visual sin tener que desarrollar algo complejo.

 

4. Plantillas: Las plantillas consisten en agrupaciones de organismos unidos, donde estos a su vez forman páginas, aquí es donde empezamos a darle más sentido al diseño. Aquí es también donde los clientes empiezan a ver de forma más concreta el diseño con cada cosa en su lugar, podemos tener como referencia a los wireframes, que se componen de una construcción sencilla de varias moléculas que a su vez forman organismos reutilizables.

 

5. Páginas: estas son el nivel más alto de fidelidad, básicamente son las mismas plantillas, pero con la sustitución de algunos elementos que sean representativos de lo que el usuario final verá, usualmente todas las revisiones giran en torno a estas páginas.

 

Las páginas son esenciales, ya que es aquí donde se prueba la eficacia del diseño, ver todo en contexto nos permite retroceder para modificar nuestras moléculas, organismos y plantillas para así abordar de forma idónea todo lo relacionado con el diseño.