Sistemas de diseño con Atomic design, Sketch y Abstract — 2019
Versiona, escala y controla tus productos de manera inteligente.
Prefacio
Pasaron casi 2 años desde que publiqué por primera vez en medium los artículos sobre atomic design y sistemas de diseño. Durante ese tiempo mientras diseñaba en 23 design productos digitales para múltiples compañías y startups Mexicanas, llevé a la práctica la metodología de Brad Frost. En el camino he descubierto nuevas y mejores formas de traer a la vida este tipo de pensamiento. Este post es una actualización de ese primer acercamiento (casi en su versión beta) que hice en el 2017.
Contenido
- 👀 ¿Qué es un Sistema de Diseño?
- ⚗ ¿Qués es Atomic Design?
- 🗄 Control de versiones en Sketch con Abstract
- 🍸 Mix&Match
- 👋Conclusión
Sin más preámbulos…
👀 ¿Qué es un Sistema de Diseño?
Un sistema de diseño es una colección de patrones y prácticas organizadas de manera que sirvan al propósito u objetivo de un producto digital.
Los patrones son elementos repetitivos que combinados crean una interfaz: cosas como user flows, interaciones, botones, inputs, íconos, colores, tipografía, microcopy.
Las prácticas son la manera en que elegimos como crear, capturar y usar estos patrones específicamente cuando trabajamos en un equipo. El objetivo principal de un sistema de diseño es construir a través de estos patrones y prácticas un lenguaje. El lenguaje es fundamental para la colaboración, cuando se trabaja en equipo este debe hablar el mismo de lenguaje de diseño. Sin un lenguaje compartido, ese equipo no será capaz de crear nada juntos. Cada uno de ello tendrá un modelo mental muy diferente con respecto al producto y lo que quieren lograr.
***** Antes de adentrarnos a la parte técnica del asunto, es muy importante que entendamos que los sistemas de diseño son solo una herramienta que nos permite reducir a largo plazo los tiempos de ejecución en una funcionalidad de un producto digital. Mal ejecutados, tendrán un impacto negativo en los usuarios que interactuen con ellos. ******
“Designers spend their time copying pixels and reinventing solutions to the same problems, instead of understanding and solving real user needs.”
Enfoquémonos en lo importante: Los usuarios.
⚗ ️¿Qués es Atomic Design?
Es una metodología para categorizar componentes visuales creada por Brad Frost. Se inspiró prácticamente en la metáfora de la química y la forma en que la matería está construida, en donde cualquier organismo vivo está compuesto por la suma de componentes más pequeños.
En palabras del mismo Brad:
“Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.
En atomic los componentes se dividen de la siguiente manera: Átomos, moléculas, organismos, templates y páginas.
Átomos: Son la mínima expresión de un componente. A este nivel podemos encontrar elementos como colores, tipografías, iconos, imágenes, etc.
Moléculas: Cuando dos o más átomos se agrupan para crear un componente visual con mayor contexto. A este nivel podemos encontrar elementos como formularios, navegación, campos de texto, cards, etc.
Organismos: Ahora las moléculas estarán agrupadas en forma de organismos, acá podremos empezar a notar que estos elementos reunidos en un solo lugar empiezan a crear módulos de componentes. A este nivel podemos encontrar una barra completa de navegación, un footer, listas de items, etc.
Templates y páginas:
Grupos de organismos dan vida a los templates y las páginas. En estos niveles la abstracción de los componentes cobra sentido en la diagramación como un todo. Personalmente no suelo utilizar estas dos últimas categorías.
Para no hacer complicado lo simple, Atomic design aparte de ser una metáfora de la química es una manera simple de ayudar a nuestra memoria a construrir caminos para ordernar los componentes de interfaz que estemos usando en nuestros proyectos. Así como la metáfora de las carpetas en los sistemas operativos, en el caso de Atomic es una guía bastante específica de como los podríamos encontrar gracias a la forma en la que los nombramos y organizamos.
Sketch y Atomic Design
Sketch sin duda alguna es el estandar de la idustria si hablamos de software especializado en la creación de interfaces. Una de las funcionalidades más poderosas de sketch son los símbolos.
Un símbolo en sketch es un componente visual que:
- Se comporta como un patrón y puede ser reutilizado a través de un documento en múltiples artboards o en diferentes archivos llamandolo desde una librería.
- Cuando sufre cualquier tipo de modificación al ser reutilizables, se actualizarán automáticamente (ya sean artboards o documentos) en todos los lugares en donde se estén llamando .
- Pueden contener otro símbolos, anidarse.
Como vimos en el ejemplo anterior, en Sketch podemos agrupar elementos usando [ / ] así mantendremos en “subdivisiones” esos componentes.
Por lo tanto, estos componentes definidos desde una base atómica se pueden organizar y controlar desde 3 categorías distintas y la sintaxis entonces, la podríamos hacer de la siguiente manera:
- Categoría: Definir si es un átomo, una molécula o un organismo.
- Componente: Identificar a nivel del lenguaje visual digital que tipo de elemento es.
- Nombre del componente: Una subcategoría que podría estar ligada al estado del componente dentro de la interfaz
- [Variable]: Asignarle una característica que nos ayude a clasificar a nuestro elemento visual (tamaño, alineación, estado…)
🗄 ️Control de versiones en Sketch con Abstract
Qué es un Abstract?
Abstract, es un software que nace en el 2017 por culpa de Sketch. Inicialmente, el problema que querían solucionar a través del control de versiones era el eterno dolor de buscar la versión final del archivo para compartírselo a alguien más — o en el peor de los casos que uno mismo encontrara esa versión final—
Al día de hoy, Abstract sigue ayudando a los diseñadores visuales a administrar mejor sus archivos de Sketch y permite a equipos de diseño a nunca jamás volver a decir las palabras mágicas…
¿Y entonces cuál es la versión final del archivo?
Para no darle más vueltas, enlisto de manera breve cómo Abstract ayuda al mundo:
- Una sola fuente de verdad un solo lugar en donde todas las personas que deben colaborar en un proyecto puede consultar las diferentes iniciativas o la última versión del mismo.
- Puedes diseñar en paralelo. Múltiples diseñadores sobre el mismo archivo de Sketch.
- Mantiene el historial de cambios de un producto desde el día 0. puedes volver en el tiempo y revisar ese wireframe que resolviste hace 4 meses y quedó en el olvido.
Un pequeño vistazo de Abstract
Organizaciones:
Las organizaciones son generalmente equipos de producto. Un diseñador puede ser parte de múltiples organizaciones y su rol es de “contributor”. También cada cuenta tiene una “organización privada” en donde puede crear sus proyectos privados.
Proyectos: Donde definimos la estructura donde vivirán nuestros archivos de sketch. Hay varias maneras de nombrar un proyecto. Dos buenas opcionos podrían ser:
- Por plataforma — ios, android, web
- Por feature
También existe la posibilidad de tener proyectos privados
Master:
Cada proyecto tiene un espacio maestro o Master en donde se podrán encontrar uno o varios documentos de sketch. Los archivos que se encuentran en este lugar no son editables ya que al considerarlos como “la fuente de la verdad” se tratan como la última versión de el proyecto. Para poder editar un Master se debe crear un Branch (rama)
Branch:
Los Branchs son copias de nuestros archivos en donde podemos realizar cambios sin afectar a la versión que se encuentra en Master o a las versiones que están trabajando otros colaboradores en otros branches . Creamos un branch para cumplir un objetivo muy concreto.
Así el propósito del trabajo en paralelo y colaborativo del control de versiones cumple su ciclo.
Abstract se ha tomado la tarea de crear un tutorial paso a paso para entender la lógica de trabajo con un par de ejercicios que encontrarán aquí y es parte de su documentación oficial.
🍸 Mix & Match
La magia entonces para construir y mantener nuestro sistema de diseño está en combinar las buenas prácticas de Atomic Design, Sketch como software y Abstract para seguir la vida de un producto.
Les comparto este video en donde les explico de la forma más breve a partir de un ejercicio (muy fácil de replicar) como pueden empezar a poner en práctica lo mencionado en el artículo. Disfrútenlo:
👋 Conclusión
Manos a la obra. Si tienen algún side project o un producto en donde puedan probar este stack se darán cuenta del poder de combinar las funcionalidades de Abstract+Sketch con la metodología de Atomic y con el paso del tiempo dar vida a un sistema de diseño que puedan mantener y moldear según sus necesidades.
Como Bonus, les comparto dos cosas muy interesantes sobre los sistemas de diseño.
Hola, Soy Jay! Product Designer en 23 Design . Colombiano (sin acento) en México.
