The power of branches

January 1, 2012

How I managed to combo Sketch and Abstract to seamsly create a scalable design or how I like to write very long titles.

Probably I’ll be uploading this post to medium, but without all the introduction life part, bloging stuff and the really long title.

This is weird, the last 10 posts or so in my blog had been wrote in Spanish, as you may know, spanish is main language, since I’m not so a “rule guy”, actually have a couple of rules, one of those is that if something wroten in spanish is usually out of date, talking about information post in blogs or medium, this is something I hope changes over time but internet has proving me wrong, that’s the main reason why this is in english.

If you also knew I moved to another Job in February of last year, also moved back from Santiago (💩) to Viña del mar and from a normal 9-5 job to a job where, I’m working with just friends (this haven’t been easy either, that probably will be in another post, mainly in spanish, sorry folks). In this job I had a particular task and was help the guys to build a very scalable project, since I have been trying to build a design system since the last 2 years, Spoiler alert: is hard to build a design system by yourself.

Building a Scalable “design system” with Sketch and abstract.

The goal

The goal was to create a design flow where doing the same product for different clients were the less painful, stressful, time consuming and also under a control version so we can deliver new componenents easily.

I started this project in february of 2019, at that moment Sketch for teams was a thing yet, and probably now there’s some “tricky” way to achieve the same, if you are a Figma lover, pls convince me to change my tools.

Ok let’s see what did I do, and why this worked for us (till now) let’s dive into the basics stuff…

Nested symbols & components

So for this project I decided to went a little extra mile with the use of Nested symbols, I wanted to make a fully customizable set of componentes, obviously based in Atomic Design, When I think about this wasn’t thinking in just changing colors, I wanted to be able to create completely different version, for achieve this… nested symbols.

TK gif buttons moding

The trick is using a main Symbol (👑) and create a series of variations for the different states or types of that componente, as always buttons are the best example. And for designing the states just overrides, text styles and layer styles.

Let’s see how a main button and two variations are created.

TK branches master and subproduct branches TK how abstract manages changes and how this allows you to deliver updates to branches TK atomic design TK libraries