A Syntax for Sketch Layers
One of the things we needed to tackle was a way to use the existing Sketch features to create and configure our designs, in such a way that we could easily parse them for information and provide that information into our react config.
The first stab at this was basically like running head first into a lamp post. Just make it loud and obvious. That meant caps lock and primitive structure.
Our first use case idea was to do a couple of Authentication views, something we build time and again in our mobile apps.
I had a Login View and a Register View.
Let's focus on one of these for now, since it doesn't really matter which, I'll start with the top, Registration.
Here's my Group and Layer structure.
IT'S A COMPLETE MESS.
But inadvertently, I'd just intuitively started naming my components like this
I'd started nesting them as I imagined a component would be nested in the React component, though without really thinking deeply about it.
By the second iteration (well, that's simplifying, there was a lot of buggering around in between), I'd a) changed the use case to a static landing page design, for now at least, leaving more complex back-end services to later.
Now things were starting to get a little interesting.
Firstly, we'd stopped shouting through the caps-locked group naming.
The 2 artboards were both referencing the same design, one was the working document, the other, an early form of documentation which highlighted the various components in the page.
We now had much better definition of our Components, Classes and configurable options per component.
Let's take the Jumbotron for example
Our group structure looks like this:
If you expand the
JumbotronItem component, you will find
Welcome to our site
Building functional static sites with sketch
You can see now the consistent use of the format
JumbotronComponent accepts any number of child groups of type
JumbotronItem accepts some further basic
Text objects, where we define the
There is also a global
Background item in the root of the
JumbotronComponent where we can control the background image, colour or gradient.
This is basically the principal of the Sketch syntax so far.
It might help to take another example.
You can see the repeated use of the
MyCustom5050Component. This is a simple component wrapper that sets a 100% width container and accepts two child components, each of which will be set to 50% width of the container.
We've selected the more complex variant on our design, the child components could be simple text or images, but that's not much fun.
Instead we have on one side a Contact Form and the other, an embedded Google Map.
The Contact Form is actually a simple instance of a
CentredContentComponent. It could contain anything, infact and all it cares about is that the content is aligned in a certain way.
This component has within it
We now meet some new basic classes of components,
TextField can contain a couple of further options
Whilst the Label is pretty self explanatory, by passing the
TEXTFIELD a rectangle shape, you can define the style of your form fields!
The same applies to the
Button will accept two child text layers and a shape layer as background.
You can see that we can define the border radius of the button, the colour and gradient using just the sketch tools.
The Map Component is quite a custom beast.
My address, some road, some postcode
How awesome is this!!!!
We can set the co-ordinates for our location, defining where the pin will be placed and map focussed.
We can set the address for the description in the map pin popover.
We can even define the shape of the popover!
Still a long way to go, but I think there's something workable in here... I'd love to hear what you think.