Magma
Una API para crear sistemas de componentes
Por Francis Vega Diseñador en Secuoyas
¿Qué es?
Magma es especificación, infraestructura y software. Todo ello conforma un producto con el que desarrollamos nuestros sistemas de componentes en Secuoyas.
Un poco de historia
Resulta difícil concretar una fecha de nacimiento para Magma, pero en el verano de 2016 teníamos funcionando un sistema de componentes escrito en html/css utilizando como plataforma de desarrollo Fractal con un pequeño UI Kit en Sketch.
En ese primer momento nació un MVP de nuestro sistema completo (visual + front-end). Era algo más que un Kit de Sketch o un PDF con especificaciones. Era un sistema vivo, actualizable, funcional… pero tenía un problema: Era demasiado específico, acoplado a una base visual y de código. Algo que es un problema para un estudio como Secuoyas dada la variedad de nuestros proyectos.
La idea era utilizarlo como boilerplate. Al ser un sistema específico tanto a nivel visual como a nivel de código, el uso para cualquier proyecto se complicaba. El workflow se prestaba a realizar una copia de aquel sistema y cambiar sketch y código desde un nivel muy bajo. No era empezar desde cero, pero casi.
Teníamos que encontrar una alternativa.
Tweak, tweak, tweak…
Continuamos retorciendo el sistema para hacerlo capaz de ser utilizado por cualquier proyecto y que además se aprovechara de mejoras realizadas en el camino. Fue bien, después regular y finalmente mal.
Cambiamos la tecnología a React para facilitar la modularidad y composabilidad, reescribimos los componentes, maduramos la documentación y también le pusimos nombre (aún no era Magma :P)
Nos acercamos un poco a algo que nos gustaba y parecía cumplir nuestras expectativas, pero por el camino habíamos añadido demasiada dificultad al sistema y su uso no era todo lo fácil que pretendíamos. No era la solución.
Secuoyas necesitaba un sistema capaz de amoldarse a cualquier producto que desarrollemos, con normas, agnóstico a la tecnología y fácil de implementar, utilizar y mantener.
🎉 Nace Magma
Esta vez decidimos replantearlo todo, empezar de nuevo. Teníamos ventaja: sabíamos lo que queríamos y sabíamos lo que no nos funcionaba. De esa manera surgió la idea de crear una API.
Ahora sí, nace Magma: una API que describe y especifica las bases de un sistema de componentes.
Como ejemplo
Magma especifica cómo es a nivel de estructura y reglas de uso una paleta de colores, pero no describe cuáles son. Eso queda en la parte del usuario de la API.
Estamos ante lo que nos gusta llamar una especificación.
¿Qué incluye Magma?
Magma lo componen tres bloques esenciales, Magma Core (API), Magma Tools y Magma Kit.
Magma Core
Es el API en sí, el núcleo de Magma. Se compone de:
- Entidades (Primitives, Elements, Components)
- Temas
Entidades
Son los integrantes del sistema de componentes (algo que podemos ver en Atomic Design), existiendo entre ellos una relación y jerarquía.
Primitives
Son los bloques de construcción de más bajo nivel, son los integrantes de un Theme, como la paleta de colores, la tipografía, iconos, espaciados, breakpoints, etc., definidos en archivos json.
Éste es un extracto del archivo colors.json de Magma.
Elements
Son la mínima expresión de un elemento de interfaz. Utilizan las primitives para su composición como pueden ser botones, imágenes, links, input, etc.
Componentes
Composiciones de orden mayor que utilizan los Elements para crearse. Ejemplos de ellos puede ser Cards, Header, Footer, Carrusel, etc.
Temas
Conforman un conjunto definido de primitives. Con los temas tenemos acceso a modificar y cambiar por completo la apariencia de una app de forma centralizada.
Magma Tools
Son herramientas que nos ayudan a trabajar de forma más ágil y controlada con Magma. Algunas de ellas son:
- Editor de Themes.
- Editor de escala tipográfica responsive.
- Magma-cli para iniciar un repositorio Magma React.
Magma Kit
Elementos relacionados con una implementación de Magma, en nuestro caso React y Sketch. Nuestro kit incluye bibliotecas de Sketch, plugins de Sketch y un repositorio en React con los primitives y elements.
Nuestra propia implementación de Magma
En Secuoyas ya usamos Magma 😜 y tenemos el privilegio de haber desarrollado la primera implementación en React y Sketch. ¿Qué significa esto? Pues que hemos creado un sistema de componentes en React que se nutre en cuanto a primitives y themes del API de Magma.
Nuestra idea es abrirlo al mundo cuando esté listo para ello, de momento tiene que quedarse calentándose en nuestro estudio.
Tendremos siguientes entregas de Magma bajando más al detalle de cómo funciona y cómo está siendo la experiencia con clientes, y con nosotros mismos.
¡Si aún no has visto nuestros artículos anteriores relacionados con los Sistemas de Diseño no te los pierdas!
- “Sistemas de Diseño, mucho más que componentes”
- “Sistemas de Diseño, un marco conceptual”
- “Global Design System”
Ilustración: Madeline Honingford
