Magma. An API to create components systems.

This article is posted in Spanish in our blog - Pause

What is Magma?

Magma is a specification, an infrastructure and a software. Together these form a product with which we have designed our system of components at Secuoyas.

A little bit of history

It is difficult to pinpoint a specific date of birth for Magma, but during the summer of 2016 we had a functioning component system written in html/css using Fractal: a development platform with a small UI Kit in Sketch.

In that first moment an MVP was born from our complete system (visual + front-end). It was something more than just a Sketch Kit or a PDF with specifications. It was a live, upgradeable, functional system ... but it had a problem: It was too specific, tethered to a visual and code base. Something that is a problem for a studio like Secuoyas given the variety of our projects.

The idea was to use it as a boilerplate for our projects. Being a specific system both visually and at the code level, using it for any given project was complicated. The work was therefore to make a copy of that system and change our sketch and code from a very low level. It was not starting from scratch, but almost.

We had to find an alternative.

Tweak, tweak, tweak ...

We continued to twist the system to make it compatible with any project and also took advantage of improvements made along the way. It was good, then average and finally it was bad.

We changed the technology to React in order to facilitate the modularity and composition, we rewrote the components, we matured the documentation and we also gave it a name (it was not Magma yet :P)

We got a little closer to something we liked and that seemed to meet our expectations, but along the way we had added too many complications to the system and it was not as easy to use as we wanted. It was not the solution.

Secuoyas needed a system capable of adapting to any product that we may develop, with standards, agnostic technology and that would be easy to implement, use and maintain.

🎉 Magma is born

At this point we decided to rethink everything, to start over. We had an advantage: we knew what we wanted and we knew what did not work for us. That is how the idea of creating an API came about.

Now, Magma was born: an API that describes and specifies the bases of a system of components.

As an example

Magma defines a palette of colors as just that at the structural level and sets rules of use, but does not describe which color is which. That remains at the API user’s discretion.

This is what we like to call a specification.

What does Magma include?

Magma is made up of three essential aspects: Magma Core (API), Magma Tools and Magma Kit.

Magma Core

Is the API itself, the core of Magma. It consists of:

• Entities (Primitives, Elements, Components)
• Themes

Entities

Are the members of the system of components (something that we can see in Atomic Design), sharing relationships and hierarchy.

Primitives

Are the building blocks of the foundation, they are the members of a Theme, such as the color palette, typography, icons, spacing, breakpoints, etc., formatted in json files.

This is an extract from Magma's colors.json file.

Elements

Are the minimum expression of an interface element. They use primitives for their composition, such as buttons, images, links, input, etc.

Components

Higher-order compositions that use the Elements to build themselves. Examples of them can be Cards, Headers, Footers, Carousels, etc.

Themes

Make up a defined set of primitives. With the themes we have the ability to modify and completely change the appearance of an app in a centralised way.

Magma Tools

They are tools that help us work in a more agile and controlled way. Some of them are:

• Themes editor.
• Typographical scale editor responsive.
• Magma-cli to start a repository Magma React

Magma Kit

Elements related to an implementation of Magma, in our case React and Sketch. Our kit includes Sketch libraries, Sketch plugins and a React repository with primitives and elements.

Our own implementation of Magma

At Secuoyas we already use Magma 😜 and we have the privilege of having developed the first implementation in React and Sketch. What does this mean? Well, we have created a system of components in React that is nourished by primitives and themes from the Magma API.

Our idea is to open it up to the world when it is ready, at the moment it has to stay in our studio.

In the next instalments of Magma we will get into the details of how it works, how our customers have been using it, and how we ourselves have experienced it.

Illustration & Translation: Madeline HoningFord